Vue安装node.js，npm淘宝镜像，vue-cli， elementUI，axios，markdown - BoofieWoo

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

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

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