手把手教你搭建webpack-vue2（rem适配）移动端项目

最近写了微信公众号h5项目，所以写一篇关于搭建一个vue移动端项目，所以记录一下搭建的过程。有需要的小伙伴可以作为参考来搭建，

初始化项目

这边用webpack 直接构建项目，前提安装好node环境，然后再搭配所需要的一些插件

1、使用npm安装webpack

npm install webpack -g 或 npm install -g webpack 
复制代码

2、全局安装vue-cli

npm install --global vue-cli

3、在某盘新建一个文件夹，做你新项目的存放文件夹。然后vscode打开这个文件夹，打开终端

vue init webpack my_h5project

Project name (vue-test)：项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
Project description (A Vue.js project)：项目描述，也可直接点击回车，使用默认名字
Author ()：作者
Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车
回答完毕后就开始构建项目

安装 postcss-pxtorem

npm install amfe-flexible

在main.js引入

import "amfe-flexible";

在根目录的.postcssrc.js文件添加配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      // rootValue ({ file }) {
      //   return file.indexOf('vant') !== - 1 ? 37.5 : 75
      // },
      propList: ['*'],
      // selectorBlackList: ['mint-']
    }
  }
}

引入eslint提高代码质量

安装eslint及相关插件

npm install eslint eslint-plugin-vue babel-eslint -D
复制代码

根目录下新建.eslintrc.js文件，定义eslint规则

// .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  // add your custom rules here
  rules: {
    // "off" or 0 - 关闭规则
    // "warn" or 1 - 将规则视为一个警告
    // "error" or 2 - 将规则视为一个错误
    // allow async-await
    'generator-star-spacing': 'off',
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow debugger during development
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    /**
     * 最佳实践
     */
    eqeqeq: 2, // 强制使用 === 和 !==
    'default-case': 1, // 要求 switch 语句中有 default 分支
    'no-else-return': 1, // 禁止 if 语句中 return 语句之后有 else 块
    'no-empty-function': 1, // 禁止出现空函数
    'no-multi-spaces': 1, // 禁止使用多个空格
    radix: 1, // 强制在parseInt()使用基数参数

    /**
     * 变量声明
     */
    'init-declarations': ['error', 'always'], // 声明变量必须赋值

    /**
     * ECMAScript6
     */
    'arrow-spacing': ['error', { before: true, after: true }], // 强制箭头函数的箭头前后使用空格
    'no-var': 2, // 禁止使用 var 声明变量
    'object-shorthand': 2, // 要求使用对象方法名和属性名简写
    'prefer-arrow-callback': 2, // 要求回调函数使用箭头函数
    'prefer-const': 2, // 使用 const 声明那些声明后不再被修改的变量
    'prefer-rest-params': 2, // 要求使用剩余参数而不是 arguments

    /**
     * 风格指南
     */
    'space-before-function-paren': 0, // 函数名称或function关键字与开始参数之间允许有空格
    'array-bracket-spacing': 0, // 数组方括号内必须空格
    'comma-dangle': 2, // 禁止末尾逗号
    'eol-last': 2, // 要求文件末尾存在空行
    // 对象冒号前禁止空格，冒号后必须空格
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    // 关键字（if、else等）前后必须有空格
    'keyword-spacing': ['error', { before: true, after: true }],
    // 禁止出现多行空行
    'no-multiple-empty-lines': ['error', { max: 1 }],
    semi: ['error', 'never'], // 禁止末尾分号
    quotes: ['error', 'single'], // 强制使用单引号
    'space-infix-ops': 2, // 操作符周围必须有空格
    'spaced-comment': ['error', 'always'], // 注释后面必须跟随至少一个空白
    'object-curly-spacing': 0,
    'no-unused-expressions': 0
  }
}
复制代码

根目录下新建.eslintignore文件，需要忽略eslint检查的目录或文件

/dist/
/node_modules/
复制代码

在package.json中的scripts配置中增加以下脚本命令

