Vue 3 + Typescript + Vite2.0 搭建移动端 代码规范以及注意的点

<!--
 * @Descripttion: Vue 3 + Typescript + Vite2.0 项目简介
-->

# Vue 3 + Typescript + Vite + vant3 搭建移动端通用架子

pc 管理系统请参考移步：VUE VBEN ADMIN2.0 （vite2.0+vue3+ts+antd-design-vue）
github 地址：git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0
项目文档：https://vvbin.cn/doc-next/
element-plus（支持 vue3） 文档：https://element-plus.gitee.io/#/zh-CN/component/installation

vite2.0 中文文档：https://cn.vitejs.dev/
vue3 官方文档：https://v3.cn.vuejs.org/api/
Typescript 官方文档：https://www.tslang.cn/docs/home.html
vant3 官方文档：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/home
vue-i18n@next 国际化配置文档：https://vue-i18n.intlify.dev/introduction.html

### 初始化项目 [yarn 和 npm 的区别不赘述]

npm init @vitejs/app or yarn create @vitejs/app ---> 输入项目名称 ---> 选择 vue-ts [vue3+TS]

### 安装依赖

npm i or cnpm i

### 启动项目

cnpm run dev

### 安装相关依赖 yarn 或者 cnpm npm 命令都行

yarn add xxx
npm i vue-i18n@next -S or cnpm i vue-i18n@next -S
npm i vue-router@4 -S or cnpm i vue-router@4 -S
npm i vuex@next -S or cnpm i vuex@next -S

### 注意问题

node api 报错 比如配置文件使用 require
node.js 不是内置对象的一部分，如果想用 typescript 写 Node.js，则需要引入第三方声明文件
解决办法：npm i @types/node -D or cnpm i @types/node -D
tsconfig.json types 中配置 node 字段

### 代码规范

vscode 提示无法在只读编辑器中编辑 json 文件
File → Preferences → Settings --> Eslint
Eslint 官方文档：https://eslint.org/docs/rules/
prettier 官方文档：https://prettier.io/docs/en/configuration.html
eslint-plugin-vue 官方文档：https://eslint.vuejs.org/user-guide/#usage 自动修复 eslint 报错
npm i eslint-plugin-vue -D or cnpm i eslint-plugin-vue -D

vscode Vetur 插件 ---> vue 高亮插件
vscode ESlint 插件 ---> Eslint 插件用于根据工程目录的.eslintrc.js 配置文件在编辑器中显示一些错误提示，后面的自定格式化根据这里的错误提示进行格式化操作

如果是 vue-cli 创建的项目 创建的时候把 Linter/Formatter 选上(默认已选上) 下一步选择 Eslint+Prettier --> Lint on save

// eslint 配置项，保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 默认使用 prettier 格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 自动设定 eslint 工作区
"eslint.workingDirectories": [
{ "mode": "auto" }
],
"explorer.confirmDelete": false,
"diffEditor.ignoreTrimWhitespace": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
"eslint.validate": ["javascript", "vue", "html","jsx", "javascriptreact"],
"editor.suggest.snippetsPreventQuickSuggestions": false,
"files.associations": {
"\*.vue": "html"
},
"editor.formatOnSave": true

