Vue3 + Vite + Typescript + Element Plus创建项目

1、体验对比

• vite 启动、打包体验都比vue-cli快
• vite与vue-cli体验对比

1、启动

• vue-cli：
  

• vite：
  

2、打包

• vue-cli：
  

• vite：

2、vue-cli

vue create vue3-cli

• Default Vue 3
• or
• Manually select features
  

3、vite

npm i -g create-vite-app
yarn create @vitejs/app

yarn create vite hello-vue3 --template vue

• 项目结构

vue3-admin
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─.prettierrc.js
├─README.md
├─auto-imports.d.ts
├─components.d.ts
├─index.html
├─package.json
├─tsconfig.json
├─vite.config.ts
├─src
|  ├─App.vue
|  ├─env.d.ts
|  ├─main.ts
|  ├─views
|  |   ├─login
|  |   |   └index.vue
|  ├─styles
|  |   ├─main.css
|  |   └reset.css
|  ├─store
|  |   └index.ts
|  ├─router
|  |   └index.ts
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico

1、Eslint & Prettier

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', 
    ecmaVersion: 2020, 
    sourceType: 'module', 
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended', 
    'plugin:prettier/recommended'
  ],
  rules: {}
}

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

// 具体配置可以参考 https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 100,
  tabWidth: 4,
  semi: false, // 未尾逗号
  singleQuote: true, // 单引号
  bracketSpacing: true,
  trailingComma: 'none', // 未尾分号
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict'
};

2、添加eslint相关命令

skipLibCheck 增加skipLibCheck可以跳过引入库的ts检查

{
  ...
  "scripts": {
    "build": "vue-tsc --noEmit --skipLibCheck && vite build",
    "lint": "eslint src",
    "lint:fix": "eslint src --fix --ext .ts,.tsx"
  },
}

3、配置路径别名

vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "/src"),
        }
    }
})

tsconfig.json文件

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
    },
  },
  // ...
}

4、less / scss 配置

yarn add less less-loader -D
yarn add sass sass-loader node-sass -D

5、router配置

安装最新的版本

yarn add vue-router@4.0.12

• 创建router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/home',
        name: 'home',
        meta: {
            type: 'home'
        },
        component: () => import('@/views/home.vue')
    },
    {
        path: '/login',
        name: 'login',
        meta: {
            type: 'login'
        },
        component: () => import('@/views/login/index.vue')
    },
    {
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('@/views/404.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(), 
    routes
})

export default router

6、element-plus 组件库

yarn add element-plus

按需导入组件库样式插件

yarn add unplugin-vue-components unplugin-auto-import -D

• vite.config.ts文件

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
    plugins: [
        // ...
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
}

7、写法示例

login.vue

<template>
    // ...
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'

const ruleFormRef = ref<InstanceType<typeof ElForm>>()
interface FormData {
    account: string
    password: string
}
const ruleForm = reactive<FormData>({
    account: '',
    password: ''
})

const loginRules = reactive({
    account: [
        {
            required: true,
            message: '企业账号不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        }
    ]
})

interface StatsBase {
    loading: boolean
    isSecure: boolean
}
const state = reactive<StatsBase>({
    loading: false,
    isSecure: true
})

const setSecure = () => {
    state.isSecure = !state.isSecure
    console.log(state.isSecure)
}

const submitForm = async (ruleFormRef: any) => {
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
        }
    })
}
</script>

<style lang="scss" scoped>

</style>

8、更多

• vue3.x与vue2.x生命周期区别
• 项目源码仓库地址