"lint": "eslint --ext .vue,.js ./",
"lint:fix": "eslint --fix --ext .vue,.js ./"
复制代码

引入prettier统一代码风格

安装prettier及相关eslint插件

npm install prettier eslint-config-prettier eslint-plugin-prettier -D
复制代码

根目录下新建.prettierrc.js文件，定义perttier规则

// .preitterrc.js
module.exports = {
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 80, 
  // 一个tab代表几个空格数，默认为80
  tabWidth: 2, 
  // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  useTabs: false, 
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: true, 
  // 行位是否使用分号，默认为true
  semi: false, 
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: "none", 
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true, 
  // 代码的解析引擎，默认为babylon，与babel相同
  // "parser": "babylon",

  // 开启 eslint 支持
  eslintIntegration: true
}
复制代码

修改eslint（.eslintrc.js）配置

1、在extends配置值增加plugin:prettier/recommended

2、在rules配置值增加'prettier/prettier': 'error'

修改后的.eslintrc.js文件如下：

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  // add your custom rules here
  rules: {
    // "off" or 0 - 关闭规则
    // "warn" or 1 - 将规则视为一个警告
    // "error" or 2 - 将规则视为一个错误
    'prettier/prettier': 'error',
    
    // allow async-await
    'generator-star-spacing': 'off',
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow debugger during development
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    /**
     * 最佳实践
     */
    eqeqeq: 2, // 强制使用 === 和 !==
    'default-case': 1, // 要求 switch 语句中有 default 分支
    'no-else-return': 1, // 禁止 if 语句中 return 语句之后有 else 块
    'no-empty-function': 1, // 禁止出现空函数
    'no-multi-spaces': 1, // 禁止使用多个空格
    radix: 1, // 强制在parseInt()使用基数参数

    /**
     * 变量声明
     */
    'init-declarations': ['error', 'always'], // 声明变量必须赋值

    /**
     * ECMAScript6
     */
    'arrow-spacing': ['error', { before: true, after: true }], // 强制箭头函数的箭头前后使用空格
    'no-var': 2, // 禁止使用 var 声明变量
    'object-shorthand': 2, // 要求使用对象方法名和属性名简写
    'prefer-arrow-callback': 2, // 要求回调函数使用箭头函数
    'prefer-const': 2, // 使用 const 声明那些声明后不再被修改的变量
    'prefer-rest-params': 2, // 要求使用剩余参数而不是 arguments

    /**
     * 风格指南
     */
    'space-before-function-paren': 0, // 函数名称或function关键字与开始参数之间允许有空格
    'array-bracket-spacing': 0, // 数组方括号内必须空格
    'comma-dangle': 2, // 禁止末尾逗号
    'eol-last': 2, // 要求文件末尾存在空行
    // 对象冒号前禁止空格，冒号后必须空格
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    // 关键字（if、else等）前后必须有空格
    'keyword-spacing': ['error', { before: true, after: true }],
    // 禁止出现多行空行
    'no-multiple-empty-lines': ['error', { max: 1 }],
    semi: ['error', 'never'], // 禁止末尾分号
    quotes: ['error', 'single'], // 强制使用单引号
    'space-infix-ops': 2, // 操作符周围必须有空格
    'spaced-comment': ['error', 'always'], // 注释后面必须跟随至少一个空白
    'object-curly-spacing': 0,
    'no-unused-expressions': 0
  }
}
复制代码

增加vscode配置文件settings.json实现保存自动格式化

注意点：可能你本地装的很多插件会导致各种和eslint冲突的问题，需要根据情况把这些冲突问题解决。

在根目录下新建.vscode目录，在该目录中新建settings.json文件

{
  //保存时eslint自动修复错误 新版本改为下面那个配置
  // "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //保存自动格式化
  "editor.formatOnSave": true
}
复制代码

引入less

安装less和less-laoder

npm i less less-laoder -D

复制代码