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