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

下载代码

请轻轻的点一下这里~

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 文件夹下统一管理接口

• 你可以建立多个模块对接接口, 比如 affair.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"
}

本栏目推荐文章
• 类模板实现简单的数组
• 类模板和友元
• 类模板分文件编写
• vue-quill编辑器vue2版
• [cpp]: 以模板作为模板参数 -- <template>
• Jenkins邮件模板
• 【opencv学习笔记】028之模板匹配——matchTemplate函数详解
• Templates Generics 模板 范型
• axios中使用qs.stringify格式化get请求参数
• vue模板的首次渲染，和重新渲染，有哪些区别？

模板 vant2 axios vue2 vant模板vant2 axios vue2 智慧 商城vant2 vue2 vant2 axios vue2 vue 语法 源码 模板vue2 语法 模板vue2 vue 写法 差异 模板vue2 vue模板vscode vue2 vant vant3