使用vue-cli3创建项目

---

1. 前言

vue-cli3 与 vue-cli2 版本有很大区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 基于 webapck 3
• vue-cli 3 的设计原则是“0配置”，移除了根目录下的配置文件，build和config等目录
• vue-cli 3 提供了 vue ui 命令，提供了可视化的操作界面
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2. 创建项目

创建项目的命令：vue create 项目名称 ，接下来需要选择相关的配置，这篇博客写的很详细：https://www.cnblogs.com/dotnet261010/p/11534564.html

3. 目录结构

它的main.js代码是这样的

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
     
  render: h => h(App),
}).$mount('#app')

这里创建的vue实例没有el属性，而是在实例后面添加了一个 $mount(’#app’) 方法，手动挂载实例到id为app的dom元素上。

而如果在使用 vue-cli2 脚手架构建项目时，选择了Runtime + Compiler模式，它的main.js如下：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
     
  el: '#app',
  render: h => h(App)
})

其实 el 的作用和 $mount 函数的作用是一样的，都是将 vue根实例挂载到某一个html元素上。vue官网是这样解释的：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

vue的生命周期图

vue官网 | vm.$mount()

---

4. 配置文件去哪里了

node_modules --> @vue --> cli-service，配置文件都在这个cli-sevice文件夹下。

一般情况下我们是不会修改node_modules中的文件的，但是如果我们对这个配置不满意，想修改一下怎么办呢？需要在项目根目录下创建一个文件 vue.config.js （必须是这个名字），然后添加自己想要的配置就行了。打包的时候会自动将这个文件的配置信息和 node_modules/@vue/cli-service 中的配置信息做一个合并。

module.exports = {
     
  
}

---

5. 资料

Vue CLI官网 | 配置参考

vue-cli3配置文件