配置一个vue-cli3.0项目

墨蓝 2022-01-20 03:25 221阅读 0赞

谢谢大家指正，我之前分不清，vue3指的是vue3还是vue-cli3，我这里讲的确实是vue-cli3，我这里订正下。之前router的代码是贴错了，也感谢网友的指正，已订正。

至于评论里喷我的，本人声明下吧，本文只合适诚心学习交流的人观看，傻逼请略过。

\----分割线----

**以下是正文**

说起来有点丢人，我已经使用vue好久了，但是怎么从0开始配置一个vue项目，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播自己的女朋友洗澡。

以下以新建一个图书管理项目为例。我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。

### 1.初始化项目 ###

#### 1.1全局安装vue-cli ####

创建vue项目，首先要确保全局安装了vue命令行工具。

我这边使用yarn而不用npm，因为yarn要比npm好用的多，强烈推荐使用。如果大家对yarn不熟悉，我这边免费赠送我的yarn教程。[点击查看][Link 1]。

yarn add global @vue/cli
    复制代码

#### 1.2 新建项目 ####

使用vue-cli3开发项目，可以使用图形化界面，也可以使用命令行，还可以基于原型进行开发。我这里以常见的基于命令行的开发为例。

我想在我D盘的test文件夹下新建一个图书管理项目，项目名叫book。执行如下命令即可。

D:\test>vue create book
    复制代码

这里可以选择我们需要安装的预处理器preset。我们可以直接选下图中的第一个选项，这样可以省去很多麻烦。不过这里为了讲解需要，我们选择默认的（bable+eslint）。往后我们再讨论怎么手动安装其他preset。我强烈建议你选择第一项，这样真的可以省去很多麻烦。

程序执行完后，项目结构如下：

将命令行路径设置为book项目所在的路径

D:\test>cd book
    复制代码

启动项目

yarn serve
    复制代码

执行完，我这边没有报错，就说明安装没有问题。

### 2.项目结构 ###

vue已经给我们新建了一个初始的项目结构，但是这个项目结构还不完善。我们需要新建一下几个目录。新建的目录都是新建在src目录下。

*  views 用户存放我们的页面
 *  store 放置vuex程序
 *  api 放置所有的接口程序
 *  utils 放置工具函数（可有可无）
 *  router 放置路由信息
 *  styles 放置全局样式（可有可无）
 *  components 这个已经有了，用来存放我们页面中的组件。我们可以直接把组件新建在components目录下，不过这样不太清晰，我喜欢在components目录下，再为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下
 *  assets 这个也已经有了，用来存放我们的资源文件，视频、音频、图片等。

此时的目录结构如下：

### 3.项目介绍 ###

我们要讲解vue的使用，总的拿个项目练手。我就做一回产品经理，虚拟一个图书管理项目吧。我们有2个页面。分别如下

*  登录页 ，用户输入账号admin和密码admin，就跳转到我们的首页
 *  首页，显示一些图书信息（我为了省事就不显示了）。

这个项目会涉及到那些操作呢：

1.  点击跳转
2.  请求
3.  展示

因此处理，vue提供给我们的组件外，我们还需要手动添加一下这些组件

*  路由组件：vue-router
 *  请求组件：axios mock
 *  ui组件：element-ui sass
 *  表单验证组件：vee-validate
 *  状态：vuex js-cookie

好了现在我们根据我们的需求，一步步开发我们的页面。

### 4. 开发项目 ###

#### 4.1 登录页 ####

1.  在views文件夹下新建Login.vue、Index.vue 。这三个页面的代码大同小异，目前只是基本的代码，稍后还要修改。

<template>
      
      <div>这里是login 页面</div>
      
      <div>这里是index 页面</div>
    </template>
    <style>
    </style>
    <script>
    export default {
      name: 'Login',
      data() {
        return {
    
        }
      },
    }
    </script>
    
    复制代码

1.  修改src目录下的App.vue 文件。删掉\#app文件里的内容，改为<router-view>，这里就是以为显示其他组件的地方。删除script中的内容。修改后的App.vue代码如下：

<template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    <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>
    
    复制代码

### 5.vue-router ###

使用vue开发任何一个项目都涉及都路由，所以我们先讲解路由。这里需要安装的组件是vue-router

D:\test\book>yarn add vue-router
    复制代码

