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)建成功后首頁如下圖

image

此時項目的結(jié)構(gòu)如下：build 與 config 是與 webpack 配置相關(guān)的文件，node_modules 是相關(guān)依賴文件，src 是源文件，App 是創(chuàng)建的 vue 對象，項目的總的模板，main.js 與 index.html 是入口文件

image

2. 創(chuàng)建組件

在 src 中創(chuàng)建組件文件夾，每個組件由 template、style 及 script 文件構(gòu)成，style 中加入 scoped 關(guān)鍵字可以確保該樣式只作用于本組件。

image

3. 配置路由

首先要安裝vue-router，router 文件夾中有 index.js 文件，里面給出了路由配置的范例：創(chuàng)建 vue-router 對象，參數(shù)是一個對象，對象有一個屬性 routes，值為數(shù)組，數(shù)組的成員是包含 path 屬性和 component 屬性的對象，圖中 @ 是在配置中定義的，指向 src 文件夾，可以在 src 中創(chuàng)建各個組件，然后 import 導(dǎo)入該文件中

image

還可以設(shè)置模塊的懶加載，只有當(dāng)用戶進入某模塊時才去引入該模塊

image

在進入每個頁面前先判斷該頁面是否有權(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 導(dǎo)入文件中

5. 創(chuàng)建公共樣式（assets）及公共組件（components）

6. 創(chuàng)建狀態(tài)管理文件夾 store

文件夾結(jié)構(gòu)如下，在 modules 下的每個模塊文件中定義 state、mutations、getters、actions 對象，其中 getters 下的屬性，通過 vuex 的部署可在全局狀態(tài)下被 vue 子組件獲取

image

安裝 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 中引入該文件，以供全局使用，當(dāng)其他組件想要使用 store 中的狀態(tài)時可以從 vuex 中引入局部方法，如mapGetters、mapMutations 及 mapActions，mapGetters 引入的狀態(tài)不必在組件的 data 屬性中再定義，mapMutations 引入的方法，需在組件的 methods 中另行定義方法，在方法中作為回調(diào)使用

7. 完善頁面

8. 打包文件

npm run build

生成 dist 文件夾，發(fā)布上線