从0到1搭建vue3+ts项目

自从vue3出来以后，外面不少公司已经开始从vue2转到了vue3，虽然我在的公司还在使用2.x版本，但是也不妨碍我自学vue3 这应该不算是卷吧？哈哈哈哈，毕竟vue3未来肯定是趋势！本文主要记录了从0到1搭建一个简单vue3环境的项目中配置eslint、prettier、ts等遇到的一些配置问题以及部分代码问题。过程中也是借鉴了网上许多资料一步一坑踩过来最终解决，谨以此篇记录我的日常踩坑之路/(ㄒ o ㄒ)/~~

创建项目

• 我的电脑本地环境版本vscode: 1.68.1node: 16.13.2pnpm: 6.32.2vue-cli: 5.0.0-bate.3yarn: 1.22.10 node 版本下载链接: nodejs.org/en/download…* 创建项目pnpm create vite> 这种创建项目方式，一些配置文件需要手动创建配，如：.eslintrc.js文件输入项目名称xxx选择项目模板 vue -> vue-ts``cd project下载依赖 pnpm i配置 eslint

---

• 为什么要用 eslint？> 目的： 为了规范团队成员代码格式，以及保持统一的代码风格，此项目采用当前业界较火的 Airbnb 规范，并引入代码风格管理工具 Prettier* 为什么 ts 项目不用 tslint 而用 eslint ？因为 tslint 已经不维护了！！！> eslint 只有开发阶段需要，因此添加到开发阶段的依赖中即可； 根目录创建 .eslintrc.js 文件* 安装eslinteslint: eslint 的核心代码eslint-plugin-vue ：vue 官方 ESLint 插件，检查 .vue 文件中 template、script 中的语法错误、指令等安装上述依赖：pnpm i eslint eslint-plugin-vue -D* 配置 eslint 对.ts 文件的支持@typescript-eslint/eslint-plugin：这是一个 ESLint 插件，包含了各类定义好的检测 Typescript 代码的规范@typescript-eslint/parser： eslint 解析器用于支持解析 typescript，从而检查和规范 Typescript 代码安装上述依赖： pnpm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D* eslint 具体校验规则配置> eslint 规则有很多，我们可以根据自己的需求自行配置，但是过于麻烦！目前业界有三个流行开源配置方案，分别是 Airbnb、 Standard、 Google> 严格程度对比是 Airbnb > Google > Standard，所以普遍使用 Airbnb 较多,所有我这里使用安装 Airbnbpnpm i eslint-config-airbnb-base -D配置prettier及解决 prettier和eslint冲突

---

