项目开发常用以及问题 ​

开启 gzip 压缩 ​

1. 安装：npm install compression-webpack-plugin -D

2. 配置 vue.config.js

   js

   module.export = {
     configureWebpack: (config) => {
       if (process.env.NODE_ENV === 'production') {
         return {
           plugins: [
             new CompressionPlugin({
               test: /\.js$|\.html$|\.css/, // 匹配文件名
               threshold: 10240, // 对超过10k的数据进行压缩
               deleteOriginalAssets: false, // 是否删除原文件
             }),
           ],
         }
       }
     },
   }

   module.export = {
     configureWebpack: (config) => {
       if (process.env.NODE_ENV === 'production') {
         return {
           plugins: [
             new CompressionPlugin({
               test: /\.js$|\.html$|\.css/, // 匹配文件名
               threshold: 10240, // 对超过10k的数据进行压缩
               deleteOriginalAssets: false, // 是否删除原文件
             }),
           ],
         }
       }
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   

   要使服务器返回.gz 文件，还需要对服务器进行配置，根据 Request Headers 的 Accept-Encoding 标签进行鉴别，如果支持 gzip 就返回.gz 文件。

3. 需要 nginx 配置，其实也可以不用配置，宝塔面板的 nginx 默认就已经配置好了

   bash

       #开启和关闭gzip模式
       gzip on;
       #gizp压缩起点，文件大于1k才进行压缩
       gzip_min_length 1k;
       # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
       gzip_comp_level 6;
       # 进行压缩的文件类型。
       gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
       #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
       gzip_static on
       # 是否在http header中添加Vary: Accept-Encoding，建议开启
       gzip_vary on;
       # 设置gzip压缩针对的HTTP协议版本
       gzip_http_version 1.1;

       #开启和关闭gzip模式
       gzip on;
       #gizp压缩起点，文件大于1k才进行压缩
       gzip_min_length 1k;
       # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
       gzip_comp_level 6;
       # 进行压缩的文件类型。
       gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
       #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
       gzip_static on
       # 是否在http header中添加Vary: Accept-Encoding，建议开启
       gzip_vary on;
       # 设置gzip压缩针对的HTTP协议版本
       gzip_http_version 1.1;

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   

封装 Vuex ​

1. 创建目录结构：

   store
    --modules
       --login.js
    --index.js
    --types.js

   store
    --modules
       --login.js
    --index.js
    --types.js

   1
   2
   3
   4
   5
   

2. 在 store/index.js 写入

   js

   import Vue from 'vue'
   import Vuex from 'Vuex'
   Vue.use(Vuex)
   let modules = {}
   let context = require.context('./modules', false, /\.js$/)
   context.keys().forEach((item) => {
     let name = /\.\/(.*?)\.js$/.exec(item)[0]
     modules[name] = context(item).default
   })
   export default new Vuex.Store({
     modules,
   })

   import Vue from 'vue'
   import Vuex from 'Vuex'
   Vue.use(Vuex)
   let modules = {}
   let context = require.context('./modules', false, /\.js$/)
   context.keys().forEach((item) => {
     let name = /\.\/(.*?)\.js$/.exec(item)[0]
     modules[name] = context(item).default
   })
   export default new Vuex.Store({
     modules,
   })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

3. 配置好第二步之后就可以直接在 modules 里面创建单文件 js 了，不能再创建文件夹，因为不能找到里面的 js 文件，不能在自动引入了

4. modules 里面的单文件 js 配置结构，和普通配置是一样的

   js

   import * as types from '../types'
   const state = {}
   const mutations = {}
   const actions = {}
   const getters = {}
   export default {
     state,
     mutations,
     actions,
     getters,
   }

   import * as types from '../types'
   const state = {}
   const mutations = {}
   const actions = {}
   const getters = {}
   export default {
     state,
     mutations,
     actions,
     getters,
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

Vuex 数据持久化 ​

1. 安装：npm i vuex-persistedstate

2. 修改 store

   js

   import createPersistedState from 'vuex-persistedstate'
   const persistedStateOpt = {
     storage: window.localStorage,
   }
   const store = new Vuex.Store({
     // ...
     plugins: [createPersistedState(persistedStateOpt)],
   })

   import createPersistedState from 'vuex-persistedstate'
   const persistedStateOpt = {
     storage: window.localStorage,
   }
   const store = new Vuex.Store({
     // ...
     plugins: [createPersistedState(persistedStateOpt)],
   })

   1
   2
   3
   4
   5
   6
   7
   8
   

配置 vue.config.js ​

let path = require('path')
const resolve = (dir) => path.join(__dirname, dir) // 设置绝对路径;
const env = process.env.NODE_ENV

module.exports = {
  publicPath: '/', // 部署路径 以当前目录
  outputDir: 'dist', // 输出文件目录(默认值dist)
  lintOnSave: 'warning', // eslint是否在保存的时候检查, eslint出错不会导致编译失败
  chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias
      .set('components', resolve('@/components'))
      .set('assets', resolve('@/assets'))
      .set('api', resolve('@/api'))
  },
  configureWebpack: (config) => {
    config.devtool = '#eval-source-map' // 开启debugger调试
    if (env === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      // 生产环境关闭console
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      // 配置gzip压缩
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
          }),
        ],
      }
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
  },
  productionSourceMap: false, // 生产环境是否生成sourceMap 文件,false提高构建速度
  devServer: {
    host: '0.0.0.0', // 允许外部ip访问
    port: 8022, // 端口
    overlay: {
      warnings: true,
      errors: true,
    },
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, //允许websockets跨域
        pathRewrite: { '^/api': '' },
      },
    },
  },
  // 第三方插件配置
  pluginOptions: {},
}

