Vite+Vue3+Vant4+TypeScript安装流程

Vite+Vue3+Vant4+TypeScript+Eslint安装流程

一、npm源切换

$ npm get registry
# 返回 https://registry.npmjs.com/ 官方源或者 https://registry.npm.taobao.org/ 淘宝源
# 如果当前官方源不稳定，可以尝试切换至淘宝源开始安装流程
$ npm config set registry https://registry.npm.taobao.org
# 后续有需要可以返回官方源
$ npm config set registry https://registry.npmjs.com/

二、安装Vite+Vue+TypeScript项目模板

$ npm create vite@latest
? Project name: >> vite-vant        // 修改名字为自己项目名
? Select Framework: vue                // 选择框架为vue
? Select a variant: TypeScript        // 选择使用TypeScript

完成后当前目录下生成一个vite-vant文件夹，执行

$ cd vite-vant
$ npm install

三、安装Eslint

$ npm init @eslint/config
Ok to proceed: y
How would you like to use ESLint?
> To check syntax and find problems
What type of modules does your project use?
> Javascript modules (import/export)
Which framework does your project use?
> Vue.js
Does your project use TypeScript? Yes
Where Does your code run?
Browser
Node            # 都选，或者后续在.eslint.cjs里面添加
What format do you want your config file to be in?
> Javascript
Would you like to install them now with npm? Yes

# 然后等待npm下载对应的包

下载完成后，在 .eslint.cjs 文件下添加一行

module.exports = {
    ...
    "parser": "vue-eslint-parser",
    ...
}

我的vite模板当前版本就已经有检查出来报错的，在 App.vue 和 HelloWorld.vue 下，都有出现 template root requires exactly one element 的提示

此时，在 package.json 添加 eslint 指令：

{
    "scripts": {
        ...
        "lint": "eslint . --ext .vue,.ts,.tsx",
        ...
    },
}

运行反馈：

$ npm run lint
# ✖ 2 problems (2 errors, 0 warnings)

可以修复一下这两个报错，根节点下包含一个 <div>包含所有其它element

四、安装Vant

$ npm install vant
$ npm install unplugin-vue-components

然后修改 vite.config.ts 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'           // 添加
import {VantResolver} from 'unplugin-vue-components/resolvers'  // 添加


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 添加
    Components({
      resolvers: [VantResolver()],
    })
  ],
})

五、测试运行

在 App.vue 下添加

<script setup lang="ts">
// 其他代码
import {ref} from 'vue'
const rate = ref(2);
</script>

<template>
  <div>
    // 其他代码
    <van-rate v-model="rate" />
  </div>
</template>

运行查看：

$ npm run dev

六、完成后的相关配置

// package.json
{
  "name": "vite-vant",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.ts,.tsx"
  },
  "dependencies": {
    "unplugin-vue-components": "^0.24.1",
    "vant": "^4.1.0",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

// .eslint.cjs
module.exports = {
    "env": {
        "es2021": true,
        "node": true,
        "browser": true,
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {VantResolver} from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    })
  ],
})