管理后台框架搭建

项目结构

┌─operate-pc
|--build                     // 构建脚本目录
|  |--build.js               // 生产环境构建脚本
|  |--utils.js               // 构建相关工具方法
|  |--vue-loader.conf.js     // vue-loader配置
|  |--webpack.base.conf.js   // webpack基础配置
|  |--webpack.dev.conf.js    // webpack开发环境配置
|  |--webpack.prod.conf.js   // webpack生产环境配置
|--config                    // 项目配置文件
|  |--dev.env.js             // 开发环境变量
|  |--index.js               // 项目配置文件
|  |--prod.env.js            // 生产环境变量
|--dist                      // 打包后文件
|--node_modules              // 依赖，安装包自动生成
|--public                    // 公共入口管理
|	 |--index.html             // 模板入口页面
|	 |--favicon.ico            // 网站头像，无时，打开页面报404
|--src                       // 源码目录
|  |--assets                 // 项目静态资源文件目录，例如静态css、图片等，会被webpack构建，用来存放自己的文件
|  |  |--style               // 静态css
|  |  |	 |--variables.scss   // 全局注入样式
|  |  |	 |--common.scss      // 全局公共样式
|  |  |--image               // 图片
|  |--components             // 公共组件目录，里面是一个个的公共组件
|  |--config                 // 一些配置项、工具类以及外部库
|  |	 |--utils.js           // 公共方法、会被挂载到 Vue 原型\$utils 上
|  |	 |--filters.js         // 公共过滤器
|  |	 |--env.js             // 配置编译环境
|  |--constant               // 常量
|  |  |--modules             // 各模块常量
|  |     |--common.js        // 公共常量定义
|  |  |--area.json           // 地区枚举
|  |  |--index.js            // 整合所有常量
|  |--mixins                 // 混入功能
|  |  |--routeHijack.js      // 处理路由，keep-alive不同情况处理
|  |--pages                  // 业务逻辑页面存放文件
|  |  |--appMain.vue         // 顶部及左侧导航页面
|  |  |--index.vue           // 入口页面
|  |--plugin                 // 插件管理
|  |  |--src                 // 各模块路由封装
|  |  |  |--directives.js    // 页面权限点、拖拽等指令定义
|  |  |  |--protos.js        // 存放Vue原型的方法
|  |  |--index.js            // 埋点、全局公共组件、过滤器、指令等定义
|  |--router                 // 页面路由配置
|  |  |--modules             // 各模块路由封装
|  |  |  |--notcheck.js      // 不添加前缀路由
|  |	 |--index.js           // 路由整合
|  |	 |--routes.js          // 路由前缀处理等
|  |--service                // 网关接口管理
|  |  |--modules             // 各模块接口封装
|  |  |  |--common.js        // 公共接口请求
|  |  |--http.js             // 封装axios及接口返参了拦截等
|  |  |--index.js            // 整合所有接口能力
|  |--store                  // 状态管理目录
|  |  |--modules             // 各模块状态封装
|  |  |  |--app.js           // 全局状态管理
|  |  |--index.js            // 整合所有状态管理能力
|  |  |--initStore.js        // 初始化菜单权限管理
|--APP.vue                   // 页面入口文件
|--main.js                   // 入口文件，初始化vue实例、定义全局组件等
|--.babelrc                  // babel 规则配置
|--.editorconfig             // 统一代码风格配置文件
|--.eslintignore             // eslint忽略文件
|--.eslintrc.js              // eslint规则添加
|--.gitignore                // git 忽略文件
|--.gitlab-ci.yml            // 自动部署 ci/cd 项目发布
|--.postcssrc.js             // CSS预处理器(此处默认启用autoprefixer)
|--.prettierrc.js            // prettier配置格式化规范
|--package.json              // npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
|--package-lock.json         // npm包锁定依赖版本
└─README.md                  // 项目说明

基础框架搭建

• 创建 package.json

npm init  // 可以设置项目名，作者，关键词等

• 安装 webpack 依赖

npm install -D webpack 
npm install -D webpack-cli 
npm install -D webpack-dev-server 
npm install -D webpack-merge