let path = require('path')
const resolve = (dir) => path.join(__dirname, dir) // 设置绝对路径;
const env = process.env.NODE_ENV

module.exports = {
  publicPath: '/', // 部署路径 以当前目录
  outputDir: 'dist', // 输出文件目录(默认值dist)
  lintOnSave: 'warning', // eslint是否在保存的时候检查, eslint出错不会导致编译失败
  chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias
      .set('components', resolve('@/components'))
      .set('assets', resolve('@/assets'))
      .set('api', resolve('@/api'))
  },
  configureWebpack: (config) => {
    config.devtool = '#eval-source-map' // 开启debugger调试
    if (env === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      // 生产环境关闭console
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      // 配置gzip压缩
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
          }),
        ],
      }
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
  },
  productionSourceMap: false, // 生产环境是否生成sourceMap 文件,false提高构建速度
  devServer: {
    host: '0.0.0.0', // 允许外部ip访问
    port: 8022, // 端口
    overlay: {
      warnings: true,
      errors: true,
    },
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, //允许websockets跨域
        pathRewrite: { '^/api': '' },
      },
    },
  },
  // 第三方插件配置
  pluginOptions: {},
}

sourceMap 介绍

• 是一个.map 的文件，里面储存着位置信息，这个文件里保存的是转换后代码的位置，和对应的转换前的位置，有了它，出错的时候通过断点工具可以直接显示原始代码，而不是转换后的代码；

