1. 程式人生 > >如何使用vue-cli 腳手架工具構建

如何使用vue-cli 腳手架工具構建

  1. 安裝 nodejs
    先下載nodejs

http://nodejs.org/en/

安裝完成後,開啟cmd,鍵入 node -v 檢視版本號,如果有,安裝就成功了
在這裡插入圖片描述

  1. 安裝淘寶映象 cnpm

npm install -g --registry=https://registry.npm.taobao.org

  1. 安裝vue-cli

cnpm install -g vue-cli

  1. 安裝webpack

cnpm install -g webpack

  1. 自己建立一個專案

vue init webpack vue_demo

上面的 vue_demo 自己隨意命名,全小寫字母,可以配合下劃線使用,然後預設按enter鍵,一直到建立完成

  1. 進入專案

cd vue_demo

  1. 如果版本是 2.0 以前的,需要執行本次操作(安裝依賴)

cnpm install

  1. 執行專案

cnpm run dev

  1. 開啟瀏覽器進行訪問

http://localhost:8080

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)
})