一、使用vue 单页面开发，首先要安装好本地环境
步骤如下：
1 下载nodejs 安装 (此时npm 和 node环境都已经装好)
2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
3 全局安装npm npm install -g vue-cli
4 新建项目 vue init webpack <your project>
5 进入项目 cd <your project>
6 通过npm安装依赖 npm install
7 启动项目 npm run dev
8 打包项目 npm run build
以上就配置好了本地环境 ，并且已经成功的创建了一个vue项目
二、安装常用插件 Element、axios、qs、Vant、echartsjs
1、安装 Element
npm i element-ui -S
main.js引入：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 即可直接使用文档
文档地址：https://element.eleme.cn/#/zh-CN/component/installation
2、安装 axios
npm install axios -S
main.js引入：
import axios from 'axios';
axios.defaults.baseURL = "http://www.zhk.com.ngrok2.xx.cn/" // 接口地址前缀
Vue.prototype.$http = axios; //全局注册，使用方法为:this.$http
例如:
1、queryList() { //使用get传值
this.$http
.get("sales/selSalesAnalysisResult", {
params: {
startTime: this.startTime,
repType: this.repType
}
})
.then(response => {
console.log(response);
}
})
.catch(res => {
console.error("请求失败", res);
});
}
2、queryList() { //使用post传值
let data = {
startTime: this.startTime,
repType: this.repType
} this.$http
.post("sales/selSalesAnalysisResult", this.$qs.stringify(data)) //首先需要安装qs
.then(response => {
console.log(response);
}
})
.catch(res => {
console.error("请求失败", res);
});
}
3、安装 qs
npm install qs -S
mian.js引入：
import qs from 'qs';
Vue.prototype.$qs = qs //即可直接使用 this.$qs
4、安装 Vant
npm i vant -S
main.js 引入
import Vant from 'vant'; //vant组件
import 'vant/lib/index.css'
Vue.use(Vant);
5、安装 echartsjs
npm install echarts --save
mian.js中引入：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //后续 echarts 如何使用下一篇文章里面记录
好了，以上就是 搭建本地环境，创建vue项目，安装常用插件的方法，就可以开始写项目了，后续会持续更新，有什么不对的地方请指教