• 每个 js 文件对应一个.map 文件，里面的基本信息如下

  json

  {
    "version": 3, //SourceMap的版本，目前为3
    "sources": ["foo.js", "bar.js"], //转换前的文件，该项是一个数组，表示可能存在多个文件合并
    "names": ["src", "maps", "are", "fun"], //转换前的所有变量名和属性名
    "mappings": "AACvB,gBAAgB,EAAE;AAClB;", //记录位置信息的字符串
    "file": "out.js", //转换后的文件名
    "sourcesContent": " \t// The module cache\n", //转换后的代码
    "sourceRoot": "" //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
  }

  {
    "version": 3, //SourceMap的版本，目前为3
    "sources": ["foo.js", "bar.js"], //转换前的文件，该项是一个数组，表示可能存在多个文件合并
    "names": ["src", "maps", "are", "fun"], //转换前的所有变量名和属性名
    "mappings": "AACvB,gBAAgB,EAAE;AAClB;", //记录位置信息的字符串
    "file": "out.js", //转换后的文件名
    "sourcesContent": " \t// The module cache\n", //转换后的代码
    "sourceRoot": "" //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

配置请求拦截器 ​

1. 创建 src/api/index

   js

   import axios from 'axios'
   import Vue from 'vue'
   import { Loading, Message } from 'element-ui' // 请求loading可以自已更换
   
   // 新建一个实例, 避免全局axios被污染;
   // 如果这里不是create创建的axios, 当axios被添加一次路由拦截器之后, 项目任意地方再次引入axios, 会同样使用该拦截器;
   const service = axios.create({
     timeout: 10000, // 超时
     withCredentials: true, // 允许cookie跨域
     baseURL: '', // 配置请求host
   })
   
   let loading = null
   // 配置请求
   service.interceptors.request.use(
     (config) => {
       loading = Loading.service({ text: '正在加载中....' })
       config.headers.Authorization = localStorage['token'] // 给请求添加token
       return config
     },
     (error) => Promise.reject(error),
   )
   // 配置响应
   service.interceptors.response.use(
     (response) => {
       if (loading) loading.close()
       // ... 在这里处理统一code问题
       return response.data
     },
     (error) => {
       if (loading) loading.close()
       if (!error.response) {
         if (error.message.includes('timeout')) {
           Message.error('请求超时, 请检查网络是否连接正常')
         } else {
           Message.error('请求失败,请检查网络是否已连接')
         }
         return
       }
       return Promise.reject(error)
     },
   )
   
   // 切换页面时候,取消上个页面的请求的方法，需要则打开
   // Vue.$httpRequestList = []
   // const cancelToken = () => {
   //   return new axios.CancelToken(cancel => {
   //     // cancel就是取消请求的方法
   //     Vue.$httpRequestList.push({
   //       cancel
   //     })
   //   })
   // }
   
   export const getData = (url, data = {}, method = 'get', headers) => {
     let config = {
       url,
       method: method.toLowerCase(),
       // cancelToken: cancelToken(),
       headers,
     }
     if (method.toLowerCase() === 'get' || method === 'delete') {
       // 处理get请求防止IE缓存
       if (!!window.ActiveXObject || 'ActiveXObject' in window) {
         data.t = new Date().getTime()
       }
       // 处理get请求的传参方式, get参数需要放在params下
       config.params = data
     } else {
       config.data = data
     }
     return service(config)
   }

   import axios from 'axios'
   import Vue from 'vue'
   import { Loading, Message } from 'element-ui' // 请求loading可以自已更换
   
   // 新建一个实例, 避免全局axios被污染;
   // 如果这里不是create创建的axios, 当axios被添加一次路由拦截器之后, 项目任意地方再次引入axios, 会同样使用该拦截器;
   const service = axios.create({
     timeout: 10000, // 超时
     withCredentials: true, // 允许cookie跨域
     baseURL: '', // 配置请求host
   })
   
   let loading = null
   // 配置请求
   service.interceptors.request.use(
     (config) => {
       loading = Loading.service({ text: '正在加载中....' })
       config.headers.Authorization = localStorage['token'] // 给请求添加token
       return config
     },
     (error) => Promise.reject(error),
   )
   // 配置响应
   service.interceptors.response.use(
     (response) => {
       if (loading) loading.close()
       // ... 在这里处理统一code问题
       return response.data
     },
     (error) => {
       if (loading) loading.close()
       if (!error.response) {
         if (error.message.includes('timeout')) {
           Message.error('请求超时, 请检查网络是否连接正常')
         } else {
           Message.error('请求失败,请检查网络是否已连接')
         }
         return
       }
       return Promise.reject(error)
     },
   )
   
   // 切换页面时候,取消上个页面的请求的方法，需要则打开
   // Vue.$httpRequestList = []
   // const cancelToken = () => {
   //   return new axios.CancelToken(cancel => {
   //     // cancel就是取消请求的方法
   //     Vue.$httpRequestList.push({
   //       cancel
   //     })
   //   })
   // }
   
   export const getData = (url, data = {}, method = 'get', headers) => {
     let config = {
       url,
       method: method.toLowerCase(),
       // cancelToken: cancelToken(),
       headers,
     }
     if (method.toLowerCase() === 'get' || method === 'delete') {
       // 处理get请求防止IE缓存
       if (!!window.ActiveXObject || 'ActiveXObject' in window) {
         data.t = new Date().getTime()
       }
       // 处理get请求的传参方式, get参数需要放在params下
       config.params = data
     } else {
       config.data = data
     }
     return service(config)
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   

2. 调接口方法，在 api 创建一个 js 文件，针对某个页面创建，如 login.js

   js

   import { getData } from './index'
   export const login = (data) => getData('/auth/login', data, 'post')

   import { getData } from './index'
   export const login = (data) => getData('/auth/login', data, 'post')

   1
   2
   

3. 如果需要配置取消拦截器：在路由文件里面处理接口请求

   js

   // 路由切换检测是否强行中断
   router.beforeEach((to, from, next) => {
     if (Vue.$httpRequestList && Vue.$httpRequestList.length > 0) {
       Vue.$httpRequestList.forEach((request) => {
         // 取消没有响应的请求
         request.cancel()
       })
       // 请求取消响应的数据
       Vue.$httpRequestList = []
     }
   })

   // 路由切换检测是否强行中断
   router.beforeEach((to, from, next) => {
     if (Vue.$httpRequestList && Vue.$httpRequestList.length > 0) {
       Vue.$httpRequestList.forEach((request) => {
         // 取消没有响应的请求
         request.cancel()
       })
       // 请求取消响应的数据
       Vue.$httpRequestList = []
     }
   })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

4. 在组件里面引入该请求的方法，直接调用传入参数即可

   js

   import { login } from 'api/login'
   export default {
     name: 'login',
     method: {
       async submit() {
         let res = await login()
         if (res && res.data) {
           // 处理成功之后的方法
         }
       },
     },
   }

   import { login } from 'api/login'
   export default {
     name: 'login',
     method: {
       async submit() {
         let res = await login()
         if (res && res.data) {
           // 处理成功之后的方法
         }
       },
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

环境配置 ​

1. 创建 config/index.js

   js

   // 填写对应的网址
   const globals = {
     mock: 'test',
     host: {
       test: 'https://test.wing.vip',
       pre: 'https://pre.wing.vip',
       prod: 'https://prod.wing.vip',
       uat: 'https://uat.wing.vip',
     },
     // 在下面也可以写其他的全局配置
   }
   export default globals

   // 填写对应的网址
   const globals = {
     mock: 'test',
     host: {
       test: 'https://test.wing.vip',
       pre: 'https://pre.wing.vip',
       prod: 'https://prod.wing.vip',
       uat: 'https://uat.wing.vip',
     },
     // 在下面也可以写其他的全局配置
   }
   export default globals

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

2. 创建 utils/common.js，里面放公共的方法

   js

   import Cookies from 'js-cookie' // 用于存token的cookie
   import { globals } from '../globals'
   /**
    *    根据页面url, 返回对应的运行环境
    */
   export const getCurrentEnv = function () {
     let { hostname } = window.location
     if (
       hostname.includes('localhost') ||
       hostname.includes('10.105') ||
       hostname.includes('192.168')
     ) {
       return globals.mock
     }
   }
   export const getHost = function () {
     return globals.host[getCurrentEnv()]
   }

   import Cookies from 'js-cookie' // 用于存token的cookie
   import { globals } from '../globals'
   /**
    *    根据页面url, 返回对应的运行环境
    */
   export const getCurrentEnv = function () {
     let { hostname } = window.location
     if (
       hostname.includes('localhost') ||
       hostname.includes('10.105') ||
       hostname.includes('192.168')
     ) {
       return globals.mock
     }
   }
   export const getHost = function () {
     return globals.host[getCurrentEnv()]
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

3. 在配置拦截路由里面引入 common.js

   js

   import { getHost } from 'utils/common'
   axios.defaults.baseURL = getHost()

   import { getHost } from 'utils/common'
   axios.defaults.baseURL = getHost()

   1
   2
   

创建全局的 scss 变量 ​

配置 vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 根据自己的路径设置
        prependData: `@import "@/styles/variable.scss";`,
      },
    },
  },
}

// 如果上面的不行，将scss换成sass
sass: {
  data: `@import "@/styles/variable.scss";`
}

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 根据自己的路径设置
        prependData: `@import "@/styles/variable.scss";`,
      },
    },
  },
}

