vue2+vant2+rem+axios+钉钉自动登录 h5模板

摘要

请轻轻的点一下这里~Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或
nvm-windows 在同一台电脑中管理多个 Node 版本。

下载代码

请轻轻的点一下这里~

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或
nvm-windows 在同一台电脑中管理多个 Node 版本。

本示例 Node.js 14.17.0

启动项目

npm install  npm run dev 

打包项目

打测试包 会带vconsole控制台

对应配置 .env.staging config/env.staging.js

npm run stage 

打生产包 不会带vconsole控制台

对应配置 .env.production config/env.production.js

npm run build 

配置多环境变量

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

• 通过 npm run dev 启动本地 , 执行 development
• 通过 npm run stage 打包测试 , 执行 staging
• 通过 npm run build 打包正式 , 执行 production

"scripts": {   "serve": "vue-cli-service serve",   "stage": "vue-cli-service build --mode staging",   "build": "vue-cli-service build", } 

配置介绍

  以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
  比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

在项目根目录中新建.env.*

• .env.development 本地开发环境配置

NODE_ENV='development' # must start with VUE_APP_ VUE_APP_ENV = 'development'  

• .env.staging 测试环境配置

NODE_ENV='production' # must start with VUE_APP_ VUE_APP_ENV = 'staging' 

• .env.production 正式环境配置

 NODE_ENV='production' # must start with VUE_APP_ VUE_APP_ENV = 'production' 

这里并没有定义很多变量，只定义了基础的 VUE_APP_ENV development staging production
变量统一在 src/config/env.*.js 里进行管理。

config/index.js

// 根据环境引入不同配置 process.env.NODE_ENV const config = require('./env.' + process.env.VUE_APP_ENV) module.exports = config 

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

// 本地环境配置 module.exports = {   title: 'vue-h5-template',   baseUrl: 'http://localhost:8090', // 项目地址   baseApi: '/api', // 本地api请求地址   APPID: '',   APPSECRET: '' } 

根据环境不同，变量就会不同了

// 根据环境不同引入不同baseApi地址 import {baseApi} from '@/config'  console.log(baseApi) 

rem 适配方案

不用担心，项目已经配置好了 rem 适配, 下面仅做介绍：

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

// https://github.com/michael-ciniawsky/postcss-load-config module.exports = {   plugins: {     autoprefixer: {       overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']     },     'postcss-pxtorem': {       rootValue: 37.5,       propList: ['*']     }   } } 

VantUI 组件按需加载

使用组件

项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用

// 按需全局引入 vant组件 import Vue from 'vue' import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'  Vue.use(Button) Vue.use(Cell) Vue.use(List) Vue.use(Tabbar).use(TabbarItem) 

目录结构

所有全局样式都在 @/src/assets/css 目录下设置

├── assets │   ├── css │   │   ├── index.scss               # 全局通用样式 │   │   ├── mixin.scss               # 全局mixin │   │   └── variables.scss           # 全局变量 

Vue-router

采用 hash 模式，根据需求修改 mode base

注意：如果使用 history 模式，vue.config.js 中的 publicPath 要做对应的修改

前往:vue.config.js 基础配置

import Vue from 'vue' import Router from 'vue-router'  Vue.use(Router) export const router = [   {     path: '/',     name: 'index',     component: () => import('@/views/home/index'), // 路由懒加载     meta: {       title: '首页', // 页面标题       keepAlive: false // keep-alive 标识     }   } ] const createRouter = () =>   new Router({     // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath     // base: '/app/',     scrollBehavior: () => ({y: 0}),     routes: router   })  export default createRouter() 

Axios 封装及接口管理

utils/request.js

接口管理

在src/api 文件夹下统一管理接口

• 你可以建立多个模块对接接口, 比如 work.js 里是首页的接口这里讲解 user.js
• method 请求方法
• hideloading 默认 false,设置为 true 后，不显示 loading ui 交互中有些接口不需要让用户感知

import qs from 'qs' // axios import request from '@/utils/request' //user api  // 用户信息 export function getUserInfo(params) {   return request({     url: '/user/userinfo',     method: 'post',     data: params,     hideloading: true // 隐藏 loading 组件   }) } 

如何调用

// 请求接口 import {getUserInfo} from '@/api/user.js'  const params = {user: 'sunnie'} getUserInfo(params)   .then(() => {   })   .catch(() => {   }) 

Webpack 4 vue.config.js 基础配置

如果你的 Vue Router 模式是 hash

publicPath: './' 

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一直

publicPath: '/app/' 

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)  module.exports = {   publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用   //  publicPath: '/app/', // 署应用包时的基本 URL。  vue-router history模式使用   outputDir: 'dist', //  生产环境构建文件的目录   assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录   lintOnSave: !IS_PROD,   productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。   devServer: {     port: 8090, // 端口号     open: true, // 启动后打开浏览器     overlay: {       //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层       warnings: false,       errors: true     }     // ...   } } 

配置 alias 别名

const path = require('path') const resolve = dir => path.join(__dirname, dir) const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)  module.exports = {   chainWebpack: config => {     // 添加别名     config.resolve.alias       .set('@', resolve('src'))       .set('assets', resolve('src/assets'))       .set('api', resolve('src/api'))       .set('views', resolve('src/views'))       .set('components', resolve('src/components'))   } } 

配置 proxy 跨域

如果你的项目需要跨域设置，你需要打来 vue.config.js proxy 注释 并且配置相应参数

!!!注意：你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'

module.exports = {   devServer: {     // ....     proxy: {       //配置跨域       '/api': {         target: `http://xxxx.com/api`,         changeOrigin: true,         ws: false,         pathRewrite: {           '^/api': '/'         }       }     }   } } 

去掉 console.log

保留了测试环境和本地环境的 console.log

npm i -D babel-plugin-transform-remove-console 

在 babel.config.js 中配置

// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV) const plugins = [   [     'import',     {       libraryName: 'vant',       libraryDirectory: 'es',       style: true     },     'vant'   ] ] // 去除 console.log if (IS_PROD) {   plugins.push('transform-remove-console') }  module.exports = {   presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],   plugins } 

Eslint + Pettier 统一开发规范

VScode （版本 1.47.3）安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化，其他使用prettier,后面会
专门写个如何使用配合使用这三个玩意

在文件 .prettierrc 里写 属于你的 pettier 规则

{   "printWidth": 120,   "tabWidth": 2,   "singleQuote": true,   "trailingComma": "none",   "semi": false,   "wrap_line_length": 120,   "wrap_attributes": "auto",   "proseWrap": "always",   "arrowParens": "avoid",   "bracketSpacing": true,   "jsxBracketSameLine": true,   "useTabs": false,   "eslintIntegration":true,   "overrides": [     {       "files": ".prettierrc",       "options": {         "parser": "json"       }     }   ],   "endOfLine": "auto" }