Vue-CLI（vue脚手架）安装的详细过程包括vue-cli2和vue-cli3

最新推荐文章于 2024-05-04 08:24:24 发布

原创最新推荐文章于 2024-05-04 08:24:24 发布 · 1.4k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

vue脚手架

本文介绍Vue-CLI的基本概念及其使用方法，包括命令行工具的安装与配置，通过Vue-CLI 2.x和3.x搭建Vue项目的基础架构，以及如何选择不同的构建配置。

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)：