// 如果上面的不行，将scss换成sass
sass: {
  data: `@import "@/styles/variable.scss";`
}

路由懒加载 ​

使用 import 可以懒加载

path: '/home',
name: 'home',
component: () => import('src/views/home')

path: '/home',
name: 'home',
component: () => import('src/views/home')

修改懒加载引入的名字

1. 使用 webpackChunkName 定义懒加载的名字

   js

   import(/* webpackChunkName: "home"*/ 'src/views/home')

   import(/* webpackChunkName: "home"*/ 'src/views/home')

   1
   

2. 使用[request]变量，可以解决循环 import 的找不到名字

   js

   routes.forEach(route => {
       path: route.path,
       name: route.name,
       component: () => import(/* webpackChunkName: "[request]" */ `src/views/${route.filePath}`)
   })

   routes.forEach(route => {
       path: route.path,
       name: route.name,
       component: () => import(/* webpackChunkName: "[request]" */ `src/views/${route.filePath}`)
   })

   1
   2
   3
   4
   5
   

拆分路由 ​

1. 创建 src/router/index.js 文件

   js

   import Vue from 'vue'
   import Router from 'vue-router'
   
   Vue.use(Router)
   let routes = []
   const routerContext = require.context('./', true, /index\.js$/)
   routerContext.keys().forEach((route) => {
     // 处理路由根目录的index.js
     if (route.startsWith('./index')) return
     const routerModule = routerContext(route)
     // 兼容import export 和 require module.export 两种规范
     routes = [...routes, ...(routerModule.default || routerModule)]
   })
   
   export default new Router({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   })

   import Vue from 'vue'
   import Router from 'vue-router'
   
   Vue.use(Router)
   let routes = []
   const routerContext = require.context('./', true, /index\.js$/)
   routerContext.keys().forEach((route) => {
     // 处理路由根目录的index.js
     if (route.startsWith('./index')) return
     const routerModule = routerContext(route)
     // 兼容import export 和 require module.export 两种规范
     routes = [...routes, ...(routerModule.default || routerModule)]
   })
   
   export default new Router({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

2. 之后在 router 文件夹下面以 下面的方式创建文件路由

   js

   // Home/index.js
   export default [
     {
       path: '/home',
       name: 'Home',
       components: () => import('@/views/Home'),
       meta: {
         title: '', // 页面标题;
       },
     },
   ]

   // Home/index.js
   export default [
     {
       path: '/home',
       name: 'Home',
       components: () => import('@/views/Home'),
       meta: {
         title: '', // 页面标题;
       },
     },
   ]

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

配置 svg ​

1. 安装：npm i svg-sprite-loader

2. 修改 vue.config.js

   js

   const path = require('path')
   const resolve = (dir) => path.resolve(__dirname, dir)
   module.exports = {
     // ...
     chainWebpack: (config) => {
       // 解决默认svg不处理src/assets文件夹
       config.module.rule('svg').exclude.add(resolve('src/assets')).end()
   
       config.module
         .rule('icons')
         .test(/\.svg$/)
         .include.add(resolve('src/assets')) // 处理svg目录
         .end()
         .use('svg-sprite-loader')
         .loader('svg-sprite-loader')
         .options({
           symbolId: 'icon-[name]',
         })
     },
   }

   const path = require('path')
   const resolve = (dir) => path.resolve(__dirname, dir)
   module.exports = {
     // ...
     chainWebpack: (config) => {
       // 解决默认svg不处理src/assets文件夹
       config.module.rule('svg').exclude.add(resolve('src/assets')).end()
   
       config.module
         .rule('icons')
         .test(/\.svg$/)
         .include.add(resolve('src/assets')) // 处理svg目录
         .end()
         .use('svg-sprite-loader')
         .loader('svg-sprite-loader')
         .options({
           symbolId: 'icon-[name]',
         })
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

3. 在 components 下新建 SvgIcon.vue

   vue

   <template>
     <svg :class="svgClass" aria-hidden="true">
       <use :xlink:href="iconName" />
     </svg>
   </template>
   
   <script>
   export default {
     name: 'SvgIcon',
     props: {
       name: {
         type: String,
         required: true,
       },
       className: {
         type: String,
         default: '',
       },
     },
     computed: {
       iconName() {
         return `#icon-${this.name}`
       },
       svgClass() {
         if (this.className) {
           return 'svg-icon ' + this.className
         } else {
           return 'svg-icon'
         }
       },
     },
   }
   </script>
   
   <style scoped>
   .svg-icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>

   <template>
     <svg :class="svgClass" aria-hidden="true">
       <use :xlink:href="iconName" />
     </svg>
   </template>
   
   <script>
   export default {
     name: 'SvgIcon',
     props: {
       name: {
         type: String,
         required: true,
       },
       className: {
         type: String,
         default: '',
       },
     },
     computed: {
       iconName() {
         return `#icon-${this.name}`
       },
       svgClass() {
         if (this.className) {
           return 'svg-icon ' + this.className
         } else {
           return 'svg-icon'
         }
       },
     },
   }
   </script>
   
   <style scoped>
   .svg-icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   

4. 在 assets 目录下新建 index.js

   js

   import Vue from 'vue'
   import SvgIcon from '@/components/SvgIcon' // svg组件
   
   // register globally
   Vue.component('svg-icon', SvgIcon)
   
   const requireAll = (requireContext) => requireContext.keys().map(requireContext)
   const req = require.context('./', true, /\.svg$/)
   requireAll(req)

   import Vue from 'vue'
   import SvgIcon from '@/components/SvgIcon' // svg组件
   
   // register globally
   Vue.component('svg-icon', SvgIcon)
   
   const requireAll = (requireContext) => requireContext.keys().map(requireContext)
   const req = require.context('./', true, /\.svg$/)
   requireAll(req)

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

5. 将 assets/index.js 引入到 main.js

6. 接下来将需要使用 svg 的图片放入到 assets/icons 下面即可，会自动注册

   html

   <template>
     <svg-icon name="文件名" />
   </template>

   <template>
     <svg-icon name="文件名" />
   </template>

   1
   2
   3
   

配置 postcss 插件 ​

1. 在项目根目录创建 postcss.config.js，postcss-pxtorem 是自动转换 rem；

   配置样式官网教程： https://cli.vuejs.org/zh/guide/css.html

   js

   module.exports = {
     plugins: {
       autoprefixer: {}, // 浏览器自动前缀
       // 自动转rem布局的插件
       'postcss-pxtorem': {
         rootValue: 32, // 根大小
         propList: ['*'], // 属性选择器, *表示通用;
         selectorBlackList: ['weui', 'mu', 'no-'], // 忽略选择器, 正则匹配,选择器有数组的都不转换;
       },
     },
   }

   module.exports = {
     plugins: {
       autoprefixer: {}, // 浏览器自动前缀
       // 自动转rem布局的插件
       'postcss-pxtorem': {
         rootValue: 32, // 根大小
         propList: ['*'], // 属性选择器, *表示通用;
         selectorBlackList: ['weui', 'mu', 'no-'], // 忽略选择器, 正则匹配,选择器有数组的都不转换;
       },
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

2. 如果在创建项目时，没有选择 postcss.config.js、babel、ESLint...单文件，选择了 package.json，则需要在 vue.config.js 配置

   js

   module.exports = {
       css: {
           loaderOptions: {
               postcss: {
                   plugins: [
                       require('postcss-pxtorem')({
                           rootValue: 32,
                           .....
                       }),
                       .....其他的插件;
                   ]
               }
           }
       }
   }

   module.exports = {
       css: {
           loaderOptions: {
               postcss: {
                   plugins: [
                       require('postcss-pxtorem')({
                           rootValue: 32,
                           .....
                       }),
                       .....其他的插件;
                   ]
               }
           }
       }
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   

配置 mock ​

1. 安装 mock：npm i mockjs mocker-api -S

2. 对修改 vue.config.js：

   js

   var webpack = require('webpack')
   var apiMocker = require('mocker-api')
   module.exports = {
     devServer: {
       before(app) {
         apiMocker(app, path.resolve(__dirname, './mock/index.js'), {
           proxy: {}, // 需要设置代理的话
           changeHost: true,
         })
       },
     },
   }

   var webpack = require('webpack')
   var apiMocker = require('mocker-api')
   module.exports = {
     devServer: {
       before(app) {
         apiMocker(app, path.resolve(__dirname, './mock/index.js'), {
           proxy: {}, // 需要设置代理的话
           changeHost: true,
         })
       },
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

3. 在项目根目录创建 mock/index.js

   js

   module.exports = {
     // 支持值为 Object 和 Array
     'GET /api/users': { users: [1, 2] },
     // GET 可忽略
     '/api/users/1': { id: 1 },
     // 支持自定义函数，API 参考 express@4
     'POST /api/users/create': (req, res) => {
       // 添加跨域请求头
       res.setHeader('Access-Control-Allow-Origin', '*')
       res.end('ok')
     },
   }

   module.exports = {
     // 支持值为 Object 和 Array
     'GET /api/users': { users: [1, 2] },
     // GET 可忽略
     '/api/users/1': { id: 1 },
     // 支持自定义函数，API 参考 express@4
     'POST /api/users/create': (req, res) => {
       // 添加跨域请求头
       res.setHeader('Access-Control-Allow-Origin', '*')
       res.end('ok')
     },
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

4. mock 基本例子：

   js

   Mock.mock({
     'data|80-100': [
       {
         id: '@id',
         name: '@name',
         nicName: '@last',
         phone: /^1[345678]\d{9}$/,
         'age|11-99': 1,
         address: '@county(true)',
         isMale: '@boolean',
         email: '@email',
         createTime: '@datetime',
         avatar() {
           return Mock.Random.image('200*100', '#894FC4', '#FFF', 'png', '!')
         },
       },
     ],
   })

   Mock.mock({
     'data|80-100': [
       {
         id: '@id',
         name: '@name',
         nicName: '@last',
         phone: /^1[345678]\d{9}$/,
         'age|11-99': 1,
         address: '@county(true)',
         isMale: '@boolean',
         email: '@email',
         createTime: '@datetime',
         avatar() {
           return Mock.Random.image('200*100', '#894FC4', '#FFF', 'png', '!')
         },
       },
     ],
   })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

跨域 ​

webpack 配置代理 ​

在项目目录下创建【vue.config.js】,不是 src 文件夹下，内容如下：

module.exports = {
  //打包后的文件夹目录
  outputDir: 'dist',
  // 静态资源文件夹目录
  assetsDir: 'static',
  // 根文件
  indexPath: 'index.html',
  // 基础路径 hash:""  history:"/"
  publicPath: '',
  // 配置代理
  devServer: {
    proxy: {
      '/api': {
        // 后端电脑的ip+端口号
        target: 'http://localhost:2000',
        changeOrigin: true, //跨域
        ws: true, //跨域
      },
    },
  },
}

module.exports = {
  //打包后的文件夹目录
  outputDir: 'dist',
  // 静态资源文件夹目录
  assetsDir: 'static',
  // 根文件
  indexPath: 'index.html',
  // 基础路径 hash:""  history:"/"
  publicPath: '',
  // 配置代理
  devServer: {
    proxy: {
      '/api': {
        // 后端电脑的ip+端口号
        target: 'http://localhost:2000',
        changeOrigin: true, //跨域
        ws: true, //跨域
      },
    },
  },
}

环境判断 【http/api.js】 ​

对于图片来说，开发环境下需要加’http://localhost:2000‘,生产环境下，不需要加，所以我们做一下环境判断。

// 环境判断
//开发环境 8080:$pre='http://localhost:2000'
//生产环境 2000:$pre=""

// console.log(process.env.NODE_ENV) 开发环境：development 生产环境：production
if (process.env.NODE_ENV === 'development') {
  Vue.prototype.$pre = 'http://localhost:2000'
}
if (process.env.NODE_ENV === 'production') {
  Vue.prototype.$pre = ''
}

// 环境判断
//开发环境 8080:$pre='http://localhost:2000'
//生产环境 2000:$pre=""

// console.log(process.env.NODE_ENV) 开发环境：development 生产环境：production
if (process.env.NODE_ENV === 'development') {
  Vue.prototype.$pre = 'http://localhost:2000'
}
if (process.env.NODE_ENV === 'production') {
  Vue.prototype.$pre = ''
}

vite 环境变量配置 ​

1. 根目录建以下文件

.env.development
.env.production

.env.development
.env.production

2. 修改vite.config.js

import { loadEnv, defineConfig } from 'vite'
export default defineConfig((env) => {
  const envs = loadEnv(env.mode, process.cwd())
  // 在.env.* 文件写的将会自动读取
  console.log(envs)
})

import { loadEnv, defineConfig } from 'vite'
export default defineConfig((env) => {
  const envs = loadEnv(env.mode, process.cwd())
  // 在.env.* 文件写的将会自动读取
  console.log(envs)
})

自动按需加载 api、组件、样式 ​

1. 安装

pnpm add unplugin-vue-components unplugin-auto-import -D

pnpm add unplugin-vue-components unplugin-auto-import -D

2. 修改vite.config.js

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      dts: './src/auto-imports.d.ts',
      // 这里写入按需加载的组件库
      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
    }),
    // https://github.com/antfu/unplugin-vue-components
    Components({
      // 自动引入的后缀
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

      dts: './src/components.d.ts',
      // imports 指定组件所在位置，默认为 src/components
      dirs: ['src/components/'],
    }),
  ],
}

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      dts: './src/auto-imports.d.ts',
      // 这里写入按需加载的组件库
      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
    }),
    // https://github.com/antfu/unplugin-vue-components
    Components({
      // 自动引入的后缀
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

      dts: './src/components.d.ts',
      // imports 指定组件所在位置，默认为 src/components
      dirs: ['src/components/'],
    }),
  ],
}

增加页面加载进度条 ​

1. 安装

pnpm add nprogress

pnpm add nprogress

2. 修改路由拦截器

import NProgress from 'nprogress'
router.beforeEach((to, from) => {
  if (!NProgress.isStarted()) {
    NProgress.start()
  }
})

router.afterEach((to, from) => {
  NProgress.done()
})

import NProgress from 'nprogress'
router.beforeEach((to, from) => {
  if (!NProgress.isStarted()) {
    NProgress.start()
  }
})

router.afterEach((to, from) => {
  NProgress.done()
})

3. 添加 css 样式文件并引入，地址：https://unpkg.com/nprogress@0.2.0/nprogress.css

增加 UI 组件库 ​

下面以element-plus为例，直接配置按需引入即可，其他组件库也是如此 其他支持按需引入的组件库： https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/index.ts

1. 安装

pnpm add element-plus

pnpm add element-plus

2. 按需引入 修改 vite.config.ts 文件

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

3. 直接在模板里面使用即可

增加 markdown 组件 ​

1. 安装

pnpm add @vueuse/head
pnpm add -D vite-plugin-md markdown-it-link-attributes markdown-it-prism

pnpm add @vueuse/head
pnpm add -D vite-plugin-md markdown-it-link-attributes markdown-it-prism

2. main 入口文件加入

import { createHead } from '@vueuse/head'
app.use(createHead())

import { createHead } from '@vueuse/head'
app.use(createHead())

3. vite.config.ts 配置

import Markdown from 'vite-plugin-md'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['@vuevue/head'],
    }),
    Markdown({
      wrapperClasses: 'markdown-body',
      headEnabled: true,
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true,
      },
      markdownItSetup(md) {
        // https://prismjs.com/
        md.use(Prism)
        md.use(LinkAttributes, {
          matcher: (link: string) => /^https?:\/\//.test(link),
          attrs: {
            target: '_blank',
            rel: 'noopener',
          },
        })
      },
    }),
  ],
})

