Vue开发之Vite使用

标签：无分类：未分类创建时间：2023-03-13 10:36:46 更新时间：2023-10-20 11:23:26

1.moment中文

在Vite的项目中使用momentjs，需要使用不同的引入方法

1	import "moment/dist/locale/zh-cn";

参考文章:
1.使用moment本地化无效

2.ESlint引入

1.安装
这里有几个依赖，主要就是 vite-plugin-eslint 和 esline,其他的按需要再去安装也可以。

1	pnpm add vite-plugin-eslint eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue @vue/eslint-config-typescript -D

2.配置vite.config.js

import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [eslint()],
});

3.新增 .eslintrc 文件
这里我直接采用了别人的文件，可以在网上搜。除了这个 .eslintrc 文件之外，还有地方编写的是 .eslintrc.js 文件。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/vue3-essential", "standard", "@vue/typescript/recommended"],
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  },
  rules: {
    "@typescript-eslint/no-explicit-any": "off", // ts：允许用any
    "@typescript-eslint/no-useless-constructor": "error", // ts：不允许使用未定位类型自动转为any
    "@typescript-eslint/no-var-requires": "off", // ts：是否允许使用var
    "@typescript-eslint/no-non-null-assertion": "off", // ts：非空赋值
    "@typescript-eslint/explicit-module-boundary-types": "off", // ts：是否需要显式定义函数将返回什么类型
    "@typescript-eslint/ban-ts-comment": "off", // ts： 禁止ts注释
    "@typescript-eslint/no-unused-vars": "off", // ts：允许定义未引用使用的变量
    "vue/multi-word-component-names": ["off", { ignores: ["index", "App"] }], // vue：多词组件名称
    "vue/comment-directive": ["off", { reportUnusedDisableDirectives: false }], // vue：允许在标签中写 HTML 注释。
    "vue/no-deprecated-slot-attribute": "off", // 允许使用slot
    "vue/valid-v-slot": "off",

    camelcase: "off", // 强制驼峰命名规则
    indent: "off", // 强制一致的缩进风格
    eqeqeq: "error", // 是否使用 === 替代 ==
    quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }], // 使用双引号
    curly: ["error", "all"], // 强制所有控制语句使用一致的括号风格  @fixable if 后面必须要有 {，除非是单行 if

    "padded-blocks": "off", // 块内行首行尾是否空行
    "global-require": "off", // require 必须在全局作用域下
    "comma-dangle": "error", // 强制在对象和数组文字中一致地使用尾随逗号
    "valid-jsdoc": "off", // 强制使用有效的 JSDoc 注释
    "consistent-return": "off", // 要求 return 语句要么总是指定返回的值，要么不指定
    "default-case": "off", // switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告
    "block-scoped-var": "error", // 将 var 定义的变量视为块作用域，禁止在块外使用
    "guard-for-in": "off", // for in 内部必须有 hasOwnProperty
    "constructor-super": "error", // constructor 中必须有 super
    "dot-location": ["off", "property"], // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处
    "comma-style": ["error", "last"], // 控制逗号在行尾出现还是在行首出现 (默认行尾)
    "space-before-function-paren": ["off", "always"], // 函数定义时括号前的空格
    "object-curly-newline": ["error", { multiline: true, consistent: true }], // @fixable 大括号内的首尾必须有换行
    "computed-property-spacing": ["error", "never"], // "SwitchCase" (默认：0) 强制 switch 语句中的 case 子句的缩进水平

    "no-debugger": "warn", // 是否允许debugger
    "no-console": "off", // 不允许出现console语句
    "no-var": "error", // @fixable 禁止使用 var
    "no-trailing-spaces": "off", // 一行最后不允许有空格
    "no-prototype-builtins": "off", // 是否允许使用Object.prototype
    "no-template-curly-in-string": "off", // 关闭${xxx}检测
    "no-mixed-spaces-and-tabs": "error", // 不允许混用tab和空格
    "no-new": "error", // 禁止在非赋值或条件语句中使用 new 操作符
    "no-new-wrappers": "error", // 禁止对 String，Number 和 Boolean 使用 new 操作符
    "no-self-assign": "error", // 禁止自我赋值
    "no-self-compare": "error", // 禁止自身比较
    "no-case-declarations": "error", // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
    "no-extend-native": "error", // 禁止修改原生对象
    "no-extra-bind": "error", // @fixable 禁止出现没必要的 bind
    "no-extra-label": "error", // @fixable 禁止出现没必要的 label
    "no-fallthrough": "error", // switch 的 case 内必须有 break, return 或 throw
    "no-floating-decimal": "error", // @fixable 表示小数时，禁止省略 0，比如 .5
    "no-global-assign": "error", // 禁止对全局变量赋值
    "no-multi-str": "error", // 禁止使用 \ 来换行字符串
    "no-const-assign": "error", // 禁止对使用 const 定义的常量重新赋值
    "no-dupe-class-members": "error", // 禁止重复定义类
    "no-duplicate-imports": "off", // 禁止重复 import 模块
    "no-useless-constructor": "off", // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) }
    "no-useless-escape": "off", // 可以使用\转义
    "no-callback-literal": "off", // 关闭eslint标准模式callback回调报错
    "no-dupe-keys": "error", // 禁止对象字面量中出现重复的 key
    "no-func-assign": "error", // 禁止对 function 声明重新赋值
    "no-nested-ternary": "error", // 禁用嵌套的三元表达式
    "no-multiple-empty-lines": ["error", { max: 3 }], // 空行最多不能超过两行
    "new-cap": "off", // 关闭eslint fromDegrees方法报错

    "no-tabs": "off" // 关闭 error  Unexpected tab character no-tabs
  }
}

