vue 搭建框架到安装插件依赖，Element、axios、qs等

一、使用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项目，安装常用插件的方法，就可以开始写项目了，后续会持续更新，有什么不对的地方请指教

转载于:https://www.cnblogs.com/lidonglin/p/11473733.html