• 安装 vue / vuex / vue-router
  • vue： UI框架
  • vue-loader：vue 组件转义
  • vue-template-compiler：读取处理了.vue文件SFC内容，将.vue文件处理为一个AST树。
  • vuex：状态管理
  • vue-router：路由管理

npm install --save vue
npm install -D vue-loader
npm install -D vue-template-compiler

npm install --save vuex
npm install --save vue-router

• 安装 babel
  • babel-loader：转义 js 文件代码的 loader
  • @babel/core：babel 核心库
  • @babel/preset-env：整合es6语法转义
    • @babel/plugin-transform-arrow-functions：箭头函数转义
    • @babel/plugin-transform-classes：class转义
  • @babel-polyfill：使用新的 API 时兼容老版浏览器，会污染全局变量，移除，通过下面插件实现
  • @babel/plugin-transform-runtime：外部化对助手和内置函数的引用，自动填充代码，而不会污染全局变量
  • @babel/runtime：替代polyfill。提取辅助函数，运行时转义减小项目文件的大小
  • polyfill-service：通过选择性地填充浏览器所需的内容，使Web开发的烦恼程度降低。读取每个请求的User-Agent标头，并返回适合于请求浏览器的polyfill。只需在index.html中引入即可，暂未测试。
  • babel-plugin-import：主动注入依赖
    • @babel/plugin-syntax-dynamic-import：动态注入插件

npm install -D babel-loader 
npm install -D @babel/core 
npm install -D @babel/preset-env
  npm install -D @babel/polyfill // 已除掉
npm install -D @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install -D babel-plugin-import
npm install -D @babel/plugin-syntax-dynamic-import

• 安装一些公司内部公共组件库，如：公共工具库、UI样式库、埋点库等。

• 安装axios，发送 ajax 请求

npm install --save axios

• 安装 sass 使用
  • css-loader，style-loader：处理css基础loader
  • node-sass，sass-loader：处理sass
  • sass-resources-loader：全局注册sass变量
  • postcss-loader，autoprefixer，postcss-import：自动给css样式添加前缀，兼容浏览器
  • postcss-import：更有效的引入内联样式表的方法；可以引入第三方样式表；可以将样式表分割成多个部分，然后重新组合它们
  • postcss-url：url上重新定位、内联或者复制
  • mini-css-extract-plugin：提取css
  • optimize-css-assets-webpack-plugin：压缩css

npm install -D style-loader css-loader 
npm install -D node-sass sass-loader
npm install -D sass-resources-loader
npm install -D postcss-loader autoprefixer 
npm install -D postcss-import postcss-url
npm install -D mini-css-extract-plugin
npm install -D optimize-css-assets-webpack-plugin

• compression-webpack-plugin gzip压缩插件

npm install -D compression-webpack-plugin

• file-loader及url-loader
  • url-loader：将引入的图片编码，生成dataUrl并将其打包到文件中，图片过大，编码消耗性能，需要通过limit进行大小限制，超过使用file-loader,url-loader内部封装了file-loader，故安装时只需按照url-loader
  • file-loader：修改打包后图片的存储路径，通过配置修改引用路径。

npm install -D url-loader file-loader

• friendly-errors-webpack-plugin
  • 识别某些类别的webpack错误，并清理，聚合和优先级

npm install -D friendly-errors-webpack-plugin

• html-webpack-plugin
  • 创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。

npm install -D html-webpack-plugin 

• node-notifier：发送跨平台本机通知。

npm install -D node-notifier

• portfinder
  • 本地开发启动多个端口，如果指定端口被占用，则端口号+1，不是管理员权限时，端口不能小于1024。脚手架端口号最低从1024启动。

npm install -D portfinder

• shelljs：脚本语言解析器，可用于自动化。

npm install -D shelljs

• terser-webpack-plugin：缩小js

npm install -D terser-webpack-plugin

• vue相关插件
  • vue-loader：将解析文件，提取每个语言块，如有必要，将它们通过其他加载器进行管道传输，最后将它们组装回ES 模块，其默认导出为 Vue.js 组件选项对象。
  • vue-template-compiler：将模板预编译为渲染函数
  • vue-style-loader：vue 样式解析
  • vue-infinite-scroll：无限滚动，下拉加载

