uniApp框架搭建（基于vue2）

前言

这一年对自己挑战性还是很大的，接触了小程序、低代码平台搭建、微信公众号h5页面，成长了许多，但因为忙一直没时间记录，现在年末有时间抽空码码字了，
下面我将把我第一次搭建uniapp框架的经验记录下来，以后可能会慢慢优化。

  • 1、安装uniapp
    1.1 首先安装vue-cli环境，如已安装则可跳过此步骤

    1
    $npm install -g @vue/cli

    1.2 使用命令创建uniapp模板（正式版）

    1
    $vue create -p dcloudio/uni-preset-vue my-project

  • 2、安装UI库
    本项目采用的是 uView UI库，舍弃npm安装方式，用源码导入方式，方便改动
    https://ext.dcloud.net.cn/plugin?id=6682
    进入网页点击插件下载，一般解压到src路径下。

    2.1 uView依赖SCSS，所以必须安装此插件，否则无法正常运行。vue-cli命令安装的务必安装。推荐使用yarn

    1
    2
    3
    4
    5
     // 安装node-sass
     npm i node-sass -D

    // 安装sass-loader
     npm i sass-loader -D

    2.2 全局配置uView

    2.2.1 引入uView主JS库，根据自己的路径进行调整。
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

    1
    2
    import uView from "./uview-ui"; 
    Vue.use(uView);    
    
2.2.2 在引入uView的全局SCSS主题文件

    1
    2
     /* uni.scss */
    @import './uview-ui/theme.scss';
    
2.2.3 引入uView基础样式

    1
    2
       /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "./uview-ui/index.scss";
    
2.2.4 配置easycom组件模式(需要重启项目才生效)
* 此配置需要在项目根目录的pages.json中进行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
       // pages.json
    {
       "easycom": {
           "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
       },
       
       // 此为本身已有的内容
       "pages": [
           // ......
       ]
     }

  • 3、配置路由
    本项目采用的是热门插件-uni-simple-router 搭配路由表 自动构建路由表

  • 4、Request:基于原生请求封装的luch-request，进行了路由拦截。
    4.1 无痛刷新token

      
    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
        import Request from 'luch-request'
        const http = new Request()
        http.interceptors.response.use(
    async (response) => {
        const err_msg = utils.path(response, 'data.err_msg', '')
        const err_code = utils.path(response, 'data.err_code', '')
        if (err_msg) {
        switch (err_code) {
            case 401:
            // TODO: 重新授权 无痛刷新
            const config = response.config
            if (!isRefresh) {
                isRefresh = true
                const token = utils.getStorageSync('token')
                const getToken = UserModule.refreshToken(token)

                return getToken.then(({ data }) => {
                config.baseURL = ''
                const { data: { access_token } } = data
                utils.setStorageSync('token', access_token)
                // 已经刷新了token，将所有队列中的请求进行重试（核心代码）
                retryRequest.forEach(cb => cb(access_token))
                retryRequest = []
                return http.request(config)
                }).catch(() => {
                utils.toast(err_msg, 'none', 2000)
                }).finally(() => {
                isRefresh = false
                })
            } else {
                return new Promise((resolve) => {
                // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行（核心代码）
                retryRequest.push((token) => {
                    config.baseURL = ''
                    utils.setStorageSync('token', token)
                    resolve(http.request(config))
                })
                })
            }

            case 400:
            break

            default:
            break
        }

        const timer = setTimeout(() => {
            utils.toast(err_msg, 'none', 2000)
        })
        const error = response.data
        // 服务端返回的状态码不等于200，则reject()
        return Promise.reject(error)

        }

        return response
    },
    (err) => {
        return Promise.reject(err)
    }
    )

5、格式化规范：

  • 代码规范：ESLINT、prettier。
  • git提交规范：husky。
  • 提交规范：commitlint。

.eslintrc.js

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    uni: true,
    wx: true
  },
  extends: ['plugin:vue/strongly-recommended', '@vue/standard'],
  rules: {
    // 'no-tabs': 'off',
    'no-tabs': [2, { 'allowIndentationTabs': true }],
    'no-console': 'off',
    'no-multi-spaces': 1, // 禁止使用多个空格
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'generator-star-spacing': 'off',
    'no-mixed-operators': 0,
    'no-unused-expressions': 0, // 禁止无用的表达式
    'no-unused-vars': 'off',
    'no-useless-escape': 'off',
    'no-irregular-whitespace': 'off', // 禁止不规则的空白
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    'space-before-function-paren': 'off',

    'vue/attributes-order': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/script-setup-uses-vars': 'off',
    'vue/valid-v-model': 0,
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ],
    camelcase: 'off',
    // 'vue/max-attributes-per-line': [
    //   'off',
    //   {
    //     singleline: 3,
    //     multiline: {
    //       max: 20,
    //       allowFirstLine: false
    //     }
    //   }
    // ],
    'vue/html-indent': 0,
    'indent': ['error', 2, {
      'SwitchCase': 1
    }],
    // 'vue/attribute-hyphenation': 0,
    // 'vue/html-self-closing': 0,
    'vue/component-name-in-template-casing': 0,
    // 'vue/custom-event-name-casing': 'off',
    'vue/html-closing-bracket-spacing': 0,
    // 'vue/singleline-html-element-content-newline': 0,
    'vue/no-unused-components': 0,
    // 'vue/multiline-html-element-content-newline': 0,
    'vue/no-use-v-if-with-v-for': 0,
    // 'vue/html-closing-bracket-newline': 0,
    'vue/no-parsing-error': 0,
    // 'space-before-function-paren': 0,

    // 'prettier.semi': 0,
    // 'prettier.singleQuote': true,
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: false
      }
    ],
    'semi': 0,
    // semi: [
    //   2,
    //   'never',
    //   {
    //     beforeStatementContinuationChars: 'never'
    //   }
    // ],
    'no-delete-var': 2,
    'prefer-const': [
      2,
      {
        ignoreReadBeforeAssign: false
      }
    ]
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures: {
      legacyDecorators: true
    }
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true
      }
    }
  ]
}


prettier.config

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 结尾分号
  vueIndentScriptAndStyle: false,
  singleQuote: false,
  quoteProps: 'none',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
  rangeStart: 0
}