vue随笔

vue环境准备

下载node.js

node.js官网(https://nodejs.org/zh-cn/)，下载长期稳定版本就可以了

下载vue环境

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli
# 以上做完后就可以通过vue的可视化界面进行创建vue项目了
# 在终端输入 vue ui就可以进入vue可视化界面

安装element-ui(美化页面)

引入element-ui组件（https://element.eleme.cn）

# 切换到项目根目录 (假如项目的根目录是byvue)（根目录就是和src同级的目录）
cd byvue
# 安装element-ui
cnpm install element-ui --save

然后我们打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)

以上做完后就可以在（https://element.eleme.cn）中使用element-ui相关内容了。

安装axios(用来请求后端接口)

安装命令
```
cnpm install axios --save
```

然后同样我们在main.js中全局引入axios。

import axios from 'axios'
Vue.prototype.$axios = axios

以上做完后便可以通过this.$axios.get()在进行axios请求了

定义全局axios拦截器

作用

我们项目中需要去请求后端接口，在Windows下，我们后端地址一般是http://localhost开头，如果我们把项目部署到服务器后，那么我们在请求后端接口就需要通过服务器域名来访问后端接口了（不能用localhost了），这时候，我们前端再去访问后端接口，差不多要改变全部的请求地址，此时我们可以创建axios的配置文件，等后端项目部署到服务器后，前端只需要修改这个配置，就能轻松访问到后端接口了。
设置axios的前置拦截和后置拦截

当我们去访问后端接口时，可能会出现一些问题：比如用户名密码错误、请求超时等等，都是由后端响应给前端的错误，我们可以把这些错误统一展示出来，方便用户知道是什么问题。

在src目录下创建一个文件axios.js（与main.js同级），定义axios的拦截：

import axios from 'axios'
import Element from "element-ui";
import store from "./store";
import router from "./router";

//设置axios在请求时的前缀
axios.defaults.baseURL='http://localhost:8081'

//前置拦截
axios.interceptors.request.use(config => {
  // 可以统一设置请求头
  return config
})
//后置拦截
axios.interceptors.response.use(response => {
    //res: 访问后端接口后，服务器返回的参数
    const res = response.data;
    // 当结果的code是否为200的情况
    if (res.code === 200) {
      return response
    } else {
      // 弹窗异常信息
      Element.Message({
        message: response.data.msg,
        type: 'error',
        duration: 2 * 1000
      })
      // 直接拒绝往下面返回结果信息
      return Promise.reject(response.data.msg)
    }
  },
  error => {
    console.log('err' + error)// for debug
    if(error.response.data) {
      error.message = error.response.data.msg
    }
    // 根据请求状态觉得是否登录或者提示其他
    if (error.response.status === 401) {
      store.commit('REMOVE_INFO');
      router.push({
        path: '/login'
      });
      error.message = '请重新登录';
    }
    if (error.response.status === 403) {
      error.message = '权限不足，无法访问';
    }
    Element.Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  })

然后再main.js中导入axios.js
```
import './axios.js' // 请求拦截
```

安装mavon-editor(支持markdown的编辑器)

基于Vue的markdown编辑器mavon-editor

cnpm install mavon-editor --save

然后在main.js中全局注册：

// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

使用

在vue界面中输入

<mavon-editor v-model="editForm.content"/>

当我们通过markdown的格式将数据存入数据库，那么我们在展示出来时，要进行渲染，然后才能展现出来。这里我们使用一个插件markdown-it，用于解析md文档，然后导入github-markdown-c，所谓md的样式。

方法如下：
```
# 用于解析md文档
cnpm install markdown-it --save
# md样式
cnpm install github-markdown-css
```
然后就可以在需要渲染的地方使用：

在要渲染的界面引入：import 'github-markdown-css/github-markdown.css'