• prettier 安装：pnpm i prettier -D* 解决 eslint 和 prettier 冲突eslint-config-prettier: 关闭所有和 prettier 冲突的 eslint 规则eslint-plugin-prettier: 告诉 eslint 应该怎么按照 prettier 的方式去格式化文档pnpm i eslint-config-prettier eslint-plugin-prettier -D* 具体 prettierrc 规则配置根目录创建 .prettierrc.js 、以及忽略文件 .prettierignore````module.exports = {// printWidth: 100, // 一行最多 100 字符// tabWidth: 2, // 使用 4 个空格缩进// semi: false, // 行尾需要有分号semi: false, // 行尾需要有分号trailingComma: "none", // 末尾不需要逗号singleQuote: true, // 使用单引号而不是双引号// useTabs: false, // 用制表符而不是空格缩进行// quoteProps: 'as-needed', // 仅在需要时在对象属性两边添加引号// jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号// bracketSpacing: true, // 大括号内的首尾需要空格// bracketSameLine: false, // 将多行 HTML（HTML、JSX、Vue、Angular）元素反尖括号需要换行// arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号 avoid// rangeStart: 0, // 每个文件格式化的范围是开头-结束// rangeEnd: Infinity, // 每个文件格式化的范围是文件的全部内容// requirePragma: false, // 不需要写文件开头的 @prettier// insertPragma: false, // 不需要自动在文件开头插入 @prettier// proseWrap: 'preserve', // 使用默认的折行标准 always// htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行// vueIndentScriptAndStyle: false, //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容// // endOfLine: 'lf', // 换行符使用 lf 在Linux和macOS以及git存储库内部通用\n// embeddedLanguageFormatting: 'auto' //（默认值）允许自动格式化内嵌的代码块}; ```保证 plugin:prettier/recommended放在 .eslintrcextends 中最后* 运行时对代码进行 eslint 校验> 这样配置完重启编辑器项目应该不会有报错，因为需要**执行 eslint 命令** 才能去检测文件中不符合规则的代码，这不是我们期望的> 我们期望的是：代码运行期间如果不符合 eslint 规范就会直接报错提示。这里使用的是 rollup 的 eslint 插件：pnpm i @rollup/plugin-eslint -D`vite 配置文件里 plugins 开启 eslint:// ...,{// 开启eslint...eslint({// include: ['src/**/*.vue', 'src/**/*.js'],// fix: true, // 自动修复include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue'], // 需要检查的文件// exclude: ['src/**/*.js','src/**/*.vue'], // 忽略文件throwOnError: true, // 有错误抛出throwOnWarning: true, // 有警告抛出}),enforce: 'pre',}, 这时重启项目，运行时某个文件代码如果不符合我们现在的 eslint 规则就会直接报错，必须修复后才可以运行成功，至此到达了我们预期的效果。* 贴一下此时 packge.josn 的所有依赖"scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build","preview": "vite preview",// 环境变量"dev1": "vite --mode development","test": "vite --mode test","prod": "vite --mode production",// lint 检查./src下所有这些结尾的文件"lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue ./src",// eslintfix修复问题(只能修复部分)"fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue ./src --fix"},"dependencies": {"@element-plus/icons-vue": "^2.0.4", // 饿了么plus-icon"@types/node": "^17.0.42","axios": "^0.27.2","element-plus": "^2.2.5","mockjs": "^1.1.0","pinia": "^2.0.14","vue": "^3.2.25","vue-router": "^4.0.16","vuex": "^4.0.2"},"devDependencies": {// rollup插件开启eslint检查"@rollup/plugin-eslint": "^8.0.2",// ts解析器 让eslint支持对ts文件检查"@typescript-eslint/eslint-plugin": "^5.28.0","@typescript-eslint/parser": "^5.28.0","@vitejs/plugin-vue": "^2.3.3","consola": "^2.15.3",// airbnb 比较火的eslint开源配置方案"eslint-config-airbnb-base": "^15.0.0",// "eslint-import-resolver-typescript": "^2.7.1",// 对 mport/export的语法进行linting，并防止文件路径和导入名称拼写错误的问题"eslint-plugin-import": "^2.26.0",// prettier 以及 解决prettier和eslint冲突"prettier": "^2.7.0","eslint-config-prettier": "^8.5.0","eslint-plugin-prettier": "^4.0.0",// 基础eslint"eslint": "^8.17.0","eslint-plugin-vue": "^9.1.1","less": "^4.1.3","less-loader": "^11.0.0","typescript": "^4.5.4",// 饿了么css样式按需引入"vite-plugin-style-import": "^2.0.0",// 饿了么plus 组件按需引入"unplugin-auto-import": "^0.8.8","unplugin-vue-components": "^0.19.6","vite": "^2.9.9","vue-tsc": "^0.34.7"} 报错问题汇总
  ======

项目配置eslint后遇到的具体报错

eslint 问题所有相关配置都在根目录 .eslintrc.js 文件下配置> 此项目 eslint 使用的是 @rollup/plugin-eslint 这个插件

• vue3 一直报错 error: Parsing error: Unexpected token ?import type { FormInstance, FormRules } from 'element-plus'我在引入上面 element-plus 类型时 type 这里 eslint 一直报这个错。vue3+ts 解决方法: 需要先安装 ts 解析器依赖yarn add @typescript-eslint/parser -D````parserOptions: [parser: '@typescript-eslint/parser',] ```* vue3+ts 解决 The template root requires exactly one element.eslintvue/no-multiple-template-root 问题？```extends: [// 解决根元素报错问题'plugin:vue/vue3-essential',//vue3 推使用这个规则支持.vue文件校验'plugin:vue/vue3-recommended'] ```* error Parsing error: ‘＞‘ expected ？让 eslint 检测.vue 代码**解决**： parser: ‘vue-eslint-parser’,* Missing file extension "ts" for "xxx" import/extensions ？导入/扩展缺少文件扩展名“ts”使用了 airbnb-base规则后，如引入 import components from './components’文件报错，必须写到 components 下的 index.ts**解决**：rulse 规则配置忽略```rules: {'import/extensions': ['error','ignorePackages',{js: 'never',jsx: 'never',ts: 'never',tsx: 'never'}]} ```* Unable to resolve path to module xxx import/no-unresolved ？配置别名后：无法解析模块 xxx 导入的路径/未解析路径**解决**：vite.config 里配置别名 网上说还需要在 ts.config.json paths 配置同上的别名，但是配置了 eslint 还是会不通过；安装：pnpm i eslint-import-resolver-alias` 这个包是一个配合 eslint-plugin-import 使用的 resolver，用来 resolve 带别名的路径配置 eslint:// .eslomtrc.jssettings: {'import/resolver': {// 别名同vite.configalias: {map: [['@', './src'],['@mock', './src/mock'],//...],extensions: ['js', '.ts', '.jsx', '.tsx']}}}, 其他报错问题

---

• 找不到模块“xxx”或其相应的类型声明？没有相关的声明文件，在 ts 项目里面，.ts 文件是识别不了.vue 文件，.vue 文件也识别不了.ts 文件，这时候就需要在 src 下 创建 env.d.ts 声明文件来解决:/// <reference types="vite/client" />declare module '*.vue' {import type { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component} 但是我遇到的问题是自己写的 ts 文件： import { getProducts, IProduct } from '@mock/pages/shop'也提示找不到模块“@mock/pages/shop”或其相应的类型声明。但不影响运行，在 ts 文件中定义好有关的 interface 接口使用，在其他文件中引入的时候出现了该问题一般出现这个问题都是路径问题！！ 建议别名只配置一个 [‘@’, ‘./src’]引入第三方库Element Plus遇到的问题
  =======================

Element Plus官网推荐的自动引入组件方式部分组件css无法引入

官网推荐使用这个两个插件 npm install -D unplugin-vue-components unplugin-auto-import 实现自动按需导入

// vite.config.ts
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}); 

