Vue-CLI
Vue-CLI:命令行工具,用于快速生成Vue项目基础架构,简化程序员创建Vue项目的过程。
CLI的意思:
- CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.
- Vue CLI是一个官方发布vue.js项目脚手架
- 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.
(一)安装vue-cli前的准备
安装vue-cli之前要先安装node和webpack
vue-cli2与vue-cli3区别
- vue-cli 3是基于webpack 4打造,vue-cli 2还是webapck 3
- vue-cli 3提供了vue ui命令,提供了可视化配置,更加人性化
- 移除了static文件夹,新增了public文件夹,并且index.html移动到public中
- vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
(二)安装vue-cli2
全局安装
npm i -g @vue/cli-init
初始化vue-cli2的项目
vue init webpack my-project
运行初始化命令的时候会有几个选项:
1)Project name (my-project):项目名称不能大写
2)Project description (A Vue.js project):对项目的描述
3)Author作者(你的名字):作者的信息,如果不填会默认从git中读取信息
4)Vue build (Use arrow keys):
- Runtime + Compiler: recommended for most users
- Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
选择这两个的区别是src下的main.js中代码略微不同
Runtime + Compiler(运行程序+编译器):
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Runtime + compiler 中 Vue 的运行过程:
- 首先将vue中的模板进行解析解析成abstract syntax tree (ast)抽象语法树
- 将抽象语法树在编译成render函数
- 将render函数再翻译成virtual dom 虚拟dom
- 将虚拟dom显示在浏览器上
Runtime-only(仅运行程序):
new Vue({
el: '#app',
render: h => h(App)
})
//h函数:
简单地说就是 h 函数就是 createElement 函数,用于创建 虚拟DOM
createElement('标签',{标签的属性},['内容'])
例:createElement('h2',{class:'box'},['hhhhh']) ---> <h2 class="box">hhhhh</h2>
Runtime-only中 Vue 的运行过程:
- 将render函数再翻译成virtual dom 虚拟dom
- 将虚拟dom显示在浏览器上
所以说runtime-only的性能更高,代码量更少
5)Install vue-router?(Y/n):是否安装Vue路由
6)Use ESLint to lint your code?(Y/n): 是否用ESLint检查代码规范
如果选择yes : Pick an ESLint preset(Use arrow keys):选择一个预置ESLint(使用箭头键)
- Standard (https://github.com/standard/standard)
- Airbnb (https://github.com/airbnb/javascript)
- none (configure it yourself)
7)Set up unit tests (Y/n) :是否使用单元测试
8)Setup e2e tests with Nightwatch?(Y/n):e2e测试,end to end ,安装Nightwatch,是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架
9)Should we run npm install
for you after the project has been created? (recommended) (Use arrow keys):
- Yes, use NPM
- Yes, use Yarn
- No, I will handle that myself
按照这个顺序建好文件后目录为:
每个文件夹所代表的意思:
最后启动项目:
npm run dev
(三)安装vue-cli3
全局安装
npm install @vue/cli -g
初始化vue-cli2的项目
vue create my-project
运行初始化命令的时候会有几个选项:
1)选择配置方式 :
2)如果选择自己配置则:
选择自己需要的配置空格选中或取消
3)对应的配置单独生成文件还是放在package.json中
4)要不要把自己所选择的配置保存下来
按照这个顺序建好文件后目录为:
每个文件夹所对应的意思:
最后运行项目:
npm run serve