vue-cli構(gòu)建項(xiàng)目成功后,項(xiàng)目目錄整體結(jié)構(gòu)如下
1.build文件夾下的文件如下侦啸,執(zhí)行npm run命令時(shí)執(zhí)行的是這個(gè)文件夾下的文件
webpack.dev.conf.js 文件中引入了webpack.base.conf.js文件挨务。在webpack.base.conf.js中有下面的代碼贿讹,這個(gè)是界面入口src/main.js文件
entry:{
app:'./src/main.js'
},
2.config文件夾下的文件如下圖萎羔,執(zhí)行文件需要的配置信息滔吠。? ? ? ? ? ? ? ? ??
執(zhí)行npm run dev的配置在config->index.js dev對(duì)象中抵恋,如果同時(shí)運(yùn)行幾個(gè)vue項(xiàng)目焕议,端口號(hào)存在沖突,可以在這里面進(jìn)行修改
執(zhí)行npm run build打包命令的配置在conig->index.js build對(duì)象中弧关,里面可以設(shè)置打包的路徑
3.node_modules文件夾 盅安,執(zhí)行npm install命令生成的安裝的依賴的文件夾
4.src文件夾,資源文件夾世囊,assets放置靜態(tài)文件别瞭,components放置組件,router是路由株憾,App.vue vue組件main.js項(xiàng)目入口
1)入口文件(main.js)里面的內(nèi)容如下圖蝙寨。
? 導(dǎo)入了vue? app.vue組件和router/index.js路由晒衩。
? App是src/App.vue。這個(gè)是入口的vue頁面墙歪。
? router是配置路由的听系,在src/router/index.js(注:如果index.js名稱不修改,這里inport的路徑可以直接寫./router? 否則的話要寫./router/文件名)
? Vue.config.productionTip= false;關(guān)閉生產(chǎn)模式下給出的提示
? new Vue新建一個(gè)vue對(duì)象虹菲,也是執(zhí)行vue的入口跛锌。template是模板。這里面的參數(shù)可以查看vue官網(wǎng)的API
? 2)App.vue相當(dāng)于一級(jí)頁面中公用的入口届惋,里面的<router-view/>是渲染一級(jí)頁面對(duì)應(yīng)的組件使用的髓帽。
? 3)路由頁面(/src/router/index.js)代碼如下圖。導(dǎo)入vue脑豹、vue-router和需要的組件
? 上面HelloWorld組件的路徑使用@/components/HelloWorld其中@是src的路徑代理郑藏,可以在? build/webpack.base.conf.js文件中找到下圖中的這段代碼
http://www.reibang.com/p/2769efeaa10a ? 初用vue-cli搭建項(xiàng)目可以參考這篇文章