1. 總體結(jié)構(gòu)
vue-project
|----build --webpack相關(guān)配置文件(一般不需再進(jìn)行配置)
|----config --vue基本配置文件(配置監(jiān)聽端口、打包構(gòu)建等)
|----node_modules --依賴的node模塊
|----src --項(xiàng)目核心文件(頁面代碼存放位置)
|----assets --靜態(tài)資源(樣式類文件，以及一些外部js文件)
|----components --公共組件
|----router --路由
|----App.vue --根組件
|----main.js --入口文件
|----static --靜態(tài)資源(存放圖片類資源)
|----.babelrc --babel編譯參數(shù)
|----.editorconfig --代碼格式
|----.gitignore -- git上傳需要忽略的文件配置
|----.postcssrc.js --轉(zhuǎn)換css的工具
|----index.html --主頁
|----package.json --項(xiàng)目構(gòu)建基本信息
|----README.md --項(xiàng)目說明
2. 具體結(jié)構(gòu)說明
2.1 build--[webpack配置]
build文件主要是webpack的配置，主要啟動文件是dev-server.js枕稀，當(dāng)我們輸入npm run dev首先啟動的就是dev-server.js汹粤，它會去檢查node及npm版本，加載配置文件结借，啟動服務(wù)。
build
|----build.js --生產(chǎn)環(huán)境構(gòu)建
|----check-version.js --版本檢查(node卒茬，npm)
|----dev-client.js --開發(fā)服務(wù)器的熱重載(頁面自動刷新)
|----dev-server.js --構(gòu)建本地服務(wù)器(npm run dev即運(yùn)行該文件)
|----utils.js --構(gòu)建相關(guān)工具
|----vue-loader.conf.js --css加載器配置
|----webpack.base.conf.js --webpack基礎(chǔ)配置
|----webpack.dev.conf.js --webpack開發(fā)環(huán)境配置
|----webpack.prod.conf.js --webpack生產(chǎn)環(huán)境配置
2.2 config--[vue項(xiàng)目配置]
config文件主要是項(xiàng)目相關(guān)配置船老，我們常用的就是當(dāng)端口沖突時(shí)配置監(jiān)聽端口，打包輸出路徑及命名等
config
|----dev.env.js --項(xiàng)目開發(fā)環(huán)境配置
|----index.js --項(xiàng)目主要配置(監(jiān)聽端口,打包路徑)
|----prod.env.js --項(xiàng)目生產(chǎn)環(huán)境配置
2.3 node_modules--[依賴包]
node_modules里面是項(xiàng)目依賴包圃酵，其中包括很多基礎(chǔ)依賴柳畔，自己也可以根據(jù)需要安裝其他依賴。安裝方法為打開cmd郭赐，進(jìn)入項(xiàng)目目錄薪韩，輸入npm install [依賴包名稱],回車。
在兩種情況下我們會自己去安裝依賴：
（1）項(xiàng)目運(yùn)行缺少該依賴包：例如項(xiàng)目加載外部css會用到的css-loader捌锭，路由跳轉(zhuǎn)vue-loader等（安裝方法示例：npm install css-loader）
（2）安裝插件：如vux（基于WEUI的移動端組件庫）俘陷，vue-swiper（輪播插件）
注：有時(shí)會安裝指定依賴版本，需在依賴包名稱后加上版本號信息观谦，如安裝11.1.4版本的vue-loader拉盾，輸入npm install vue-loader@11.1.4
2.4 src--[項(xiàng)目核心文件]
項(xiàng)目核心文件前面已經(jīng)進(jìn)行了簡單的說明，接下來重點(diǎn)講解main.js豁状，App.vue,及router的index.js
2.4.1 App.vue--[根組件]
一個vue頁面通常由三部分組成:模板(template)捉偏、js(script)倒得、樣式(style)
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
template
其中模板只能包含一個父節(jié)點(diǎn)，也就是說頂層的div只能有一個（例如下圖夭禽，父節(jié)點(diǎn)為#app的div霞掺，其沒有兄弟節(jié)點(diǎn)）
<router-view></router-view>是子路由視圖，后面的路由頁面都顯示在此處
打一個比喻吧,<router-view>類似于一個插槽讹躯，跳轉(zhuǎn)某個路由時(shí)菩彬，該路由下的頁面就插在這個插槽中渲染顯示
script
vue通常用es6來寫，用export default導(dǎo)出蜀撑，其下面可以包含數(shù)據(jù)data挤巡，生命周期(mounted等)，方法(methods)等酷麦，具體語法請看vue.js文檔矿卑。
style
樣式通過style標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的沃饶，如需定義作用域只在該組件下起作用母廷，需在標(biāo)簽上加scoped，<style scoped></style>
如要引入外部css文件糊肤，首先需給項(xiàng)目安裝css-loader依賴包琴昆，打開cmd，進(jìn)入項(xiàng)目目錄馆揉，輸入npm install css-loader,回車业舍。安裝完成后，就可以在style標(biāo)簽下import所需的css文件升酣，
例如：
<style>
import './assetc/css/public.css';
</style>
這樣舷暮，我們就可以把style下的樣式封裝起來，寫到css文件夾噩茄，再引入到頁面使用下面，整個vue頁面也看上去更簡潔。
2.4.2 main.js--[入口文件]
main.js主要是引入vue框架绩聘，根組件及路由設(shè)置沥割，并且定義vue實(shí)例，下圖中的
components:{App}就是引入的根組件App.vue
后期還可以引入插件凿菩，當(dāng)然首先得安裝插件机杜。
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2.4.3 router--[路由配置]
router文件夾下，有一個index.js衅谷，即為路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
這里定義了路徑為'/'的路由椒拗，該路由對應(yīng)的頁面是Hello組件，所以當(dāng)我們在瀏覽器url訪問http://localhost:8080/#/時(shí)就渲染的Hello組件
類似的会喝，我們可以設(shè)置多個路由陡叠，‘/index','/list'之類的，當(dāng)然首先得引入該組件肢执，再為該組件設(shè)置路由枉阵。
2.5 index.html--[主頁]
index.html如其他html一樣，但一般只定義一個空的根節(jié)點(diǎn)预茄，在src下的main.js里面定義的實(shí)例將掛載在根節(jié)點(diǎn)下兴溜，內(nèi)容都通過vue組件來填充
