如何使用vue-cli 腳手架工具構建
阿新 • • 發佈:2018-12-10
- 安裝 nodejs
先下載nodejs
安裝完成後,開啟cmd,鍵入 node -v 檢視版本號,如果有,安裝就成功了
- 安裝淘寶映象 cnpm
npm install -g --registry=https://registry.npm.taobao.org
- 安裝vue-cli
cnpm install -g vue-cli
- 安裝webpack
cnpm install -g webpack
- 自己建立一個專案
vue init webpack vue_demo
上面的 vue_demo 自己隨意命名,全小寫字母,可以配合下劃線使用,然後預設按enter鍵,一直到建立完成
- 進入專案
cd vue_demo
- 如果版本是 2.0 以前的,需要執行本次操作(安裝依賴)
cnpm install
- 執行專案
cnpm run dev
- 開啟瀏覽器進行訪問
vue專案中可能要使用一些其他的外掛
安裝 axios 外掛
cnpm i axios -S
// 或者
cnpm i --save-dev axios
axios 的使用方法
import Vue from ‘vue’
import axios from ‘axios’
Vue.prototype.$axios = axios
// ajax請求 // 後端請求路徑 let url = 'http://......' let params = new URLSearchParams() params.append('key', val) params.append('key', val) this.$axios.post(url, params).then(resp => { console.log(resp.data) }).catch(err => { console.log(err) })
安裝 vue-axios 外掛
cnpm i --save axios
cnpm i --save vue-axios
vue-axios 的使用
上面的請求引數用的 params ,下面還可以使用vue 本身上的 qs
import Vue from ‘vue’
import axios from ‘axios’
import VueAxios from ‘vue-axios’
import qs from ‘qs’
Vue.use(VueAxios, axios)
Vue.prototype.$qs = qs
// ajax 請求
let url = 'http://......'
this.$http.post(url, this.$qs.stringify({
name: '張三',
age: 20,
sex: '男'
})).then(resp => {
console.log(resp.data)
}).catch(err => {
console.log(err)
})