1. 安装Node.js

安装地址：https://nodejs.org/en/

image.png

image.png

2. Npm换源

npm如果不换源的话下载速度会很慢，我们换成淘宝的源，就和linux换源差不多，直接在cmd里输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后用npm安装时，一律采用命令
cnpm install

3. 安装vue-cli

• 1. 安装vue
     cnpm install vue
• 2. 安装vue-cli脚手架
     cnpm install --global vue-cli

4. 创建前端Vue项目

在任意目录，打开cmd或者powershell，创建webpack模板项目
vue init webpack front
初始化时有很多选择，默认回车就好。

5. 安装依赖包

以上都是vue的安装，从现在开始就不一一讲述vue怎么使用了，不会的可以先看官方文档。
https://cn.vuejs.org/v2/guide/
现在我们要安装前后端分离的必要依赖包。

• 1. axios
     axios是vue官方推荐的前后端互通信息的插件
     在项目目录下，我的是front，打开cmd
     cnpm install axios
• 2. qs
     qs是将表单内容组织成后台能够使用的数据的插件
     cnpm install qs
• 3. element-ui
     element-ui是基于vue开发的一套UI组件，可以很快的开发出一个叫好看的网站。
     cnpm install element-ui
     element-ui官网
     http://element-cn.eleme.io/#/zh-CN/component/installation

6. 引入依赖包

在项目目录下src/main.js中引入依赖包

image.png

import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import Axios from 'axios'
import Qs from 'qs'

Axios.defaults.withCredentials = true
Vue.prototype.qs = Qs
Vue.prototype.$ajax = Axios
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• 1. import App from './App'
     一定要放在
     import 'element-ui/lib/theme-chalk/index.css'
     下，不然自己写的样式会被覆盖。
• 2. Axios.defaults.withCredentials = true
     这句不写有可能后台拒绝post请求

注意

Vue的准备基本完成，
跨域问题和axios使用等Django配置好后，再统一解决。