npm install -D vue-loader
npm install -D vue-template-compiler
npm install -D vue-style-loader
npm install -D vue-infinite-scroll

• eslint & prettier：校验添加，通一代码风格

npm install -D eslint-loader babel-eslint
npm install -D eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
npm install -D prettier-eslint-cli

• copy-webpack-plugin：文本拷贝

npm install -D copy-webpack-plugin

• chalk：修改控制台中字符串的样式

npm install -D chalk

• 项目commit规范化

npm install -D husky lint-staged

• @vue/babel-preset-jsx：解析jsx

npm install -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

• Web-storage-cache：js缓存

npm install -D web-storage-cache mome

配置文件详解

• .babelrc
  • 解析es6规则

{
  // 定制转码规则
  "presets": [
    [
      "@babel/preset-env",   // 将js转码为es5,并且设置不转码的AMD的模块文件，制定浏览器兼容
      {
        "loose": true,
        "modules": false    // 默认都是支持 CommonJS
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime", // 解决全局对象等编译不足,不会污染全局 API。
    [
      "import",
      {
        "libraryName": "@zyf2e/utils",
        "camel2DashComponentName": false
      },
      "@zyf2e/utils"
    ]
  ]
}

• .editorconfig：编辑器的配置文件

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

• .eslintignore：eslint校验忽略配置文件

• .eslintrc.js：eslint规则添加

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  parserOptions: {
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint'
  },
  // 可配置全局变量
  globals: {
    util: true,
    Telescope: true,
    tryCatch: true
  },
  env: {
    // 浏览器环境中的全局变量
    browser: true,
    // Node.js 全局变量和 Node.js 作用域
    node: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // 扩展一个流行的风格指南，即 eslint-config-standard
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off', // 取消generator 函数中 * 号周围使用一致空格的规则
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁用debugger
    semi: ['error', 'always'] //必须使用分号
  }
};

• .gitignore：git提交忽略文件配置

• .gitlab-ci.yml：gitlab自动部署 ci/cd 项目发布配置

• postcssrc.js ：postcss-loader包的一个配置，写入使用到的插件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

• .prettierrc.js：美化代码风格

module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  jsxSingleQuote: true,
  proseWrap: 'never',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  trailingComma: 'none',
  printWidth: 120,
  htmlWhitespaceSensitivity: 'ignore', //vue-html尖括号掉行
  'space-before-function-paren': 0
};

• pakage.json：项目基本配置信息，控制台运行脚本，项目依赖库及开发依赖库。
  • scripts配置dev
    • inline：将webpack-dev-server客户端加入到webpack入口文件的配置中
    • progress：将运行进度输出到控制台
    • port：指定端口号，非管理员权限，端口号从1024开始。

{
  "name": "operate-pc",
  "version": "1.0.0",
  "description": "管理后台",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js",   // 开发环境
    "start": "sudo npm run dev",
    "build": "node build/build.js",  // 打包命令
    "prettier-fix": "prettier --write src/**/*.{vue,js,less,scss} *.html",
    "eslint-fix": "eslint src/**/*  --fix",
    "fix": "npm run prettier-fix&&npm run eslint-fix"  // 格式化代码
  },
  "keywords": [
    "管理后台",
    "vue"
  ],
  "author": "xxx",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime": "^7.11.2",
    "axios": "^0.20.0",
    "vue": "^2.6.12",
    "vue-router": "^3.4.3",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/plugin-transform-runtime": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "@zyf2e/utils": "^2.3.37",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "chalk": "^4.1.0",
    "copy-webpack-plugin": "^5.0.2",
    "css-loader": "^4.2.2",
    "eslint": "^7.7.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.0.3",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^6.0.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.10.0",
    "node-notifier": "^8.0.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "portfinder": "^1.0.28",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-url": "^8.0.0",
    "prettier-eslint-cli": "^5.0.0",
    "sass-loader": "^10.0.1",
    "sass-resources-loader": "^2.1.0",
    "shelljs": "^0.8.4",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^4.1.0",
    "url-loader": "^4.1.0",
    "vue-infinite-scroll": "^2.0.2",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.1.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}