如何使用vue-cli 脚手架工具构建

1. 安装 nodejs
   先下载nodejs

http://nodejs.org/en/

安装完成后，打开cmd，键入 node -v 查看版本号，如果有，安装就成功了

2. 安装淘宝镜像 cnpm

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

3. 安装vue-cli

cnpm install -g vue-cli

4. 安装webpack

cnpm install -g webpack

5. 自己创建一个项目

vue init webpack vue_demo

上面的 vue_demo 自己随意命名，全小写字母，可以配合下划线使用，然后默认按enter键，一直到创建完成

6. 进入项目

cd vue_demo

7. 如果版本是 2.0 以前的，需要执行本次操作(安装依赖)

cnpm install

8. 运行项目

cnpm run dev

9. 打开浏览器进行访问

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