------------恢复内容开始------------

vue 项目总结

一、初始化项目

1. 环境搭建

安装node.js开发环境，Node.js官网：

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号

node -v
安装淘宝npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装全局vue-cli脚手架

安装vue-cli最新版（版本号必须3x以上）才能使用vue ui,npm来安装:

npm i -g @vue/cli

测试是成功：

vue -h

2.1初始化项目

新建文件夹存储项目，在文件资源管理器搜索框输入cmd进入命令行，执行如下命令：

vue ui

在浏览器完成初始化。

2. 2初始化项目

新建文件夹存储项目，在文件资源管理器搜索框输入cmd进入命令行，执行如下命令：

vue init webpack 项目名称

运行初始化项目，命令行输入npm run dev，安装完毕module后，出现默认访问地址：

http://localhost:8080

npm run dev

3. 安装 elementUI组件

ctrl+c 终止项目运行，命令行输入以下命令安装elementUI：

（-S等价于--save）

npm i element-ui -S -y

注意：安装过程中出现如果有bug，可以尝试删除项目中的 package-lock.json 文件 和 node_modules 文件夹，然后再尝试 npm install.

成功安装elementUI后打开main.js,加入element-ui的js和css依赖：

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

4. 安装 axios组件

ctrl+c 终止项目运行，命令行输入以下命令安装axios：

npm install axios -S

在项目中新建api/index.js文件，用以配置axios

import axios from 'axios';
​
let http = axios.create({
  baseURL: 'http://localhost:8080/',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  },
  transformRequest: [function (data) {
    let newData = '';
    for (let k in data) {
      if (data.hasOwnProperty(k) === true) {
        newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
      }
    }
    return newData;
  }]
});
​
function apiAxios(method, url, params, response) {
  http({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
  }).then(function (res) {
    response(res);
  }).catch(function (err) {
    response(err);
  })
}
​
export default {
  get: function (url, params, response) {
    return apiAxios('GET', url, params, response)
  },
  post: function (url, params, response) {
    return apiAxios('POST', url, params, response)
  },
  put: function (url, params, response) {
    return apiAxios('PUT', url, params, response)
  },
  delete: function (url, params, response) {
    return apiAxios('DELETE', url, params, response)
  }
}
​

这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式,同时配置了跨域，不需要的话将withCredentials设置为false即可,这里设置了默认头部地址为：http://localhost:8080/，这样调用的时候只需写访问方法即可。

成功安装axios后打开main.js,加入axios依赖：

import axios from './api/index.js';
Vue.prototype.$axios = axios;

注意：PUT请求默认会发送两次请求，第一次预检请求不含参数，所以后端不能对PUT请求地址做参数限制

5. markdown 插件

在项目根目录运行以下指令：

$ npm install mavon-editor --save

在项目入口文件main.js 引入 mavon-editor：

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

在需要的页面中使用

<template>
  <div id="main">
      <mavon-editor v-model="value"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: ''
    }
  }
}
</script>

6. markdown 解析插件

cnpm install markdown-it-vue --save
cnpm install github-markdown-css



------------恢复内容结束------------