如：引入 ElMessage 为例：import { ElMessage } from 'element-plus' ElMessage.warning('warning')如果不采用 import 的方式引入，会直接报错：ElMessage 没有定义，所以这个 import 是省不了的，但是 import 了之后，消息弹窗是出来了，但此时发现没有对应的样式！

• 解决方案 1 （不推荐）：使用官网说的手动导入的 unplugin-element-plus的插件，但是很麻烦，不同组件需要手动引入不同的 css

import "element-plus/es/components/message/style/css";
// import 'element-plus/es/components/用到的组件/style/css'
import { ElMessage } from "element-plus"; 

• 解决方案 2 （推荐）：使用 vite-plugin-style-import 插件可以实现按需引入 css； 安装完成后在 vite.config.js 下 plugins: [] 使用。该插件可以按需引入 VantResolve、 ElementPlusResolve 等 ui 样式因为该插件的使用了 consola 包，所以还需要安装 npm i consola -D OR yarn add consola -D

1.x 版本写法

import styleImport from 'vite-plugin-style-import'
styleImport({libs: [{libraryName: 'element-plus',esModule: true,resolveStyle: (name) => {return `element-plus/theme-chalk/${name}.css`},// resolveComponent: (name) => {// return `element-plus/lib/components/${name}`// },}]}), 

2.x 写法

import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import';
createStyleImportPlugin({resolves: [VantResolve()],}), 

本地环境无任何报错，部署上线后报错

• 报错 Cannot read properties of null (reading ‘insertBefore‘) ？本地项目启动操作无任何报错，部署后开始报这个错，经过排查上网查资料原因总结如下：> v-if 导致 在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。解决方法：v-show 替换 v-if> el-table 组件导致 el-table-column 渲染时报错，若 scope.row.xxx （xxx 为任意字段值）不存在，对其直接执行 split、toString() 等方法时报错。 我是因为这个报错解决方法： 可选链操作符： scope.row.field?.split> el-dialog 组件导致> 默认弹框是关闭的，DOM 中没有弹框中的内容。打开弹框再关闭后，弹框中的 DOM 元素没有被销毁，可能会因为不该存在的 DOM 元素而报错解决方法：给 el-dialog 组件增加 destroy-on-close 属性总结
  ==

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享