zoukankan      html  css  js  c++  java
  • 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);
     
    5、安装  echartsjs
    npm install echarts --save
     
    mian.js中引入:
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts   //后续 echarts 如何使用下一篇文章里面记录
     
    好了,以上就是  搭建本地环境,创建vue项目,安装常用插件的方法,就可以开始写项目了,后续会持续更新,有什么不对的地方请指教
  • 相关阅读:
    【crontab】误删crontab及其恢复
    New Concept English there (7)
    New Concept English there (6)
    New Concept English there (5)
    New Concept English there (4)
    New Concept English there (3)
    New Concept English there (2)Typing speed exercise
    New Concept English there (1)Typing speed exercise
    New Concept English Two 34 game over
    New Concept English Two 33 94
  • 原文地址:https://www.cnblogs.com/lidonglin/p/11473733.html
Copyright © 2011-2022 走看看