1. 初始化
npm install -g vue-cli //全局安裝 vue-cli
vue init webpack my-blog //創(chuàng)建基于webpack的博客
cd my-blog //進入創(chuàng)建的文件夾中
npm install //安裝依賴模塊
npm run dev //打開localhost:8080看看環(huán)境是否搭建成功
創(chuàng)建成功后首頁如下圖
此時項目的結(jié)構(gòu)如下：build 與 config 是與 webpack 配置相關(guān)的文件臀蛛，node_modules 是相關(guān)依賴文件闺阱，src 是源文件，App 是創(chuàng)建的 vue 對象州胳，項目的總的模板记焊，main.js 與 index.html 是入口文件
2. 創(chuàng)建組件
在 src 中創(chuàng)建組件文件夾，每個組件由 template栓撞、style 及 script 文件構(gòu)成遍膜，style 中加入 scoped 關(guān)鍵字可以確保該樣式只作用于本組件。
3. 配置路由
首先要安裝vue-router瓤湘，router 文件夾中有 index.js 文件捌归，里面給出了路由配置的范例：創(chuàng)建 vue-router 對象，參數(shù)是一個對象岭粤，對象有一個屬性 routes，值為數(shù)組特笋，數(shù)組的成員是包含 path 屬性和 component 屬性的對象剃浇，圖中 @ 是在配置中定義的巾兆，指向 src 文件夾，可以在 src 中創(chuàng)建各個組件虎囚，然后 import 導入該文件中
還可以設(shè)置模塊的懶加載角塑，只有當用戶進入某模塊時才去引入該模塊
在進入每個頁面前先判斷該頁面是否有權(quán)限（store 在引入
vuex 后創(chuàng)建）
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
store.dispatch('checkLogin').then(isLogin=>{
if(!isLogin){
next({
path:'/login',
query: { redirect: to.fullPath }
})
}else {
next()
}
})
} else {
next() // 確保一定要調(diào)用 next()
}
})
export default router
最后在 main.js 引入該文件
4. 封裝數(shù)據(jù)請求接口及后端提供的各API接口
接口封裝好后，可以使后續(xù)使用更加方便淘讥、結(jié)構(gòu)更清晰圃伶，在項目中用到了axios，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端蒲列，本質(zhì)上也是對原生XHR的封裝窒朋，只不過它是Promise的實現(xiàn)版本，它具有防御 XSRF 攻擊的作用蝗岖。先安裝 axios 組件侥猩，然后通過 import 導入文件中
5. 創(chuàng)建公共樣式（assets）及公共組件（components）
6. 創(chuàng)建狀態(tài)管理文件夾 store
文件夾結(jié)構(gòu)如下，在 modules 下的每個模塊文件中定義 state抵赢、mutations欺劳、getters、actions 對象铅鲤，其中 getters 下的屬性划提，通過 vuex 的部署可在全局狀態(tài)下被 vue 子組件獲取
安裝 vuex 管理 vue 中的狀態(tài)，下圖為 index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import blog from './modules/blog'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
auth,
blog
}
})
最后在 main.js 中引入該文件邢享，以供全局使用鹏往，當其他組件想要使用 store 中的狀態(tài)時可以從 vuex 中引入局部方法，如mapGetters驼仪、mapMutations 及 mapActions掸犬，mapGetters 引入的狀態(tài)不必在組件的 data 屬性中再定義，mapMutations 引入的方法绪爸，需在組件的 methods 中另行定義方法湾碎，在方法中作為回調(diào)使用
7. 完善頁面
8. 打包文件
npm run build
生成 dist 文件夾，發(fā)布上線
