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

Z时代
2024-01-10
分类：综合

vue

<!--

* @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]": {