11-Vue-CLI的使用与配置_where do you prefer placing config for babel, esli-优快云博客

本文链接：https://blog.youkuaiyun.com/Zhou_ZiZi/article/details/108544101

一、Vue CLI安装

开发大型项目，必然需要使用Vue CLI，俗称脚手架。开发时需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

1.1 使用环境

Node：版本在8.9以上的Node环境(推荐 8.11.0+)，默认安装npm，也可使用cnpm。
Webpack全局安装：npm install webpack -g

1.2 安装Vue脚手架

3.x以上版本脚手架安装：

npm install -g @vue/cli
#查看版本
vue --version

旧版本兼容需要拉取2.x模板：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

1.3 CLI2初始化项目

Vue CLI2初始化项目：

vue init webpack my-project

CLI2初始项目参数详解：

vue init webpack vuecli2test
#根据名称创建文件夹，存放项目内容，默认项目名称，不能包含大写字母
? Project name vuecli2test
#项目名称，不包含大写字母
? Project description vue cli2 test
#项目描述
? Author xxx
#作者信息，默认会从git中读取
? Vue build standalone
#build的模式
? Install vue-router? No
#是否使用vue-router
? Use ESLint to lint your code? Yes
#是否使用ESLint检查代码规范
? Pick an ESLint preset Standard
? Set up unit tests No
#单元测试
? Setup e2e tests with Nightwatch? No
#是否设置end to end测试，Nightwatch是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架
? Should we run `npm install` for you after the project has been created? (recommended) npm
#选择npm或yarn进行安装

注：关闭ESlint：config–> index.js–> useEslint:false

1.4 CLI2目录详解

初始化完成后，可以得到这样的目录：
在这里插入图片描述

其中：

build和config:都是webpack的相关配置

src：写代码的地方

static：直接上传的静态文件夹

.babelrc:ES代码相关转化配置

.editorconfig：项目中文本规范配置

.gitignore：Git仓库忽略的文件夹配置

.postcssrc.js：CSS相关转化的配置

package-lock.json：依赖包版本映射信息

1.5 runtime的两种模式

运行流程的差异

runtime-compiler运行流程：

template模板–>解析成ast抽象语法树–>编译成render函数–>virtual dom–>真实DOM

runtime-only运行流程：(性能更高，代码更少，少6kb)

render函数–>virtual dom–>真实DOM

mian.js中的差异：

//runtime-compiler
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
  }
})

//runtime-only，h相当于createElement
new Vue({
  el: '#app',
  render: function (h) {
    return h(App)
  }
})
//render: h => h(App)

在runtime-only中不用再处理template，.vue文件中的template是由vue-template-compiler处理的。

二、Vue CLI3

2.1 与CLI2的区别

webpack版本：CLI3–Webpack 4，CLI2–Webpack 3
文件：移除build和config等目录，移除static文件夹，新增public文件夹，index.html放置于public中
可视化配置：CLI3提供vue ui

2.2 CLI3初始化项目

新建项目：

vue create 项目名称

项目参数详解：

Vue CLI v4.5.4
#选择配置方式
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 
#选择自己需要的配置，空格选择
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ...
#选择使用vue的版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)
#对应的配置单独生成文件还是放在package.json中
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
#是否保存刚刚的配置
? Save this as a preset for future projects? (y/N)