vue2 + elementui + axios + less (vuecli5全家桶)

vue2全家桶

最近公司有交流需求，于是网上扒拉扒拉，东拼西凑，整理了一个用脚手架搭建vue2项目的文档，很少写博客，也借此来加强自己的表达能力。

脚手架安装

• npm install -g @vue/cli
• vue -V 命令，若出现下图所示，则说明安装成功
  

创建项目

• vue create 你的项目名称（如下图步骤）
• 选择需要安装的工具（lint为代码校验，谨慎选择，初次搭建者不建议使用，不适用后续可跳过相关操作）
  
• vue版本选择2.x
• 路由模式，这里选择hash模式，也就是路由由#拼接
• css预处理器，此处选择less
• eslint代码检查相关配置
• lint保存的时候检验
• 在何处配置相关信息，选择单独的文件

环境变量设置

• 官方文档
• 根目录下建立不同环境文件.env 开头并配置不同环境变量使用，如下图所示：
  package.json中配置三个不同的环境命令

环境变量定义
使用的时候在项目任何地方使用process.env.定义的环境变量名称（注意：以VUE_APP_开头）

此处建立三个不同环境配置文件，.development、.production、.test

• 安装配置elementui
  • yarn add element-ui -S 或者npm install element-ui -S (此后都是用yarn)
  • 引入 elementui
    • 完整引入
      • main.js入口文件里面引入（注意：样式文件也要引入），如下图：
        （只需要引入红框中的，不要多事…）
    • 按需引入

      • yarn add babel-plugin-component @babel/preset-env -D

      • 配置 babel.config.js

        	module.exports = {
        	  presets: [
        	    '@vue/cli-plugin-babel/preset',
        	    ['@babel/preset-env', { modules: false }],
        	  ],
        	  plugins: [
        	    [
        	      'component',
        	      {
        	        libraryName: 'element-ui',
        	        styleLibraryName: 'theme-chalk',
        	      },
        	    ],
        	  ],
        	};
        	
        

      • main.js入口全局按需引入，此处我封装了一个方法registerElement()在入口处调用：如下图：
        按照文档正常使用便是

      • yarn lint命令，测试代码检测

配置 vuex

• 持久化存储（页面刷新存储数据不重置）
  • yarn add vuex-persistedstate
  • 配置如图：

配置 axios 请求

• yarn add axios
• src 下建立 utils/request/index.js
• 配置 index.js 如下图：
  按需配置

配置 vue.config.js

• yarn add style-resources-loader -D
• 脚手架搭建原来的 config 和 build 文件夹相关 webpack 配置集中到 vue.config.js 配置

  • 官方配置

  • 示例代码如下：

    const { defineConfig } = require('@vue/cli-service');
    const path = require('path');
    
    /**
     * 样式资源转换 less全局变量设置
    * @param {} rule
    */
    function addStyleResource(rule) {
      rule
        .use('style-resource')
        .loader('style-resources-loader')
        .options({
          // 需要引入的公共文件
          patterns: [path.resolve(__dirname, './src/assets/style/index.less')],
        });
    }
    
    module.exports = defineConfig({
      devServer: {
        host: '0.0.0.0',
        port: 8090,
        proxy: {
          // 代理
          '/api': {
            target: 'http://192.168.6.123:8070/',
            ws: true,
            changeOrigin: true,
          },
        },
      },
      css: {
        loaderOptions: {
          less: {},
        },
      },
      transpileDependencies: true, // 转义三方依赖
      chainWebpack: (config) => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach((type) =>
          addStyleResource(config.module.rule('less').oneOf(type)),
        );
      },
    });
    

结语

以上只是一些简单的配置，仅供参考，有具体业务需求可去对应官网上寻找配置项，或者寻求社区大佬帮助。