Vite+Vue3+TS 初始化项目

项目初始化

项目介绍：本项目使用vite2.7.0和vue3.2.23 和 Typescript4.4.4（2021年12月初）最新的版本来实现后台管理项目。并会使用element-plus做UI库，axios做数据交互，vuex做状态管理，vue-router做路由管理, ESlint+Prettier做代码校验和格式化， Echarts做页面图表可视化， less来做css预编译。

初始化源码地址github

1. 准备工作

node -v # 14.17.5 要求要 node 12版本以上
npm -v
yarn -v # 1.22.17 当前最新版

本项目使用 **vscode**作为主编译器[vscode使用](//www.greatytc.com/p/8e127a3aba55)

2. 初始化

参考vite的文档create-vite来做init: vite文档地址

yarn create vite my-demo-app --template vue-ts # 直接初始化vite+vue+ts
cd my-demo-app
yarn
yarn dev # 能看到localhost:3000的默认欢迎页面则初始化成功

此时的vite.config.js和tsconfig.js文件均已初始化默认选项。

vite.config.js的常用配置

tsconfig.json的常用配置

启动项目不能通过本地ip地址访问：解决办法

引用UI库:element-plus

yarn add element-plus

使用方法更多方式参考：更多用法

// 这里仅展示完整引入
// 修改 main.ts文件
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus, { size: 'small', zIndex: 100 }).mount('#app')

<el-button type="primary"> 按钮 </el-button> /*如果页面上能看到蓝色的按钮，就说明引用成功了*/

使用方式几乎和element-ui保持一致

使用 Less来做css预编译

yarn add less less-loader -D

然后再组件中使用less测试是否成功

<style scoped lang="less">
.text {
  color: red;
}
</style>

修改一些默认目录结构，这个也可以后面什么时候用到什么时候再定义。

3. 使用 ESlint + Prettier 做代码校验和格式化

    哪里不能用校验参考禁用[校验方法](//www.greatytc.com/p/bb590f8e1c98)

引入eslint

yarn add eslint -D
yarn add @typescript-eslint/eslint-plugin -D
yarn add @typescript-eslint/parser -D
yarn add eslint-config-alloy -D
yarn add eslint-config-prettier -D
yarn add eslint-plugin-prettier -D
yarn add eslint-plugin-vue -D
yarn add vue-eslint-parser -D
yarn add vite-plugin-eslint -D

配置eslint，在根目录创建.eslintrc.js文件，并写入以下内容：

 module.exports = {
   root: true,
   globals: {
     defineEmits: 'readonly',
     defineProps: 'readonly',
     ElMessage: 'readonly',
     ElMessageBox: 'readonly'
   },
   extends: ['plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'airbnb-base'],
   parserOptions: {
     parser: '@typescript-eslint/parser',
     ecmaVersion: 2020
   },
   rules: {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
     'no-bitwise': 'off', // 禁用按位运算符
     'no-tabs': 'off', // 禁用 tab
     'array-element-newline': ['error', 'consistent'], // 强制数组元素间出现换行
     indent: ['error', 2, { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }], // 强制使用一致的缩进
     quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
     'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗号
     'object-curly-spacing': ['error', 'always'], // 强制在大括号中使用一致的空格
     'max-len': ['error', 120], // 强制一行的最大长度
     'no-new': 'off', // 禁止使用 new 以避免产生副作用
     'linebreak-style': 'off', // 强制使用一致的换行风格
     'import/extensions': 'off', // 确保在导入路径中统一使用文件扩展名
     'eol-last': 'off', // 要求或禁止文件末尾存在空行
     'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
     'no-unused-vars': 'warn', // 禁止出现未使用过的变量
     'import/no-cycle': 'off', // 禁止一个模块导入一个有依赖路径的模块回到自己身上
     'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
     semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
     eqeqeq: 'on', // 要求使用 === 和 !==
     'no-param-reassign': 'off', // 禁止对 function 的参数进行重新赋值
     'import/prefer-default-export': 'off', // 如果模块只输入一个名字，则倾向于默认输出
     'no-use-before-define': 'on', // 禁止在变量定义之前使用它们，则倾向于默认输出
     'no-continue': 'off', // 禁用 continue 语句
     'prefer-destructuring': 'off', // 优先使用数组和对象解构
     'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
     'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
     'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
     'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
     'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
     'one-var-declaration-per-line': 'off', // 要求或禁止在变量声明周围换行
     'one-var': 'off', // 强制函数中的变量要么一起声明要么分开声明
     'import/named': 'off', // 确保命名导入与远程文件中的命名导出相对应
     'object-curly-newline': 'off', // 强制大括号内换行符的一致性
     'default-case': 'off', // 要求 switch 语句中有 default 分支
     'no-trailing-spaces': 'on', // 禁用行尾空格
     'func-names': 'off', // 要求或禁止使用命名的 function 表达式
     radix: 'off', // 强制在 parseInt() 使用基数参数
     'no-unused-expressions': 'off', // 禁止出现未使用过的表达式
     'no-underscore-dangle': 'off', // 禁止标识符中有悬空下划线
     'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
     'no-restricted-syntax': 'off', // 禁用特定的语法
     'no-await-in-loop': 'off', // 禁止在循环中出现 await
     'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
     'import/no-unresolved': 'off', // 确保导入指向一个可以解析的文件/模块
     'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
     '@typescript-eslint/no-var-requires': 'on', // 除import语句外，禁止使用require语句
     '@typescript-eslint/no-empty-function': 'off', // 不允许空函数
     '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
     'guard-for-in': 'off', // 要求 for-in 循环中有一个 if 语句
     'class-methods-use-this': 'off', // 强制类方法使用 this
     'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
     'vue/html-self-closing': 'off', // 执行自闭合的风格
     'vue/max-attributes-per-line': [
       // 强制每行属性的最大数量
       'warn',
       {
         singleline: {
           max: 5,
           allowFirstLine: true
         },
         multiline: {
           max: 1,
           allowFirstLine: false
         }
       }
     ],
     'vue/singleline-html-element-content-newline': 'off' // 要求单行元素的内容前后有一个换行符
   }
 }

配置 .eslintignore文件

/build/
/config/
/dist/
/*.js
/*.zip
/*.rar
/node_modules/
/test/unit/coverage/

引入Prettier来自动格式化代码
```
yarn add prettier -D
```

配置 Prettier，在根目录下创建 prettier.config.js文件，并写入以下内容：

// prettier.config.js or .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf'
}

对应的vscode编译器也要安装 ESLint 和 Prettier 扩展
编辑 vscode 编辑器的settings.json文件。 ctrl+shift+p打开命令： Open Workspace Settings(JSON)选项，就会在根目录出现一个.vscode的文件夹，修改里面的 settings.json文件如下：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

此时可以代码自动格式化啦！

初始化源码地址[github](Lzq811/vite-vue-ts-eslint at vite2+vue3+ts4+eslint项目初始化 (github.com))