import Markdown from 'vite-plugin-md'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['@vuevue/head'],
    }),
    Markdown({
      wrapperClasses: 'markdown-body',
      headEnabled: true,
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true,
      },
      markdownItSetup(md) {
        // https://prismjs.com/
        md.use(Prism)
        md.use(LinkAttributes, {
          matcher: (link: string) => /^https?:\/\//.test(link),
          attrs: {
            target: '_blank',
            rel: 'noopener',
          },
        })
      },
    }),
  ],
})

4. 新增 views/markdown.vue 文件

<template>
  <MarkdownPage />
</template>
<script lang="ts" setup>
import MarkdownPage from '@/docs/Test.md'
</script>

<template>
  <MarkdownPage />
</template>
<script lang="ts" setup>
import MarkdownPage from '@/docs/Test.md'
</script>

5. 添加一个新的路由

{
  name: 'Markdown',
  path: '/markdown',
  component: MarkdownPage,
  meta: {
    title: 'markdown',
  },
}

{
  name: 'Markdown',
  path: '/markdown',
  component: MarkdownPage,
  meta: {
    title: 'markdown',
  },
}

6. 下载 markdown 样式 地址：https://prismjs.com/plugins/file-highlight/#examples 点击 DOWNLOAD，选择对应的主题，滚动到最下面，点击下载 css 添加 src/assets/styles/markdown.scss，并将下载好的 css 内容复制进去

