【脚手架VueCLI】从零开始,创建一个VUE项目
脚手架VueCli
文章目录
-
- 脚手架VueCli
-
- 一、什么是CLI
- 二、VueCLI所需要的环境
- 三、安装Vue脚手架
- 四、使用`CLI2`创建项目
- 五、项目目录结构描述
- 六、了解runtime-only和runtime-complier的区别
- 七、了解CLI3
一、什么是CLI
CLI:
Command-Line Interface(命令行界面),俗称脚手架
。
VueCLI可以帮助我们快速开发Vue开发环境以及对应的webpack配置。
二、VueCLI所需要的环境
运行VueCLI需要电脑中已经安装好了NodeJS
和NPM
命令。
NPM:Node Package Manager(NodeJS包管理工具)
在搭建脚手架之前,我们需要先把webpack的基础结构给安装好。
命令:npm install webpack -g
三、安装Vue脚手架
命令:npm install @vue/cli -g
如果出现文件无法被替换删除的情况,先使用命令:npm cache clean --force
;
然后再使用指令:npm install @vue/cli -g --force
上述命令安装的应该是CLI的4的版本,4的版本基本上与3的功能一致。
如果我们需要使用旧版的vue init功能,可以安装一个全局的桥接工具。
命令:npm install @vue/cli-init -g
CLI 2
创建webpack项目:
vue init webpack myPorject(myPorject这个是项目名)
CLI3
创建webpack项目:
vue create myProject
四、使用CLI2
创建项目
使用命令后,在真正创建项目之前,有些选项需要我们进行一些设置,具体如下:
Project name (my-project):
(项目名不能使用大写)这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车Project description (A Vue.js project):
项目描述,也可直接点击回车,使用默认名字Author (xxx):
作者,输入你的大名vue build (Use arrow keys):
选择默认的就成Runtime + Compiler: recommended for most usersinstall vue-router:
是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y” 或者直接回车即可。Use ESLint to lint your code?
是否使用ESLint?(ESlint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。) 默认使用,这样会生成相关的ESLint配置。Pick an ESLint preset Standard:
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车Setup unit tests?
(是否安装单元测试)Setup e2e tests with Nightwatch:
(是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景)Should we run 'npm install' for you after the project has been created?
(项目创建完成之后使用npm命令来进行包管理)是否使用安装依赖的包。- 全部选择好回车生成项目了
五、项目目录结构描述
build //构建脚步目录,保存一些webpack的初始化配置config //构建配置目录,项目初始化的配置,包括端口号等node_modules //npm加载的项目依赖的模块src //源码目录,这里是我们要开发的目录,基本上要做的事情都在这个目录里- assets //资源目录,用来放置图片,如logo等 - components //组件目录,用来放组件文件- router // 路由配置- app.vue //是项目入口文件- main.js //是项目的核心文件static //文件夹用来放置静态资源目录,如图片、字体等。test //初始测试目录,可删除.babelrc babel //编译参数,vue开发需要babel编译 .gitignore //用来过滤一些版本控制的文件,比如node_modules文件夹 index.html //是首页入口文件,你可以添加一些 meta 信息或统计代码啥。 package.json //是项目配置文件,记载着一些命令和依赖还有简要的项目描述信息 README.md //项目的说明文档,markdown 格式,介绍自己这个项目的
六、了解runtime-only和runtime-complier的区别
我们使用脚手架初始化两个项目,编译方式分别使用runtime-only(左边)
和runtime-complier(右边)
。可以发现,他们的main.js的代码有一些区别。
其主要的区别在于在加载组件的使用运用了两种不同的方法
。一种是直接注册组件
,而另外一种使用render方法进行加载
。要了解这两个方式的差异,我们首先要了解两种方式渲染网页的方法。
runtime-compiler:
vue的运行过程会将 template --解析–>成抽象语法树(ast)–编译成–> render函数—>虚拟dom树---->渲染成真实dom。
runtime-only:
render函数—>虚拟dom—>真实dom。runtime-only跳过了template解析成抽象语法树的步骤,代码量更少,性能更高。
在runtime-compiler中删除components属性和template,增加render函数也可以实现runtime-only一样的效果。
七、了解CLI3
CLI3和CLI2的差别还是很巨大的。在CLI3中移除了目录中的Config、Build和static目录,新增了public目录
。并且把index.html移动到了public目录之中。并在CLI3增加了一个图形界面
,我们可以通过图形界面来控制整个项目。
启动命令:vue ui
了解CLI3中目录结构以及文件的含义后,体验脚手架的图形管理页面即可。