在我们刚刚新建的router文件夹下新建index.js文件，程序如下

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '../views/Login.vue'
    import Index from '../views/Index.vue'
    import Detail from '../views/Detail.vue'
    
    Vue.use(Router)
    const router = new Router({
      routes: [{
        path: '/',
        redirect: '/index'
      }, {
        path: '/login',
        name: 'Login',
        component: Login
      }, {
        path: '/index',
        name: 'Index',
        component: Index
      }, {
        path: '/detail',
        name: 'Detail',
        component: Detail
      }]
    })
    
    export default router
    复制代码

修改main.js，引入我们的路由。在第3行我引入了路由，在new Vue的时候还需要把router加进去了，这样才能正常使用路由。

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')
    复制代码

好了现在我们可以访问我们的页面了，忽略链接上的端口号，vue会根据你电脑端口的使用情况，自动选择一个合适的端口号，所以我的端口号可能跟你的不同。

*  [http://localhost:8081/\#/][http_localhost_8081] index页面，这是因为我在路由里使用redirect重定向
 *  [http://localhost:8081/\#/index][http_localhost_8081_index] 还是index页面
 *  [http://localhost:8081/\#/login][http_localhost_8081_login] login页面

ok 自此我们的路由配置成功。我这边访问页面是没有问题，如果你有问题，你就找下自己的错误在哪里。

### 6.element-ui ###

下面就进入我们的页面开发模式，首先我们要开发的是login页。我们可以使用原生的html开发，但是，效率低下，所以我们还是用vue组件吧。这里我以element-ui为例

安装

D:\test\book>yarn add  element-ui
    复制代码

配置：在main.js中引入element

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    // 引入element-ui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')
    复制代码

修改Login.vue。

把代码修改成下面这样子后，我们的表单就建完了。打开页面。发现我们页面功能是有了，但是太丑了，表单占据了整个页面的宽度，因此我们还要修改下样式。这里我们就要用到sass

<template>
      <div class="login">
        <div class="l-form">
          <div class="l-tip">图书馆管理系统</div>
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Login',
      data() {
        return {
          form: {
            name: '',
            password: ''
          }
        }
      },
      methods: {
        onSubmit() {
    
        },
      },
    }
    </script>
    <style>
    </style>
    
    复制代码

### 7.sass ###

我们可以直接用css的，但是我不推荐这样用，因为原生太丑了。我们要使用css预处理器写css样式。css预处理器有sass和less，当然还有其他的但是我没用过。less我不推荐使用，因为功能不强、像自定义函数功能就没有，写代码特别别扭，我推荐sass。

安装sass

D:\test\book>yarn add node-sass sass-loader
    复制代码

vue-cli3 对sass简直是0配置，上面我们安装好处理器后，直接在style标签上加上`lang="scss"`就可以使用sass了。

修改Login.vue中的style

样式跟我们想要的还有点差别，这是是因为父元素的样式问题引起的，修改App.vue中的style。主要是给html，body还有\#app元素设置了宽和高和边距。

<template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    
    <style lang="scss">
    html,
    body,
    #app{
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    </style>
    
    复制代码

再打开浏览器，看我们的页面，已经很好看了。页面长下面这样。

### 8.normalize.css ###

安装normalize.css 其实这个安不安装都可以，我是有强迫症就安装了。

**安装**

yarn add normalize.css
    复制代码

修改main.js引入normalize.css。

**配置**

import 'normalize.css'
    复制代码

### 9.axios ###

我们在登录页要登录，这就涉及到了发ajax请求，这个我们使用axios

**安装**

D:\test\book>yarn add axios
    复制代码

**使用**

在api文件夹下新建config.js文件，配置一些请求的通用选项，同时还对gei和post请求进一步封装。其实封装不封装都无所谓，我个人感觉封装后会省事一点。代码如下：

import axios from "axios"
    import { Message } from "element-ui"
    
    //  这个baseUrl要根据实际情况进行改变
    axios.defaults.baseURL = "/"
    axios.defaults.headers.common["Content-Type"] =
      "application/json; charset=UTF-8"
    axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"
    
    // 请求拦截器 添加token
    axios.interceptors.request.use(
      config => {
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    // 响应拦截器即异常处理
    axios.interceptors.response.use(
      response => {
        return response
      },
      error => {
        Message({
          message: error.message,
          type: "error",
          duration: 5000,
        })
        return Promise.resolve(error)
      }
    )
    
    export default {
      // get请求
      get(url, param) {
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url,
            params: param,
          })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              Message({
                message: error,
                type: "error",
                duration: 5000,
              })
              reject(error)
            })
        })
      },
      // post请求
      post(url, param) {
        return new Promise((resolve, reject) => {
          axios({
            method: "post",
            url,
            data: param,
          })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              Message({
                message: error,
                type: "error",
                duration: 5000,
              })
              reject(error)
            })
        })
      },
      // all get
      allGet(fnArr) {
        return axios.all(fnArr)
      },
    }
    
    复制代码

