前端项目配置

项目说明

本项目为Vue-cli3.X为项目模块配置说明以及一些项目组件描述

预编译语言

预编译工具最好与第三方UI插件预编译工具一致(例如cube-ui则选择stylus)
全局样式使用资源加载器配置，请勿使用时引用（例子点击此处）

Eslint

添加配置

json

    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-vue": "^5.0.0"

项目代码检测规则配置如下

json

"eslintConfig": {
    "root": true,
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module"
    },
    "env": {
      "node": true,
      "es6": true
    },
    "extends": [
      "plugin:vue/essential",
      "airbnb-base",
      "eslint:recommended"
    ],
    "rules": {
      "import/no-unresolved": "off"
    }
  }

配置修复命令

json

"lint-fix": "eslint --fix --ext .js,.vue src",

代码提交检测

使用husky和lint-staged保证团队代码一致性
添加配置

json

"husky": "^2.3.0",
"lint-staged": "^8.1.7",

配置命令

json

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }

图片懒加载

如果项目很多为图文混排或者是大量图片展示系统可以使用懒加载来占位处理

添加配置

json

 "vue-lazyload": "^1.2.6",

全局注入

import errImg from './public/img/404.png'
import loadingImg from './public/img/loading.gif'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errImg,
  loading: loadingImg,
  attempt: 1,
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
}

页面调用

html

 <img v-lazy="itemImg" />

图片缩放

图片显示时点击进行缩放

添加配置

json

 "medium-zoom": "^1.0.4",

页面调用

import mediumZoom from 'medium-zoom'

// 获取API数据成功后
setTimeout(()=>{
  mediumZoom('.detail-content img')
},0)

路由进度条

添加配置

json

"nprogress": "^0.2.0",

全局注入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errImg,
  loading: loadingImg,
  attempt: 1,
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
}).

页面调用

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  NProgress.done()
})

缓存操作(cookie与localStorage)

主要用于缓存的设置/获取/删除，设置一个名称就可以使用

添加配置

json

    "js-cookie": "^2.2.0",

功能实现

import Cookies from 'js-cookie'
const prefixName = 'systemName'

export function getInfo (type,flag) {
  if(flag) return localStorage.getItem(prefixName+type)
  return Cookies.get(prefixName+type)
}
export function setInfo(type,token,flag) {
  if(flag) return localStorage.setItem(prefixName+type,token)
  return Cookies.set(prefixName+type, token)
}
export function removeInfo(type,flag) {
  if(flag) return localStorage.removeItem(prefixName+type)
  return Cookies.remove(prefixName+type)
}

功能调用

import {getInfo, setInfo} from "@/common/js/auth"

this.statementShow = getInfo('statementLayerFlag')

setInfo('statementLayerFlag', 1)

vue.config.js

function resolve (dir) {
  return path.join(__dirname, dir)
}

const path = require('path')

module.exports = {
  productionSourceMap: false,// 生产环境的 source map
  lintOnSave: true,
    css: {
      loaderOptions: {
        stylus: { //加载第三方主题
          'resolve url': true,
          'import': [
            './src/common/stylus/cube-ui-theme'
          ]
        },
        postcss: { //配置px-rem变量
          plugins: [
            require('postcss-px2rem')({ //配置项，详见官方文档
              remUnit: 37.5
            })
          ]
        }
      }
    },
     pluginOptions: {
       'cube-ui': {
         postCompile: true,
         theme: true
       },
       'style-resources-loader': { //全局加载样式
         preProcessor: 'less',
         patterns: [
           './src/common/less/var.less'
         ]
       }
     },
  chainWebpack: config => {

    // 设置别名
    config.resolve.alias.set("@", resolve("src"))

    // 去除预加载引用
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')

    // JS包引用拆分
    config
        .optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // only package third parties that are initially dependent
        },
        cubeUI: {
          name: 'chunk-cube-ui', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?cube-ui(.*)/ // in order to adapt to cnpm
        },
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'), // can customize your rules
          minChunks: 3, //  minimum common number
          priority: 5,
          reuseExistingChunk: true
        }
      }
    })

    // 多页面配置，为js添加hash
    config.output.chunkFilename(`js/[name].[chunkhash:8].min.js`)
  }
}

打包不同环境接口

.
├─ package.json
├─ env.alpha
├─ env.beta
├─ env.localsever
├─ src
└─ config
    ├─ index.js

文件详情

package.json

json

"scripts":{
   "alpha": "vue-cli-service build --mode alpha",
   "beta": "vue-cli-service build --mode beta",
   "localsever": "vue-cli-service build --mode localsever"
 }

env.alpha

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'

env.beta

NODE_ENV = 'production'
VUE_APP_TITLE = 'beta'

env.localsever

NODE_ENV = 'production'
VUE_APP_TITLE = 'localsever'

config/index.js

const dev = {
 apiDomain: 'http://192.168.1.116:8079',
 baseWs: 'ws://192.168.1.116:8082'
}
const test = {
 apiDomain: 'http://api1.ledx.xyz',
 baseWs: 'ws://ws.ledx.xyz'
}
const prod = {
 apiDomain: 'https://api.opq.plus',
 baseWs: 'wss://ws.opq.plus'
}

var nevData = null
if (process.env.NODE_ENV === 'development') {
 nevData = dev
} else {
 if (process.env.VUE_APP_TITLE === 'localsever') {
   nevData = dev
 } else if (process.env.VUE_APP_TITLE === 'alpha') {
   nevData = test
 } else if (process.env.VUE_APP_TITLE === 'beta') {
   nevData = prod
 }
}
export const config = Object.assign({
 defaultPageSize: 10
}, nevData)

config.install = function (Vue) {
 Vue.prototype.$config = config
}

export default config

打包警告或者错误处理
例如出现以下错误信息 Building for production...Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade caniuse-lite browserslist
或者是 'vue-cli-service' ��ڲ��ⲿ��Ҳ��ǿ��еĳ��
- 删除yarn.lock
- 删除node_modules
- yarn install

预编译语言 ​

Eslint ​

代码提交检测 ​

图片懒加载 ​

图片缩放 ​

路由进度条 ​

缓存操作(cookie与localStorage) ​

vue.config.js ​

打包不同环境接口 ​

预编译语言

Eslint

代码提交检测

图片懒加载

图片缩放

路由进度条

缓存操作(cookie与localStorage)

vue.config.js

打包不同环境接口