Vue3+Vite+TS 快速搭建一套实用的脚手架

前言

Vue3出了已经有一段时间了，之前做的项目基本都是Vue2+webpack做的，正好现在马上要接一个新的项目，先手撸一套脚手架试试水~

技术栈

• 开发工具：VSCode
• 代码管理：Git
• 前端框架：Vue3
• 构建工具：Vite
• 路由：vue-router 4x
• 状态管理：vuex 4x
• AJAX：axios
• UI库：element-plus
• 数据模拟：mockjs
• 代码规范：eslint
• 代码格式化：Prettier
• css预处理：sass

开始构建

1. 初始化项目

安装vite：

npm init vite@latest 

安装完成后vite会引导我们创建一个项目，输入项目名称，package名称，然后选择项目使用的框架，这里有多个选项，我们自然是选择Vue：

之后提示选择vue还是vue-ts，这里我们选择vue-ts（如果不用ts就直接选vue）

项目创建成功，打开项目并初始化：

cd vite-cloud-admin
npm install

成功后运行项目：

npm run dev

一个Vue3+Vite+TS的项目就创建成功了：

2. 代码校验

首先安装eslint：

npm i eslint

初始化eslint

npx eslint --init

然后会问我们如何使用eslint，选择第三项，检查语法、发现问题并强制执行代码样式

什么样子的模块引入方式，这里选择第一项，import/export

然后问我们用什么框架，这里选择Vue.js

是否使用TS，YES

代码运行在哪里，选择浏览器

然后问我们使用什么代码格式，这里我们选择流行代码格式中的Standard

选择eslintrc文件的格式，这里选择JavaScript

立即初始化，YES

这样我们的eslint就安装完成了，不过由于vue3的语法规则和vue2不同，有些情况下我们的正常开发也会报错，所以需要在rules里面添加如下配置：

  rules: {
   
   
    'vue/no-multiple-template-root': 0,
    'no-unused-vars': [
      'error',
      // we are only using this rule to check for unused arguments since TS
      // catches unused variables but not args.
      {
   
    varsIgnorePattern: '.*', args: 'none' }
    ]
  }

第一项是因为vue3允许template下面有多个标签，第二个是script setup标签下，定义的变量或方法如果未使用会报错，但其实这些方法和变量可以直接在template中使用的。

3.代码格式化

安装prettier：

npm i prettier

然后在根目录创建.prettierrc文件，配置如下

{
   
   
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "useEditorConfig": true,
  "useTabs": false,
  "vueIndentScriptAndStyle": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
   
   
      "files": ".prettierrc"
    }
  ]
}

配置完成后可以在vscode安装Prettier插件，实现保存自动格式化文件。
完成后保存文件发现报错了，这是因为Prettier格式化后的代码与eslint规范冲突，这里我们使用eslint-config-prettier这个插件解决这个问题，安装插件：

npm i eslint-config-prettier -D

安装完成后还需要在.eslintrc.js文件中加上一段配置才能生效，这里就直接把整个.eslintrc.js拷上来了：

module.exports = {
   
   
  env: {
   
   
    browser: true,
    es2021<