在api的文件夹下新建login.js文件。这个函数的作用就是请求后台的login接口。

代码如下:

import service from './config'
    class Login {
      login(params) {
        return service.post('login', params)
      }
    }
    export default new Login()
    复制代码

axios不用特别配置的，引入就可以用。现在问题来了，有了接口了，但是我们没有后台啊。我们没法做登录的功能。不过不用担心，现在的我们的前端已经很强大了。没有后端，我们可以使用mock来模拟后端。

### 10.设置eslint ###

在安装mock前，我们还有一个小问题要解决，就是设置eslint的规则，默认的eslint的规则很严格的，我们在页面甚至不能使用console.log() 这就会给我们的调试带来困难。因此我们要禁用一些eslint规则。

打开package.json，找到`eslintConfig`项，在找到其下的rules。配置`"no-console": "off"`。就可以关闭eslint对console的限制。

"eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {
          "no-console": "off"
        },
        "parserOptions": {
          "parser": "babel-eslint"
        }
      },
    复制代码

好了，现在我们就可以愉快的在vue写console了。

### 11. mock ###

mock是啥呢？mock是一个测试工具。mock会拦截ajax请求并可以按照一定规则返回数据。以前需要后台返回给我们的数据，现在我们可以使用mock返回了。mock的功能很强大，可以模拟出后端的增删改查等功能。非常方便我们前端进行测试.

**安装**

D:\test\book>yarn add mockjs
    复制代码

**使用**

在main.js的同级目录下新建mock.js。我们在mock.js里定义刚刚我们需要的login接口。代码如下：

import Mock from 'mockjs'
    
    Mock.mock('/login', 'post', (options) => {
      // console.log('options:', options)
      let data = JSON.parse(options.body)
      let name = data.name
      let password = data.password
      if (name === 'admin' && password === 'admin') {
        return {
          status: 1,
          message: '登录成功'
        }
      } else {
        return {
          status: 0,
          message: '账号或者密码错误'
        }
      }
    })
    复制代码

这段代码的作用即使拦截login接口请求，当账号和密码是admin的时候，就返回请求成功，否则返回‘账号密码错误’

现在问题来了？我们写好程序了，怎么使用mock呢，其实非常简单，简单到我都不敢相信。我们直接在main.js文件中引入mock.js既可。

**配置**

在main.js中添加如下代码。

// 引入mock
    import './mock.js'
    复制代码

ok，现在再打开我们的login页。输入账号和密码。如果不是admin，则弹窗报错.

如果账号密码正确，则跳转到index页面。

自此大体工作都完成了，接下来，我们继续完成项目（好累）。

### 12.vee-validate ###

我们的登录表单还有个问题，就是怎么加验证。表单不验证，一来不容易发现问题，二来会频繁的骚扰后端。自己写验证也可以，但是每次都要重复写很多代码，键盘都受不了。so，还是用组件吧，我使用的是vee-validate。

**安装**：

yarn add vee-validate
    复制代码

**配置**：

在main.js中引入vee-validate

// 引入表单验证
    import VeeValidate, {
      Validator
    } from 'vee-validate'
    Vue.use(VeeValidate, {
      fieldsBagName: 'vee-fields'
    })
    
    // 汉化表单验证
    import zhCN from 'vee-validate/dist/locale/zh_CN'
    Validator.localize('zh_CN',
      zhCN)
    复制代码

修改login.vue 添加表单验证，以用户名为例，我的要求是用户名不能为空，添加的规则如下：

<el-input
    v-model="form.name"
    v-validate="{required:true}"
    name="name"
    :class="{'is-danger':errors.has('name')}"
    data-vv-as="用户名"
    placeholder="请输入用户名"
    ></el-input>
    复制代码

*  v-validate 里配置的是验证规则
 *  name 是字段名称，这个名称可以自己定
 *  is-danger 是我为报错的字段配置的一个class名，如果erros.has(字段名)不为空，则说明验证没通过，就添加该class。

is-danger 样式如下，把错误表单的边框设置成红色，目的是为了突出显示错误信息。至于为什么加`/deep/`前缀，是因为`el-input`组件是element组件，我们在`style`中设置的样式是局部的，没法应用的到element子组件上，所以需要加上/deep/。需不需要加你自己视情况而定。

/deep/ .is-danger input {
      border-color: #ff3860;
    }
    复制代码

