1. Vue項(xiàng)目構(gòu)建
- 首先默認(rèn)安裝了node.js和vue-cli，接下來直接使用腳手架創(chuàng)建項(xiàng)目：
vue init webpack Demo // Demo是自定義項(xiàng)目跟目錄名迄损，無此目錄則自動(dòng)創(chuàng)建
-
接下來會進(jìn)行一系列配置詢問丑蛤，看圖：
項(xiàng)目配置 -
配置完回車梅桩，項(xiàng)目腳手架自動(dòng)生成完畢
腳手架 - 進(jìn)入Demo文件夾茸炒，啟動(dòng)項(xiàng)目試試：
cd Demo
npm start // 推薦使用npm run dev，該命令完整webpack環(huán)境可使用（webpack-simple環(huán)境無法使用）崎坊，具體可在配置文件package.json中查看：
啟動(dòng)路徑
-
啟動(dòng)項(xiàng)目后提示已經(jīng)運(yùn)行在本地8080端口备禀，直接瀏覽器跑起來：
項(xiàng)目啟動(dòng)
默認(rèn)啟動(dòng)頁面
2.項(xiàng)目文件配置
-
首先編輯器打開項(xiàng)目創(chuàng)建的文件夾，或者叫Github / 碼云拉下來的倉庫：
本地倉庫
這其中有很多的配置文件流强，具體有什么用這里不過多描述否則文章太長我也受不了...而上圖選中的index.html就是默認(rèn)加載的首頁痹届。 -
其實(shí)項(xiàng)目生成的很多配置文件大多不需要修改，主要修改的地方是src目錄下的一些配置文件：
main.js
這個(gè)頁面 是整個(gè)項(xiàng)目的核心打月，可以看到它創(chuàng)建了一個(gè)Vue實(shí)例掛載到index.html頁面中队腐，其中就注冊了App.vue組件和router目錄下的路由，這個(gè)頁面也不需要修改奏篙。 -
接下來看App.vue這個(gè)文件：
App.vue組件 -
這個(gè)組件呢就使用了我們的組件模板直接替換掉了
index.html中的<div id="app"></div>柴淘，所以這里我們把配置改成：
App.vue
把默認(rèn)的內(nèi)容和樣式都去掉，留下路由即可（<router-view/>）
這里再說一個(gè)注意點(diǎn)：一旦開啟了ESLint秘通，時(shí)刻注意代碼規(guī)范（自行百度規(guī)則）为严，不過.eslintignore文件中的路徑下的文件將不會檢查，一旦語法不規(guī)范肺稀，你的頁面控制臺和終端都會報(bào)錯(cuò)第股，這里根據(jù)提示的地方修改即可。 -
既然根組件保留了路由內(nèi)容话原，那么就是router目錄下的index.js文件：
index.js
這里就顯示了根路徑下的內(nèi)容（組件）夕吻，默認(rèn)加載的是HelloWorld組件（從src目錄下的components目錄下的Hellow.vue中導(dǎo)入）诲锹，因此這里把圈掉的干掉，在重新配置根目錄加載的內(nèi)容即可涉馅，最后自定義放組件的目錄（默認(rèn)情況不會使用components目錄而是自行創(chuàng)建归园，在通過同樣的方式引入即可）。
index.js
- 接下來重新配置首頁（根路徑下加載的組件）和路由：
image.png
這里配置了一個(gè)路由稚矿，當(dāng)頁面跳轉(zhuǎn)到
localhost:8080/list目錄下時(shí)庸诱，頁面將跳轉(zhuǎn)（加載List組件），組件配置模板如下：
組件模板
為了證明配置成功晤揣，附圖2張（主頁和路由配置的新頁面）：
1
2
3.基本項(xiàng)目搭建完成桥爽，接下來分析調(diào)用關(guān)系
人家的圖，希望不要被打死
- 使用到vue項(xiàng)目的文件包括一個(gè)
.html碉渡，兩個(gè).js聚谁，兩個(gè).vue文件母剥，關(guān)系如上圖所示 - 由圖可見滞诺，文件關(guān)鍵處在于
main.js，管理著所有需要的資源环疼，其中new Vue的參數(shù)习霹，解釋如下： - el：官方解釋為實(shí)例提供掛載的元素。此處為
index.html中的<div id="app"><div>炫隶。 - router：為router:router的簡寫（ES6語法）淋叶，指向引入文件中的
routes:[]。 - components：注冊哪些組件伪阶，就要在頂部引入文件煞檩。
template：替換掛載元素的模板組件，而掛載元素的內(nèi)容都將被忽略栅贴。即用<template>替換index.html里面的<div id="app"></div>
此時(shí)斟湃，可知main.js文件調(diào)用關(guān)系分為三步，如圖中序號：
- 確定將被掛載（替換）的元素檐薯，此處為
index.html中的<div id="app"><div>凝赛。 - 注冊組件（此處只有組件App），選擇其中用于替換掛載元素（第一步中的元素）的模板組件（
<App/>）坛缕，即用App.vue替換index.html中的<div id="app"><div>墓猎。 - 注冊路由器router：
- 模板組件（App.vue）中有
<router-view/>，將在其中渲染路由匹配到的組件 - 注入（import）路由時(shí)指定的是router文件夾赚楚，即文件夾下所有routes
- router文件夾下此時(shí)只有
index.js文件毙沾，其中routes:[]規(guī)定了文件地址及其url地址映射 - 根據(jù)文件地址，載入組件（
HelloWorld.vue）宠页，組件被渲染在<router-view/>中左胞，顯示在index.html中
- 模板組件（App.vue）中有
然而追本溯源膨俐，調(diào)用關(guān)系中仍有兩個(gè)問題：
-
index.html為何默認(rèn)顯示？
其實(shí)罩句，雙擊執(zhí)行npm中dev時(shí)焚刺，控制臺將執(zhí)行如下語句：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
由此可見，運(yùn)行時(shí)啟動(dòng)文件webpack.dev.conf.js门烂，而文件中包含如下語句乳愉，規(guī)定了起始頁面：
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
-
main.js為何默認(rèn)加載？
因?yàn)槭褂玫哪_手架工具vue-cli里用webpack來打包項(xiàng)目文件屯远，webpack.dev.conf文件里還定義了webpack基礎(chǔ)配置文件webpack.base.conf.js蔓姚，定義語句如下：
const baseWebpackConfig = require('./webpack.base.conf')
而文件webpack.base.conf.js中，包含如下語句慨丐，指定了入口：
entry: {
app: './src/main.js'
}
總結(jié)：
- 以上就是一個(gè)完整的Vue項(xiàng)目創(chuàng)建及配置文件修改和調(diào)用關(guān)系的說明坡脐，喜歡的小伙伴就點(diǎn)個(gè)喜歡吧，博主也不容易房揭！
