vue-cli 搭建博客

---

1. 环境搭建

npm install -g vue-cli //全局安装 vue-cli
vue init webpack my-blog //创建基于webpack的博客
cd my-blog //进入创建的文件夹中
npm install //安装依赖模块
npm run dev //打开localhost:8080看看环境是否搭建成功

创建成功后首页如下图

此时项目的结构如下：build 与 config 是与 webpack 配置相关的文件，node_modules 是相关依赖文件，src 是源文件，App 是创建的 vue 对象，项目的总的模板，main.js 与 index.html 是入口文件

2. 创建组件

在 src 中创建组件文件夹，每个组件由 template、style 及 script 文件构成，style 中加入 scoped 关键字可以确保该样式只作用于本组件

3. 配置路由

router 文件夹中有 index.js 文件，里面给出了路由配置的范例：创建 vue-router 对象，参数是一个对象，对象有一个属性 routes，值为数组，数组的成员是包含 path 属性和 component 属性的对象，图中 @ 是在配置中定义的，指向 src 文件夹，可以在 src 中创建各个组件，然后 import 导入该文件中

还可以设置模块的懒加载，只有当用户进入某模块时才去引入该模块

在进入每个页面前先判断该页面是否有权限（store 在引入
vuex 后创建）

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() // 确保一定要调用 next()
  }
})

export default router

最后在 main.js 引入该文件

4. 封装数据请求接口及后端提供的各API接口

接口封装好后，可以使后续使用更加方便、结构更清晰，在项目中用到了axios，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，它具有防御 XSRF 攻击的作用。先安装 axios 组件，然后通过 import 导入文件中

5. 创建公共样式（assets）及公共组件（components）

6. 创建状态管理文件夹 store

文件夹结构如下，在 modules 下的每个模块文件中定义 state、mutations、getters、actions 对象，其中 getters 下的属性，通过 vuex 的部署可在全局状态下被 vue 子组件获取

安装 vuex 管理 vue 中的状态，下图为 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 中的状态时可以从 vuex 中引入局部方法，如mapGetters、mapMutations 及 mapActions，mapGetters 引入的状态不必在组件的 data 属性中再定义，mapMutations 引入的方法，需在组件的 methods 中另行定义方法，在方法中作为回调使用

7. 进一步完善页面

8. 打包文件

npm run build

生成 dist 文件夹，可以通过创建 git 库的方式，发布到 github 上