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使用](https://www.jianshu.com/p/8e127a3aba55)

2. 初始化

1. 参考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地址访问：解决办法

2. 引用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')
   

    按钮  /*如果页面上能看到蓝色的按钮，就说明引用成功了*/
   

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

3. 使用 Less来做css预编译

yarn add less less-loader -D

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

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

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

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

1. 引入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

2. 配置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], // 在