Vuejs——前端学习日记（四）

Vue CLI

在写简单的Vue Demo程序，不需要Vue CLI；在开发大型项目的时候，是需要，且必然需要使用Vue CLI的。因为在开发大型应用时，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果都要手动完成这些工作会非常低效，所以通常会使用一些脚手架工具来完成这些事。
CLI是Command-Line Interface，命令行界面，俗称脚手架。Vue CLI是一个官方发布的vue.js项目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置，而Vue CLI使用的前提也是webpack。Vue.js官方脚手架工具就使用了webpack模版，对所有的资源会进行压缩等优化操作，而且在开发过程中提供了一套完整的功能，能使开发过程变得高效。
webpack的全局安装：

npm install webpack -g

Vue脚手架的全局安装：

npm install -g @vue/cli

Vue CLI3版本和Vue CLI4版本初始化项目的方式与Vue CLI2是不同的，但是可以通过桥接指令来拉取老版本的模版：

npm install -g @vue/cli-init

Vue CLI2初始化项目：

vue init webpack my-project

Vue CLI3及Vue CLI4初始化项目：

vue create my-project
npx vue create my-project

在创建项目时，系统会给你几个选项来对项目进行设置：

1. Project name 是来设置项目的名称，不能有大写；
2. Project description 是来设置项目的描述信息
3. Author 是来设置项目作者的信息，会默认从git里读取信息
4. Vue build 是来设置项目选择runtime+编译器还是只用runtime
5. Install vue-router？ 是来设置项目是否启用路由
6. Use ESLint to lint your code？ 是来设置项目是否检测js代码规范的
7. Set up unit tests 是来设置项目的单元测试的
8. Setup e2e tests with Nightwatch？ 是来设置项目是否采取端到端测试的，安装Nightwatch，是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架
9. Should we run ‘npm install’ for you after the project has been created？ 是来设置项目选用yarn或npm安装

在创建完项目后，可以通过npm run serve来启动项目，也可以通过vue ui来进入vue项目管理界面。


下面是初始化的过程截图：