Vue CLI详解
前面通过webpack配置一些属性,但是在真实的项目开发中,我们是不会从头到尾自己手动写一些配置的。不管是通过vue进行开发,还是react进行开发,他们均有对应的脚手架的,我们可以通过对应的脚手架进行自动配置。
1、Vue CLI
(1) 什么是Vue CLI
- 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。
- 如果你在开发大型项目, 那么你需要使用Vue CLI。
- 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来自动生成一些配置(比如代码目录结构、项目结构等),来帮助开发者完成与配置有关的事情。
- 而且我们自己写配置的时候,配置不一定是最好的。在开发大型项目的时候,显然效率低下,你还要去学各种配置信息。
CLI是什么意思?
- CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。
- Vue CLI是一个官方发布的vue.js 项目脚手架,使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。
脚手架是什么?其实就是类似于建筑时候外围搭载的脚手架。
(2) Vue CLI使用前提 - Node
使用VUE CLI必然要依赖node环境,因此需要以下操作。
- 安装NodeJS
- 可以直接在官方网站中下载安装:网址: http://nodejs.cn/download/
- 检测安装的版本
- 默认情况下自动安装Node和NPM。
- Node环境要求8.9以上或者更高版本。
- 什么是NPM呢?
- NPM的全称是Node Package Manager是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
- 后续我们会经常使用NPM来安装一些开发过程中依赖包。
小贴士
cnpm安装:由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
(3) Vue CLI使用前提 - Webpack
- Vue.js官方脚手架工具就使用了webpack模板,对所有的资源会压缩等优化操作.
- 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Webpack的全局安装:npm install webpack -g
这部分知识前面讲过。
(4) Vue CLI的使用
-
第一步安装Vue脚手架(一般全局安装就行):npm install -g @vue/cli
-
注意:如果通过上面的命令安装的时候,安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。我们可以在vue CLI3上面拉个模板就可以使用vuecli2。(官网做法:https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC)
-
若安装脚手架的时候出现错误,执行一下npm clean cache --force
(或者直接到C:\Users\12925\AppData\Roaming删除npm-cache文件夹)
-
第二步安装完毕后,可通过vue的相关指令,看看是否安装成功
小贴士
在前面的安装中,如果你是使用npm install -g @vue/cli安装Vue脚手架的话,安装的是vuecli2版本的,如要你在学习的过程中,需要使用vuecli2,我们需要在vuecli3的基础上拉取vuecli2的模板。 -
第三步使用Vue CLI2初始化项目:vue init webpack my-project
- 执行完这条指令后,在就会在我们的项目内自动生成webpack的相关配置文件到my-project里面。
配置后项目中有一系列的文件
- 或者使用Vue CLI3初始化项目:vue create my-project
2、Vue CLI2
(1) 目录结构详解
使用Vue CLI2初始化项目后,会生成一系列的文件,这些文件是什么?
(2) Runtime-Compiler和Runtime-only的区别
在利用vuecli2开发项目的时候,有这一步骤:
他会有以下两个选项:
认识Runtime-Compiler和Runtime-only的区别前插一下eslint的规范:
①先在本项目的文件下,执行vue init webpack runtimecompiler初始化项目
该情况下,选第一个。
②在通过vue init webpack runtimeonly初始化项目。(目的后面看看两者的区别)该情况下选第二个。
然后会有两个文件。
③npm run dev一下,可以看到是这个页面。
这是他默认的一个页面。可以通过入口文件(main.js)去看相应的代码就知道了。
小贴士
如果执行npm run dev有错误,应该是开启了eslint检错,根据提示的错误规范化代码即可。获取直接把eslint改为false。(在config/index.js文件里面)
接下来正是进入 Runtime-Compiler和Runtime-only的区别:
先来看看两种方式,产生的main.js有什么不同。
其次:
①runtimecompiler通过注册使用,是需要template模板的,那么他的过程是:template -> ast -> render -> vdom -> UI(真实DOM)
②runtimeonly:render->vdom->UI
来个测试,我们可以看到有两个选项,他有对这两个方式的描述:
小贴士
- runtimeonly的优点:性能高,代码量少
- 其实通过runtimecompiler创建的项目,main.js里面创建vue实例中的template等价于render。他会将createElement里面的内容替换掉挂载app的标签的里面的内容
进行npm run dev后:
还能这么写:
也可传入组件:
其实用render函数代替的话就等价于用vue init webpack runtimeonly效果一样。
简单总结
- 如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
- 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only
- 那么.vue文件中的template是由谁处理的呢?
- 是有vue-template-compiler处理的,将template处理成render函数。所有.vue里面的template都会便编译成render函数。
- 这个vue-template-compiler在前面的webpack引入组件化开发时安装过(npm install vue-loader vue-template-compiler --save-dev
)
runRuntime-Compiler 和 Runtime-only为什么会有如此差异:
(3) render函数的使用
(4) npm run buil过程
(5) npm run dev过程
(6) 修改配置:webpack.base.conf.js起别名
后面在项目开发中在详讲。
3、Vue CLI3
(1) 认识Vue CLI3
vue-cli 3 与 2 版本有很大区别:
- vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录。(所谓的0配置是之前使用vuecli2创建项目的时候,他会生成两个配置webpack的配置文件,build和config,这里的0配置是说vuecli3没有这两个文件了。)
- vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化的移除了static文件夹,新增了public文件夹,并且index.html移动到public中。public的文件夹会原封不动的复制到dist里面。
(2) Vue CLI3
用Vue CLI3创建项目:vue create testvuecli3
选Manually select features手动配置后:
这里是一次性配置。
小贴士
保存完项目的配置后,之后我们在创建项目的时候,他这里除了原本的以外,还有前面手动创建的配置叫victory_CEO:
如果我们创建了很多个,这里为了演示在创建一个:
如果创建了多个,想要删除一些已不再使用的配置的话,可以到(C:\Users\Administrator里面找.vuerc)直接删除不要的配置。
(3) 目录结构详解
vuecli3项目怎么跑起来,看package.json:
因此通过npm run serve跑起来。
小贴士
(4) 配置去哪里了?
我们用vuecli3的时候,很多配置文件没有了,因为是0配置开发嘛。因此类似于vuecli2开发项目时的那些配置去哪里了?现在来探讨一下,如果要修改的话要怎么做。
①启动本地服务:vue ui
可通过用户图形化界面来管理项目。导入项目后,会弹出这个管理页面:
我们可以在这里更改一些配置。
②vuecli3设计原则是0配置,因此一些配置信息(build和config)被隐藏起来了。vuecli3进行开发项目时,配置可以到下面的文件里面修改。
或者在根目录下创建一个文件(vue.config.js),然后在git commit -m ‘添加一个配置文件’。
这里有三步:git add .–>git status–>git commit -m ‘修改配置文件’