文章目录
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() 手动地挂载一个未挂载的实例。
4. 配置文件去哪里了
node_modules --> @vue --> cli-service，配置文件都在这个cli-sevice文件夹下。
一般情况下我们是不会修改node_modules中的文件的，但是如果我们对这个配置不满意，想修改一下怎么办呢？需要在项目根目录下创建一个文件 vue.config.js （必须是这个名字），然后添加自己想要的配置就行了。打包的时候会自动将这个文件的配置信息和 node_modules/@vue/cli-service 中的配置信息做一个合并。
module.exports = {
}