接下来，我们要考虑错误信息怎么显示。我的做法是直接在表单下显示错误信息就可以，缺点是如果错误信息很多，每个输入框都有一个错误信息的话，表单就会变得很高。

因为每个输入框都要显示错误信息，所以我觉得把显示错误信息的功能做成组件比较好，这样可以通用，省了很多重复代码。

在components文件夹下新建common文件夹，再在commen文件夹下新建`FormErrorMessage.vue`组件

代码如下：

<template>
      <div class="help is-danger">
        <slot></slot>
      </div>
    </template>
    <script>
    export default {
      name: 'FormErrorMessage'
    }
    </script>
    <style scoped>
    .help {
      font-size: 0.75rem;
      margin-top: 0.25rem;
      line-height: 0.75rem;
    }
    
    .help.is-danger {
      color: #ff3860;
    }
    </style>
    
    复制代码

在Login.vue中引入

import FormErrorMessage from '../components/common/FormErrorMessage.vue'
    复制代码

在components中配置

name: 'Login',
      components: {
        FormErrorMessage
      },
      data() {
        return {
          form: {
            name: '',
            password: ''
          }
        }
      },
    复制代码

使用

<el-form-item>
        <el-input
          v-model="form.name"
          v-validate="{required:true}"
          name="name"
          :class="{'is-danger':errors.has('name')}"
          data-vv-as="用户名"
          placeholder="请输入用户名"
        ></el-input>
    </el-form-item>
    <el-form-item>
        <FormErrorMessage v-if="errors.has('name')">{
        { errors.first('name') }}</FormErrorMessage>
    </el-form-item>
    复制代码

表单验证添加了，错误显示的组件也添加了，现在只差怎么触发表单验证了。很简单，修改onSubmit函数，代码如下,如果result为true，则说明表单验证通过了，否则就是有错。

onSubmit() {
          this.$validator.validate().then(result => {
            if (result) {
              login.submit(this.form).then(res => {
                // console.log('res:', res);
                if (res.data.status === 1) {
                  // 如果登录成功则跳转我index页面
                  this.$router.push('/index')
                } else {
                  // 使用element-ui的message组件，显示登录报错信息
                  this.$message({
                    message: res.data.message,
                    type: 'error',
                    duration: 5000
                  })
                }
              }).catch(error => {
                this.$message({
                  message: error,
                  type: 'error',
                  duration: 5000
                })
              })
            }
          })
        },
    复制代码

添加错误提示后，表单样式还需要调整下，我就不调了，结果如下：

完整`Login.vue`代码如下:

<template>
      <div class="login">
        <div class="l-form">
          <div class="l-tip">图书馆管理系统</div>
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input
                v-model="form.name"
                v-validate="{required:true}"
                name="name"
                :class="{'is-danger':errors.has('name')}"
                data-vv-as="用户名"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <FormErrorMessage v-if="errors.has('name')">{
        { errors.first('name') }}</FormErrorMessage>
            </el-form-item>
    
            <el-form-item>
              <el-input
                v-model="form.password"
                type="password"
                v-validate="{required:true}"
                name="password"
                :class="{'is-danger':errors.has('password')}"
                data-vv-as="密码"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <FormErrorMessage v-if="errors.has('password')">{
        { errors.first('password') }}</FormErrorMessage>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    import login from '../api/login.js'
    import FormErrorMessage from '../components/common/FormErrorMessage.vue'
    export default {
      name: 'Login',
      components: {
        FormErrorMessage
      },
      data() {
        return {
          form: {
            name: '',
            password: ''
          }
        }
      },
      methods: {
        onSubmit() {
          this.$validator.validate().then(result => {
            if (result) {
              login.submit(this.form).then(res => {
                // console.log('res:', res);
                if (res.data.status === 1) {
                  // 如果登录成功则跳转我index页面
                  this.$router.push('/index')
                } else {
                  // 使用element-ui的message组件，显示登录报错信息
                  this.$message({
                    message: res.data.message,
                    type: 'error',
                    duration: 5000
                  })
                }
              }).catch(error => {
                this.$message({
                  message: error,
                  type: 'error',
                  duration: 5000
                })
              })
            }
          })
        },
      },
    }
    </script>
    <style lang="scss" scoped>
    .login {
      width: 100%;
      height: 100%;
      background: #000;
      .l-form {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 300px;
        margin: auto;
        border-radius: 8px;
        background: #fff;
        padding: 20px;
        .l-tip {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
        }
        .el-form {
          width: 100%;
          margin: auto;
          margin-top: 20px;
          .el-form-item {
            button {
              width: 100%;
            }
          }
        }
      }
    }
    .is-danger input {
      border-color: #ff3860;
    }
    </style>
    
    复制代码

