1、体验对比
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、更多相关链接
微信公众号: 情非得已小猿猿(FrontendApe)