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,不能是其他颜色

?

1 2 3 4

module.exports={     }

　　

   

 

 

(1)main.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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),    })<br><br>重点: el 与 .$mount('#app')这是等效的