//由于 prettier 不能格式化 vue 文件 template 所以使用 js-beautify-html 格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap*attributes": "force-aligned" //属性强制折行对齐
}
},
"prettier.singleQuote": true, //使用单引号而不是双引号
"prettier.jsxBracketSameLine": true, //将>多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行
"prettier.printWidth": 120, // 超过最大值换行
"prettier.tabWidth": 2, // 缩进字节数
"prettier.useTabs": true, // 缩进使用 tab
"prettier.semi": false, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如 GitHub comment）而按照 markdown 文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用 prettier 格式化的文件填写在项目的.prettierignore 文件中
"prettier.requireConfig": false, // Require a "prettierconfig" to format prettier
"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号
/* 每种语言默认的格式化规则 \_/
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

安装插件让 ESLint 支持 TypeScript
npm i typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

当我们执行 npm run format 时还会报各种奇怪的错误 如：error: Delete ⏎ (prettier/prettier) at src/pages/xxx 等；这是因为 prettier 配置和 vscode 编辑器 prettier 配置冲突导致的 在 rules 中配置下覆盖掉就可以了

出现了下面的警告：} expected css(css lcurlyexpected), 解决方案：settings.json 中配置如下
"files.associations": {
"_.vue": "vue",
"_.tpl": "html"
},

### git 提交代码钩子校验

npm i husky lint-staged -D
or
cnpm i husky lint-staged -D

## package.json 中配置 GitHub 文档：https://github.com/typicode/husky

"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "lint-staged"
}
},
"lint-staged": {
"\*.{js,jsx,md,html,css}": [
"prettier --write",
"git add"
]
}

### vm vw 布局适配方案 以及 css 预处理器 {这边先选择 less} UI 选型 {自己封装常用的 or 选择一种功能比较齐全的移动端 UI 库}

cnpm i postcss-viewport-units postcss-px-to-viewport postcss-write-svg autoprefixer -D
cnpm i less -D

cnpm i vant@next -S
cnpm i vite-plugin-imp -D // 按需加载 GitHub 文档：https://github.com/onebay/vite-plugin-imp
vant 官方网站：https://vant-contrib.gitee.io/vant/v3/#/zh-CN
其实在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续 vant 团队会考虑通过 Vite 插件的方式进行支持

### 环境变量和打包命令配置

根目录下新建文件
.env.development （开发）
.env.test （测试）
.env.production （生产）

package.json 中配置打包命令
"build:dev": "vue-tsc --noEmit && vite build --mode development",
"build:test": "vue-tsc --noEmit && vite build --mode test",
"build:prod": "vue-tsc --noEmit && vite build --mode production"
打包命令
cnpm run build:dev // 本地包
cnpm run build:test // 测试包
cnpm run build:prod // 生产包

### 使用 http-server 开启一个本地服务器 预览效果

npm install http-server -g
cd dist
http-server -c-1（只输入 http-server 的话，更新了代码后，页面不会同步更新）ctrl + c 即可关闭

### 调试工具

cnpm i vconsole -S
在 main.ts 引入
import Vconsole from 'vconsole';
new Vconsole();

### PWA

参考文档：https://github.com/antfu/vite-plugin-pwa
cnpm i vite-plugin-pwa -D
配置 vite.config.ts 文件
import { VitePWA } from 'vite-plugin-pwa'

plugins:[
VitePWA({
manifest: {},
workbox: {
skipWaiting: true,
clientsClaim: true
}
})
]

### 组件样式按需加载配置

参考文档：https://github.com/anncwb/vite-plugin-style-import
配置 vite.config.ts 文件
cnpm i vite-plugin-style-import -D
import styleImport from 'vite-plugin-style-import'

css:{
preprocessorOptions:{
less:{
modifyVars:{},
javascriptEnabled: true
}
}
},
plugins:[
styleImport({
libs:[
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: name => `ant-design-vue/es/${name}/style/index`
}
]
})
]

### 生产环境生成 .gz 文件.

[content-encoding:gzip]
压缩代码，在传输的时候用 gzip 压缩，提高资源访问速度。后端以 nginx 为例的话，在 nginx.conf 需要开启 gizp 服务：
gzip on; //开启 gzip 压缩功能
这样你就可以在 network 查看到 content-encoding:gzip 这个选项

参考文档：https://github.com/anncwb/vite-plugin-compression
cnpm i vite-plugin-compression -D
配置 vite.config.ts 文件
import viteCompression from 'vite-plugin-compression'

plugins:[
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
})
]

### 国际化配置

安装 js-cookie
cnpm i js-cookie -S
cnpm i @types/js-cookie -D
参考文档：https://www.npmjs.com/package/js-cookie
cnpm i vue-i18n@next -S

### http 请求库

cnpm i axios -S

### normalize.css 更好的 reset.css 方案

cnpm i normalize.css -S
参考文档：https://github.com/necolas/normalize.css

项目环境以及打包命令配置

项目根目录下创建 .env.test  【测试环境】 .env.development  【开发环境】  .env.production 【生产环境】

分别对应内容

NODE_ENV=test
  
VITE_APP_BASE_URL='https://www.test.com/'

NODE_ENV=development
  
VITE_APP_BASE_URL='api'

NODE_ENV=production
  
VITE_APP_BASE_URL='https://www.prod.com/'

文件里获取  console.log(import.meta.env.VITE_APP_BASE_URL, '环境变量')

package.json文件下面配置

    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:prod": "vue-tsc --noEmit && vite build --mode production"

关于代码规范：都可以自定义规则以下是自己简单的配置规则（提供参考具体查看对应官方文档配置属性）

.eslintignore文件

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

.eslintrc.js文件

/*
 * @Descripttion: eslint代码规范
 */

