一、使用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);
文檔地址:https://youzan.github.io/vant/#/zh-CN/intro
5、安裝 echartsjs
npm install echarts --save
mian.js中引入：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //後續 echarts 如何使用下一篇文章裏面記錄
好了，以上就是 搭建本地環境，創建vue項目，安裝常用插件的方法，就可以開始寫項目了，後續會持續更新，有什麼不對的地方請指教