VueCLI3创建项目和目录结构与配置信息详解

一.认识Vue CLI3

(1)vue-cli3与2版本有很大的区别

   1>vue-cli3是基于webpack 4打造的,vue-cli2还是webpack 3

   2>vue-cli3的设计原则是0配置,移除的配置文件根目录下的,build 和config等目录

   3>vue-cli3提供了vue ui命令,提供了可视化配置,更加人性化

   4>移除了static文件夹,新增了public文件夹,index.html移动到public中

 

 

二.vueCLI3的文件配置文件查看和修改

 

 配置去哪儿了?

第一种: 执行命令: vue ui   与哪个目录去执行时没关系的

第二种:可以通过cli2版本进行查看

第三种:node_module/@vue/cli-service/webpack.config.js 这就可以查看 

第四种:可以在根目录添加vue.config.js文件,到时候会把我们写的这个配置文件和隐藏的配置文件进行合并  

   重点:必须是vue.config.js,不能是其他颜色

module.exports={


}

　　

   

 

 

(1)main.js

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

Vue.config.productionTip = false

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

//这里等价于
new Vue({
  el:"#app"
  render:h=>h(App),    
})

重点: el 与 .$mount('#app')这是等效的