.markdown-body {
  // 复制到这里
}

.markdown-body {
  // 复制到这里
}

之后将该 css 文件在 index.scss 文件内导入

让 svg 支持组件一样引入 ​

1. 安装

pnpm add vite-svg-loader -D

pnpm add vite-svg-loader -D

2. 修改vite.config.js

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    // ...
    svgLoader(),
  ],
})

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    // ...
    svgLoader(),
  ],
})

3. 使用示例

<script setup lang="ts">
import MyIcon from '@/assets/example.svg?component'
</script>

<template>
  <MyIcon />
</template>

<script setup lang="ts">
import MyIcon from '@/assets/example.svg?component'
</script>

<template>
  <MyIcon />
</template>

配置 scss 全局变量 ​

修改vite.config.js

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
      @import "@/assets/styles/variables.scss";
    `,
      javascriptEnabled: true,
    },
  },
},

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
      @import "@/assets/styles/variables.scss";
    `,
      javascriptEnabled: true,
    },
  },
},

封装 hooks 取全局数据 ​

1. 创建 useGlobal.ts 文件

import { getCurrentInstance } from 'vue'
function useGlobal() {
  const instance = getCurrentInstance() as unknown as ICurrentInstance
  return instance.appContext.config.globalProperties
}
export default useGLobal

