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入口文件里面引入(注意:样式文件也要引入),如下图:
(只需要引入红框中的,不要多事…)
- 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)), ); }, });
结语
以上只是一些简单的配置,仅供参考,有具体业务需求可去对应官网上寻找配置项,或者寻求社区大佬帮助。