参考文章:
1.Vite with ESLint
2.ESLint 的使用和.eslintrc.js配置
3.[Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 環境建置 plugin:vue/vue3-recommended: 對應 eslint-plugin-vue 套件，由 Vue.js 官方提供的 ESLint 插件，包含了能配合 Vue SFC 語法及特性的規則。Prettier 是程式碼格式化的工具，也可以與 ESLint 進行搭配，ESLint 與 Prettier 就能各司其職將 JaveScript 與 Vue 等檔案依照配置進行檢查與排版。為了讓 Prettier 與 ESLint 有更好的搭配，在 rules 的參數中記得添加 ‘prettier/prettier’: ‘error’ 讓 ESLint 可以提示 Prettier 的排版異常提示供我們

问题

(1) Failed to load config “@vue/typescript/recommended” to extend from
这个是因为我没有安装 @vue/eslint-config-typescript 导致的，在我 .eslintrc.js 文件中，却配置了 extends 内容。

参考文章:
1.Vue3 + TypeScript处理ESLint和Prettier冲突时，Failed to load config “@vue/prettier/@typescript-eslint“

3.Prettier

1.安装

1	pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

2.配置 Prettier 設定檔案

module.exports = {
  printWidth: 100,          // 每行文字數量達 100 字元就換到新的一行
  semi: false,              // 每個語句的結尾不需要分號
  singleQuote: true,        // 字串使用單引號，而不是雙引號
  trailingComma: 'none'     // 如 Object、Array 內的元素不需要尾隨逗號
}

3.配置 ESLint
在 extends 添加字串 prettier 表示使用 eslint-config-prettier 擴充配置，主要用來防止 Prettier 排版與 ESLint 發生衝突，讓其可以用來禁用 ESLint 的格式化；接著在 plugins 中添加 prettier 字串表示使用 eslint-plugin-prettier 套件擴充，讓 ESLint 可以提示我們格式有錯誤的地方。為了讓 Prettier 與 ESLint 有更好的搭配，在 rules 的參數中記得添加 ‘prettier/prettier’: ‘error’ 讓 ESLint 可以提示 Prettier 的排版異常提示供我們做修正。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:vue/vue3-recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  },
  overrides: [
    {
      files: [
        '**/pages/**/*.{js,ts,vue}',
        '**/layouts/**/*.{js,ts,vue}',
        '**/app.{js,ts,vue}',
        '**/error.{js,ts,vue}'
      ],
      rules: {
        'vue/multi-word-component-names': 'off'
      }
    }
  ]
}

4.安裝 VS Code 的 Prettier 插件

参考文章:
1.Prettier 是什么
2.[Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 環境建置
3.What is Prettier?

问题

(1) Expected “from” but found “{“ ,import type {Type, EvaluationKind} from ‘./types.js’;
意思就是在本来应该使用 import from 的地方，用了import type。我在安装了 pnpm add @mapbox/mapbox-gl-style-spe，引入了其中的内容的时候，就出现了这个问题。真是一波未平，一波又起。

我关闭了类型检查，还是编译不通过。最后这个问题也没有解决,就放弃了。

参考文章:
1.VS Code “import type“ 声明只能在 TypeScript 文件中使用。这里是配置了vscode 的 setting.json。
2.你不知道的「 import type 」 TypeScript 3.8 带来了一个新特性：仅仅导入 / 导出声明。
3.consistent-type-imports.md
4.No errors for TypeScript import types “allowTypeImports”: true
5.[Bug]: [v7.0.0-beta.15] Typescript import type can’t be parsed (by default)
6.babel 无法识别导出的类型定义

(2) Cannot find module ‘@babel/core’
添加了 .babelrc.js,安装了vite-plugin-babel ，出现了：Cannot find module ‘@babel/core’

1
2
3

module.exports = {
    "presets": ["@babel/preset-typescript"]
}

【解决方法】
安装一下 @babel/core 好了。

1	pnpm add @babel/preset-typescript @babel/core vite-plugin-babel -D

vite.config.js中配置

import babel from "vite-plugin-babel";

export default defineConfig(({ mode, command }) => {
  return {
    base: mode === "production" ? "/dxs" : "/",
    lintOnSave: false,
    plugins: [
      vue(),
      eslint(),
      babel({
      })
    ]
  }
}

参考文章:
1.Error: Cannot find module ‘@babel/core’
2.babel编译时出现:Error: Cannot find module ‘@babel/core‘

(3) This error came from the “onLoad” callback registered here
最后没有解决。

(4) 它使用了不允许的 MIME 类型（“text/html”）
这个错误是在浏览器中出现的，我是用vite创建了一个新的项目，把原先的vue2的配置拷过来了，结果就是这样的错误。在命令行就是: Failed to load url，Does the file exist？

resolve: {
  alias: {
    "@": path.resolve(__dirname, "src")
  }
},

【解决方案】
这个问题其实不是在别名的配置，而是路径的问题。

// vue2 中引入组件
import ZDQYTR from "@/views/dataeditor/ZDQYTR";

// vu23 中引入组件，必须具体到 .vue
import ZDQYTR from "@/views/dataeditor/ZDQYTR.vue";

参考文章:
1.vite failed to load config from vite.config.js,
2.Failed to load url resolved bug
3.“TypeError: Failed to fetch dynamically imported module” on Vue/Vite vanilla setup

4.路由懒加载

在使用的使用，都是使用：() => import(“/src/views/daily/index.vue”)，可能会报错，后来改成了：import.meta.glob(‘../views//.vue’)，使用 import.meta.glob 进行懒加载。

参考文章:
1.vite 动态 import 引入打包报错解决方案
2.vite dynamic import 怎么实现
3.import.meta.glob() does not work with variables

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。