### 13. js-cookie ###

本来接下来该讲vuex了，这里插播一个组件`js-cookie`

地址：[js-cookie][]

**安装**

yarn add js-cookie
    复制代码

至于这个怎么用，我们稍后讲vuex的时候再讲解。

### 14.vuex ###

先在我们终于讲到最后一个知识点vuex了。为什么要用vuex,在本项目里，使用vuex是为了保持网站的登录状态。比如我们index页面要求用户必须登录才能够访问，这里就要用vuex了。vuex实例化后叫store。

地址：[vuex][]

**安装**

D:\test\book>yarn add vuex
    复制代码

在store文件夹下，新建index.js文件

代码如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    // 引入js-cookie
    import Cookies from 'js-cookie'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        name: ''
      },
      mutations: {
        loginIn(state, name) {
          state.name = name
          // 设置过期时间为1天
          Cookies.set('name', name, {
            expires: 1
          })
        },
        loginOut(state) {
          state.name = ''
          Cookies.remove('name')
        }
      }
    })
    export default store
    复制代码

我们定义了一个loginIn方法，调用这个方法，我们就可以把用户的用户名存在store中，同时也存在cookie里，cookie的有效期是1天。

**配置**

修改main.js，把store引入进去main.js中，然后在`new Vue`函数中配置

import store from './store/index.js'
    ……
    new Vue({
      router,
      store,
      render: h => h(App),
    }).$mount('#app')
    复制代码

好啦，这时候我们就可以愉快的使用store了。

修改`Login.vue`的`onSubmit`方法，用户登录成功后，就把用户信息存在store中。

if (res.data.status === 1) {
        // 将用户信息存储在vuex中
        this.$store.commit('loginIn', this.form.name)
        // 如果登录成功则跳转我index页面
        this.$router.push('/index')
    } else {
        ……
    }
    复制代码

修改`Index.vue`页面，我们就可以在这个页面获取登录用户的用户名了。

`Index.vue`代码如下：

<template>
      <div>这里是Index 页面，此时登录的用户是{
        {userName}}</div>
    </template>
    <style>
    </style>
    <script>
    export default {
      name: 'Index',
      data() {
        return {
        }
      },
      computed: {
        userName() {
          return this.$store.state.name
        }
      },
    }
    </script>
    
    复制代码

自此，一个我们常用vue项目基本上配置完成了。当然不同的项目，还有不同的组件需要安装，到时候你们再根据情况确定吧。

最后再讲一个关于路由拦截的问题。

### 15.路由拦截 ###

现在我们的项目已经有登录功能了，但是并没有对用户进行限制。比如我的Index.vue页面要求只有登录用户才能访问。这时该怎么办呢？ 这就要用路由拦截了，凡是没有登录的用户要访问Index.vue的时候，统一让他重定向到Login页面，让其登录。

修改main.js。添加如下代码：

// 设置路由拦截
    router.beforeEach((to, from, next) => {
      let name = Cookies.get('name') || store.state.name
      // 如果cookie没有过期或者store中有name值,则允许访问直接通过。否则就让用户登录
      if (name) {
        store.commit('loginIn', name)
        next()
      } else {
        if (to.path == '/login') {
          next()
        } else {
          next({
            name: 'Login'
          })
          store.commit('loginOut')
        }
      }
    })
    
    router.afterEach(() => {})
    复制代码

ok，现在我们访问Index页面的时候就要求用户必须登录了。

终于，终于关于配置一个vue.3.0项目的所有内容，大概讲完了。在写这篇博客之前，我还一直发愁该怎么讲，这么多内容。没想到一点点讲，终于把自己想讲的都讲完了。

当然我讲的都是简单的使用，入门而已。如果真的做项目还需要对每个组件都深入了解，比如element和mock和vee-validate。你们自己去研究吧。

为了方便查看代码，我把整个项目上传到了githubl了。整个项目的github地址如下：[book][]

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fggwork%2Fnote%2Fblob%2Fmaster%2Fyarn%2F%25E5%25BC%2580%25E5%25A7%258B%25E5%2585%25A5%25E5%259D%2591yarn.md
[http_localhost_8081]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8081%2F%23%2F
[http_localhost_8081_index]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8081%2F%23%2Findex
[http_localhost_8081_login]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8081%2F%23%2Flogin
[js-cookie]: https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fjs-cookie
[vuex]: https://link.juejin.im?target=https%3A%2F%2Fvuex.vuejs.org%2Fzh%2Finstallation.html
[book]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fggwork%2Fbook