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')
   

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

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

3. 使用 Less来做css预编译

yarn add less less-loader -D

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

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

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.json文件，并写入以下内容：

   // https://eslint.org/docs/user-guide/configuring
   
   module.exports = {
     extends: [
       'eslint:recommended',
       "plugin:vue/vue3-recommended",
       "prettier"
     ],
     // required to lint *.vue files
     plugins: [
       'vue'
     ],
     // add your custom rules here
     rules: {
       // allow async-await
       'generator-star-spacing': 'off',
       // allow debugger during development
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       'no-labels': ['warn', {'allowLoop': true}],
       'no-unused-vars': 'off',
       'vue/no-mutating-props': 'off',
       'vue/require-default-prop': 'off',
       'vue/no-unused-vars': 'off',
       'vue/prop-name-casing': 'off',
       'vue/attribute-hyphenation': 'off',
       'vue/no-template-shadow': 'off',
       'vue/component-definition-name-casing': 'off'
     }
   }
   
   

3. 配置 .eslintignore文件

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

4. 引入Prettier来自动格式化代码

   yarn add prettier -D
   

5. 配置 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'
   }
   
   

6. 对应的vscode编译器也要安装 ESLint 和 Prettier 扩展

7. 编辑 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))