import { getCurrentInstance } from 'vue'
function useGlobal() {
  const instance = getCurrentInstance() as unknown as ICurrentInstance
  return instance.appContext.config.globalProperties
}
export default useGLobal

2. 全局定义类型有更好的提示

interface ICurrentInstance extends ComponentInternalInstance {
  appContext: {
    config: { globalProperties: IGlobal }
  }
}

interface IGlobal {
  // ...
}

interface ICurrentInstance extends ComponentInternalInstance {
  appContext: {
    config: { globalProperties: IGlobal }
  }
}

interface IGlobal {
  // ...
}

在 vscode 可以点击跳转到对应的文件 ​

创建 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"], // 增加别名可以跳转对应文件夹
      "api": ["api"] // 其他的路径跳转
    }
  }
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"], // 增加别名可以跳转对应文件夹
      "api": ["api"] // 其他的路径跳转
    }
  }
}

逻辑复用方法 ​

MyPlugin.install = function (Vue, options) {
    // 第一种方法. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
        // 逻辑...
    }

    // 第二种方法. 添加全局资源
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
            // 逻辑...
        }
        ...
    })

    // 第三种方法. 注入组件
    Vue.mixin({
        created: function () {
        // 逻辑...
        }
         ...
    })

    // 第五种方法. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
    }

    // 第六种方法，注册组件
    Vue.component(组件名, 组件)
}