使用cli 创建使用vue2 uniapp的项目（防止再次踩坑）

1. vue2版 uni-app项目，CLI版本要求

（强烈推荐） 使用 npx @vue/cli@4.5.14 create -p dcloudio/uni-preset-vue my-uniapp 创建项目。

原因：
uniapp官网的指南有问题，会默认安装最新版CLI 5.x.x。

问题1. 启动报错Error: PostCSS plugin autoprefixer requires PostCSS 8. 降低autoprefixer之后，可以正常启动项目。
**问题2.**安装eslint，再启动项目就开始报错，TypeError: Cannot convert undefined or null to object。卸载eslint再启动，仍然报错。

2. 安装sass支持

npm install sass

3. 安装eslint和prettier

需要搭配vscode的扩展ESLint和prettier eslint。

npm i -D eslint@7.32.0 prettier@2.4.1 eslint-config-prettier@8.3.0  eslint-plugin-prettier@4.0.0 eslint-plugin-vue@8.0.3  @vue/eslint-config-prettier@6.0.0 @vue/cli-plugin-eslint@5.0.0 

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  rules: {
    'prefer-template': 'warn', // 使用模板字符串
    'vue/no-unused-vars': 'warn',
    'no-unused-vars': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'accessor-pairs': 2,
    'arrow-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    'block-spacing': [2, 'always'],
    'brace-style': [
      2,
      '1tbs',
      {
        allowSingleLine: true,
      },
    ],
    camelcase: [
      0,
      {
        properties: 'always',
      },
    ],
    'comma-dangle': [2, 'always-multiline'],
    'comma-spacing': [
      2,
      {
        before: false,
        after: true,
      },
    ],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    curly: [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    'generator-star-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    'handle-callback-err': [2, '^(err|error)$'],
    indent: 0,
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true,
      },
    ],
    'keyword-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false,
      },
    ],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [
      2,
      {
        allowLoop: false,
        allowSwitch: false,
      },
    ],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [
      2,
      {
        max: 1,
      },
    ],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [
      2,
      {
        defaultAssignment: false,
      },
    ],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [
      2,
      {
        initialized: 'never',
      },
    ],
    'operator-linebreak': [
      2,
      'after',
      {
        overrides: {
          '?': 'before',
          ':': 'before',
        },
      },
    ],
    'padded-blocks': [2, 'never'],
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    semi: [2, 'always'],
    'semi-spacing': [
      2,
      {
        before: false,
        after: true,
      },
    ],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [0, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [
      2,
      {
        words: true,
        nonwords: false,
      },
    ],
    'spaced-comment': [
      2,
      'always',
      {
        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
      },
    ],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    yoda: [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'object-curly-spacing': 0,
    'array-bracket-spacing': [2, 'never'],
    'no-underscore-dangle': 0,
    'prettier/prettier': [
      2,
      {
        endOfLine: 'auto', // 关闭行尾必须用换行 解决 webstorm 警告颜色
      },
    ],
    'default-case': 0, // switch default-case 警告
    'prefer-destructuring': 0,
    'no-param-reassign': 0,
    'vuejs-accessibility/click-events-have-key-events': 0,
    'import/named': 0,
    'consistent-return': 0,
    'import/prefer-default-export': 0,
    'import/no-import-module-exports': 0,
    'guard-for-in': 0,
    'form-control-has-label': 0,
    // 'import/extensions': ['error', 'always'],
  },
  // extends: ['plugin:vue/essential', '@vue/airbnb', 'eslint:recommended', '@vue/prettier'],
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  overrides: [
    {
      files: ['src/**/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      },
    },
  ],
  globals: {
    uni: true,
    wx: true,
    Vue: true,
    Component: true,
    getCurrentPages: true,
    ROUTES: true,
    parseInt: true,
  },
};

.prettierrc.js

//配置 prettier  。prettierrc.js
module.exports = {
  // 单行最大长度
  printWidth: 100,
  // 设置编辑器每一个水平缩进的空格数
  tabWidth: 2,
  // 在句尾添加分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  jsxSingleQuote: true,
  // 在任何可能的多行中输入尾逗号。
  trailingComma: 'all',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  bracketSpacing: true,
  // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
  jsxBracketSameLinte: false,
  // 为单行箭头函数的参数添加圆括号。
  alwaysParens: 'always',
  // 行结束
  endOfLine: 'auto',
  vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
  htmlWhitespaceSensitivity: 'ignore', //HTML 空白敏感度
};

.eslintignore

build/*.js
src/assets
public
dist
.idea
.vscode
.hbuilderx
.history
wxcomponents
node_modules
babel.config.js
postcss.config.js
src/components/uqrcode
src/uni_modules

4 CLI项目安装dcloud插件市场中的uni_module插件

1. 用hbuilderX打开项目
2. 点击下载插件并导入HBuilderX。
   
3. 自动下载安装
   
4. （未尝试）如果作者提供了压缩包，应该可以手动创建目录，并把文件解压到这个目录中。