module.exports = {
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'
    ],
    rules: {
        '@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',
        // 'no-use-before-define': [
        //   'error',
        //   {
        //     functions: false,
        //     classes: true,
        //   },
        // ],
        '@typescript-eslint/no-use-before-define': 'off',
        // '@typescript-eslint/no-use-before-define': [
        //   'error',
        //   {
        //     functions: false,
        //     classes: true,
        //   },
        // ],
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/ban-types': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$'
            }
        ],
        'no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$'
            }
        ],
        'space-before-function-paren': 'off',
        quotes: ['error', 'single'],
        'comma-dangle': ['error', 'never'],
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
    }
}

.prettierignore文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

.prettierrc.js文件

/*
 * @Descripttion: prettier.config.js or .prettierrc.js  package.json 中配置prettier属性
 */

// 如果vscode配置中有的这边可以不用再配置
module.exports = {
    useTabs: false,
    vueIndentScriptAndStyle: true,
    quoteProps: 'as-needed',
    jsxSingleQuote: false,
    arrowParens: 'always',
    htmlWhitespaceSensitivity: 'strict',
    endOfLine: 'lf',
    printWidth: 200, // 换行字符串阈值
    tabWidth: 2, // 设置工具每一个水平缩进的空格数
    singleQuote: true, // 用单引号
    semi: false, // 句末是否加分号
    trailingComma: 'none', // 最后一个对象元素加逗号
    bracketSpacing: true, // 对象，数组加空格
    jsxBracketSameLine: false, // jsx > 是否另起一行
    disableLanguages: ["vue"] // 不格式化vue文件，vue文件的格式化单独设置
}

postcss.config.js文件

/*
 * @Descripttion: postcss.config.js 
 */
module.exports = {
    plugins: {
        autoprefixer: {
            /* PostCSS plugin to parse CSS and add vendor prefixes to CSS rules */
            /* 配置文档链接：https://github.com/postcss/autoprefixer#options */
            overrideBrowserslist: [
                'last 2 versions' // 最后两个版本
            ]
        },
        'postcss-viewport-units': {
            /* vw兼容方案 */
            /* 配置文档链接：https://github.com/springuper/postcss-viewport-units#options */
        },
        'postcss-px-to-viewport': {
            /* 将px单位转换为视口单位的 (vw, vh, vmin, vmax) */
            /* 配置文档链接：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0 */
            viewportWidth: 375,
            viewportUnit: 'vw',
            unitPrecision: 3,
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false,
            // selectorBlackList: ['.vant'], // 以xxx开头
            include: [], // 包括
            exclude: [] // 排除
        },
        'postcss-write-svg': {
            /* 在retina屏绘制1px细线 */
            /* 配置文档链接：https://github.com/jonathantneal/postcss-write-svg#options */
        },
    }
}

