1. 安装Node.js
image.png
下载哪个都无所谓，但版本不要太低。
安装完成后打开CMD，或者PowerShell，输入
node -v和
npm -v查看是否安装完成
image.png
2. Npm换源
npm如果不换源的话下载速度会很慢，我们换成淘宝的源，就和linux换源差不多，直接在cmd里输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后用npm安装时，一律采用命令
cnpm install
3. 安装vue-cli
- 安装vue
cnpm install vue
- 安装vue
- 安装vue-cli脚手架
cnpm install --global vue-cli
- 安装vue-cli脚手架
4. 创建前端Vue项目
在任意目录，打开cmd或者powershell，创建webpack模板项目
vue init webpack front
初始化时有很多选择，默认回车就好。
5. 安装依赖包
以上都是vue的安装，从现在开始就不一一讲述vue怎么使用了，不会的可以先看官方文档。
https://cn.vuejs.org/v2/guide/
现在我们要安装前后端分离的必要依赖包。
- axios
axios是vue官方推荐的前后端互通信息的插件
在项目目录下，我的是front，打开cmd
cnpm install axios
- axios
- qs
qs是将表单内容组织成后台能够使用的数据的插件
cnpm install qs
- qs
- element-ui
element-ui是基于vue开发的一套UI组件，可以很快的开发出一个叫好看的网站。
cnpm install element-ui
element-ui官网
http://element-cn.eleme.io/#/zh-CN/component/installation
- element-ui
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/>'
})
-
import App from './App'
一定要放在
import 'element-ui/lib/theme-chalk/index.css'
下，不然自己写的样式会被覆盖。
-
-
Axios.defaults.withCredentials = true
这句不写有可能后台拒绝post请求
-
注意
Vue的准备基本完成，
跨域问题和axios使用等Django配置好后，再统一解决。
