Vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架酷窥。
1.vue-cli項目目錄結(jié)構(gòu)
build項目構(gòu)建（webpack）相關(guān)代碼
config 項目開發(fā)環(huán)境配置
node_modules 項目中安裝的依賴模塊
scr源碼目錄
----assets資源文件夾
----components公共組件
----App.vue頁面入口文件
----main.js程序入口文件虐呻，加載各種公共組件
static靜態(tài)文件卿吐，比如一些圖片琅摩，json數(shù)據(jù)等
.babelrcES6語法編譯配置文件
.editorconfig定義代碼格式
.gitignoregit上傳需要忽略的文件格式
.postcssrc.jspostcss配置文件
index.html入口頁面
package.json項目基本信息和依賴配置
2.package.json
package.json文件是項目根目錄下的一個文件，定義該項目開發(fā)所需的各種模塊以及一些項目配置信息。
package.json里的scripts旬渠，定義了可以用npm運行的命令。
package.json里的dependencies端壳，項目運行時所依賴的模塊告丢。
package.json里的devDepentencies，項目開發(fā)時所依賴的模塊损谦。
3.打包
$npm run build命令后岖免，vue-cli會自動進行項目發(fā)布打包，命令執(zhí)行完后照捡，在項目根目錄生成dist文件夾颅湘，這個文件夾里邊就是需要上傳到服務(wù)器的文件。
dist文件夾目錄：
·index.html 主頁文件：因為我們開發(fā)的是單頁web應(yīng)用栗精，所以說一般只有一個html文件闯参。
·static 靜態(tài)資源文件夾：js、css和一些圖片悲立。
4.main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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/>'
})
//main.js引進了App的組件和<App/>的模板鹿寨，通過import App from './App'引入的。
5.App.vue文件
<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>
(1)<template></template>標簽包裹的內(nèi)容：這是模板的HTMLDom結(jié)構(gòu)薪夕，里邊引入了一張圖片和<router-view></router-view>標簽脚草，<router-view>標簽說明使用了路由機制。
(2)<script></script>標簽包裹的js內(nèi)容：Vue的邏輯代碼原献。
(3)<style></style>標簽包裹的css內(nèi)容：寫css樣式馏慨。可以用<style scoped></style>來聲明這些css樣式只在模板中起作用姑隅。
6.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
}
]
})
通過import HelloWorld from '@/components/HelloWorld'引入写隶，并在下方設(shè)置路由，設(shè)置HelloWorld為/跟路由組件讲仰。