tsconfig.json文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom", "ES2015.promise"],
    "types": ["vite/client", "node"],
    "typeRoots": ["./node_modules/@types/", "./src/types"],
    "paths": {
      "@": ["./src"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

vite.config.ts配置

/*
 * @Descripttion: vite.config.ts vite2.0
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
const path = require('path')
const resolve = (dir: string) => path.join(__dirname, dir)

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  plugins: [
    vue(),
    // 默认情况下，小于1501字节的文件不会被压缩
    viteCompression({
      // 是否在控制台输出压缩结果
      verbose: true,
      // 是否禁用
      disable: false,
      // 体积大于 threshold 才会被压缩,单位 b
      threshold: 10240,
      // 压缩算法
      algorithm: 'gzip',
      // 生成的压缩包后缀
      ext: '.gz',
      // 压缩后是否删除源文件
      deleteOriginFile: false
    })
  ],
  // 别名
  resolve: {
    alias: {
      '@': resolve('src'),
      // 解决vue-i18n警告You are running the esm-bundler build of vue-i18n.
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
    }
  },
  // 代理解决dev模式跨域
  server: {
    host: '0.0.0.0',
    // https: false,
    port: 9999, //启动端口
    open: true, // 是否自动打开浏览器
    cors: true,
    proxy: {
      // 如果是 /api 打头，则访问地址如下
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        // ws: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // Used for global import to avoid the need to import each style file separately
          // reference:  Avoid repeated references
          hack: `true; @import (reference) "${resolve('src/assets/style/index.less')}";`
        },
        javascriptEnabled: true
      }
    }
  },
  build: {
    target: 'es2015',
    outDir: 'dist',
    // 生产环境移除 console
    terserOptions: {
      compress: {
        drop_console: process.env.NODE_ENV === 'production' ? true : false,
        drop_debugger: process.env.NODE_ENV === 'production' ? true : false
      }
    }
  }
})

vscode  setting json配置：

{
    "workbench.colorTheme": "Atom One Dark",
    "workbench.iconTheme": "vscode-icons",
    "git.ignoreWindowsGit27Warning": true,
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "fileheader.customMade": {
        "Descripttion": "",
        "version": "",
        "Author": "lhl",
        "Date": "Do not edit",
        "LastEditors": "lhl",
        "LastEditTime": "Do not Edit"
    },
    "fileheader.cursorMode": {
        "name": "",
        "test": "test font",
        "msg": "",
        "param": "",
        "return": ""
    },
    "explorer.confirmDelete": false,
    "diffEditor.ignoreTrimWhitespace": true,
    "eslint.codeAction.showDocumentation": {
    
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.format.enable": true,
    "eslint.validate": ["javascript", "vue", "html", "typescript"],
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "files.associations": {
        "*.vue": "vue",
        "*.tpl": "html"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    "prettier.singleQuote": true,
    "prettier.printWidth": 200,
    "prettier.tabWidth": 2,
    "prettier.useTabs": true,
    "prettier.semi": false,
    "prettier.proseWrap": "preserve",
    "prettier.arrowParens": "avoid",
    "prettier.bracketSpacing": true,
    "prettier.endOfLine": "auto",
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore",
    "prettier.requireConfig": false,
    "prettier.trailingComma": "none",
    "editor.formatOnSave": false,
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    }
}

package.json文件

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:prod": "vue-tsc --noEmit && vite build --mode production"
  },
  "dependencies": {
    "@types/js-cookie": "^2.2.6",
    "@vant/area-data": "^1.0.0",
    "axios": "^0.21.1",
    "js-cookie": "^2.2.1",
    "normalize.css": "^8.0.1",
    "vant": "^3.0.12",
    "vconsole": "^3.4.0",
    "vue": "^3.0.5",
    "vue-i18n": "^9.0.0",
    "vue-router": "^4.0.5",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/js-cookie": "^2.2.6",
    "@types/node": "^14.14.37",
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.2.5",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "husky": "^6.0.0",
    "less": "^4.1.1",
    "lint-staged": "^10.5.4",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "^3.0.1",
    "prettier": "^2.2.1",
    "typescript": "^4.1.3",
    "vite": "^2.1.5",
    "vite-plugin-compression": "^0.2.4",
    "vite-plugin-imp": "^2.0.5",
    "vue-tsc": "^0.0.15"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,md,html,css}": [
      "prettier --write",
      "git add"
    ]
  }
}

以上代码纯属自己整理和测试，未经允许请勿随意转载，若有不正请及时告知！！

EditorConfig for Visual Studio Code （有喜爱的可以配置上这个下载vscode插件即可配置）

根目录下创建  .editorconfig文件 

配置参考：https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig