vue脚手架安装、axios拦截器设置、element-ui、node-sass、sass-loader、echarts、vuex-persist、vantUI安装

安装vue的脚手架

• 创建脚手架的命令

  vue3 create myapp //创建脚手架的名字
  

• 需要安装的依赖有哪些?

  axios element-ui node-sass@4.14.1 sass-loader@7.3.1 echarts vant vuex-persist vuex

  • axios安装和配置信息

    //axios 
    cnpm install axios --save  
    //配置axios的信息
    utils/request.js配置拦截器的
    
    //main.js引入axios拦截器
    import  axios from "@/utils/request.js"
    Vue.prototype.$axios = axios;
    
    

  • element-ui

    cnpm install element-ui --save 
    
    //main.js 配置信息
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    

  • node-sass@4.14.1 sass-loader@7.3.1

    cnpm install node-sass@4.14.1  sass-loader@7.3.1 --save 
    
    //组件内容使用
    <style lang="scss" scoped>
    </style>
    

  • echarts 安装参考官网

    cnpm install echarts --save 
    //main.js
    import * as echarts from "axios"
    Vue.prototype.$echats = echarts;
    

  • vuex-persist 安装

    cnpm install --save vuex-persist
    
    //store.js配置信息
    
    //1.导入插件
    import VuexPersistence from 'vuex-persist'
    //2. 创建对象进行配置
    const vuexLocal = new VuexPersistence({
        storage: window.localStorage,//配置存储介质，默认持久化到本地存储中
    })
    
    //3. 引入插件
    const store = new Vuex.Store({
      state: { ... },
      mutations: { ... },
      actions: { ... },
      plugins: [vuexLocal.plugin],//引入插件
    }) 
    
    

  • vantUI 移动端的组件 https://youzan.github.io/vant/#/zh-CN/image

    cnpm install vant --save   //安装vant组件
    
    //引入vant组件
    import Vant from 'vant';
    import 'vant/lib/index.css';
    
    Vue.use(Vant);