1. 安裝Node.js
image.png
下載哪個(gè)都無所謂稳诚，但版本不要太低。
安裝完成后打開CMD盾饮，或者PowerShell采桃，輸入
node -v和
npm -v查看是否安裝完成
image.png
2. Npm換源
npm如果不換源的話下載速度會(huì)很慢懒熙，我們換成淘寶的源丘损，就和linux換源差不多普办，直接在cmd里輸入
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后用npm安裝時(shí)，一律采用命令
cnpm install
3. 安裝vue-cli
- 安裝vue
cnpm install vue
- 安裝vue
- 安裝vue-cli腳手架
cnpm install --global vue-cli
- 安裝vue-cli腳手架
4. 創(chuàng)建前端Vue項(xiàng)目
在任意目錄徘钥，打開cmd或者powershell衔蹲，創(chuàng)建webpack模板項(xiàng)目
vue init webpack front
初始化時(shí)有很多選擇，默認(rèn)回車就好呈础。
5. 安裝依賴包
以上都是vue的安裝舆驶，從現(xiàn)在開始就不一一講述vue怎么使用了，不會(huì)的可以先看官方文檔而钞。
https://cn.vuejs.org/v2/guide/
現(xiàn)在我們要安裝前后端分離的必要依賴包沙廉。
- axios
axios是vue官方推薦的前后端互通信息的插件
在項(xiàng)目目錄下，我的是front臼节，打開cmd
cnpm install axios
- axios
- qs
qs是將表單內(nèi)容組織成后臺(tái)能夠使用的數(shù)據(jù)的插件
cnpm install qs
- qs
- element-ui
element-ui是基于vue開發(fā)的一套UI組件撬陵，可以很快的開發(fā)出一個(gè)叫好看的網(wǎng)站。
cnpm install element-ui
element-ui官網(wǎng)
http://element-cn.eleme.io/#/zh-CN/component/installation
- element-ui
6. 引入依賴包
在項(xiàng)目目錄下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'
下网缝，不然自己寫的樣式會(huì)被覆蓋巨税。
-
-
Axios.defaults.withCredentials = true
這句不寫有可能后臺(tái)拒絕post請(qǐng)求
-
注意
Vue的準(zhǔn)備基本完成，
跨域問題和axios使用等Django配置好后粉臊，再統(tǒng)一解決草添。
