效果图
目录
一、.vscode / extensions.json
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
二、mocks
- mocks / index.ts
import { MockMethod } from 'vite-plugin-mock'
import login from './login'
import user from './user'
import routerInfo from './routerInfo'
export default [
...login,
...user,
...routerInfo
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档
- mocks / login.ts
export default [
{
url: '/api/login', // 注意，这里只能是string格式
method: 'post',
response: () => {
return {
code: 200,
message: 'ok',
data: {
token:'zx_1719-VfGKg1nCRF7ABW5q5qXA-SIAM'
}
}
}
},
{
url: '/api/logout', // 注意，这里只能是string格式
method: 'get',
response: () => {
return {
code: 200,
message: 'ok',
data: true
}
}
}
]
- mocks / routerInfo.ts
export default [
{
url: '/api/routerInfo', // 注意，这里只能是string格式
method: 'get',
response: () => {
return {
code: 200,
message: 'ok',
data: [
{
path: "/study",
component: 'Layout',
meta: { title: '学习管理'},
name: "Study",
children:[
{
path: "study1",
name: "Study1",
component:'/study/index',
meta: { title: '学习1' },
},
{
path: "study2",
name: "Study2",
component:'/study/study1',
meta: { title: '学习2' }
}
]
},
// 多层级
{
path: "/multiStage",
component: 'Layout',
meta: { title: '多层级'},
name:'MultiStage',
children:[
{
path: "stage1",
name: "One",
component:'/multiStage/index',
meta: { title: '一层-01' },
},
{
path: "stage2",
name: "two",
meta: { title: '一层-02' },
children:[
{
path: "one1",
name: "One-1",
component:'/multiStage/one/index',
meta: { title: '02-1' },
},
{
path: "one2",
name: "One-2",
component:'/multiStage/one/two',
meta: { title: '02-2' }
},
{
path: "one3",
name: "One-3",
component:'/multiStage/one/three',
meta: { title: '02-3' }
},
{
path: "one4",
name: "One-4",
component:'/multiStage/one/three',
meta: { title: '02-4' }
},
{
path: "one5",
name: "One-5",
component:'/multiStage/one/three',
meta: { title: '02-5' }
},
{
path: "one6",
name: "One-6",
component:'/multiStage/one/three',
meta: { title: '02-6' }
},
{
path: "one7",
name: "One-7",
component:'/multiStage/one/three',
meta: { title: '02-7' }
},
{
path: "one8",
name: "One-8",
component:'/multiStage/one/three',
meta: { title: '02-8' }
},{
path: "one9",
name: "One-9",
component:'/multiStage/one/three',
meta: { title: '02-9' }
}
]
}
]
}
]
}
}
},
]
- mocks / user.ts
export default [
{
url: '/api/userInfo', // 注意，这里只能是string格式
method: 'get',
response: () => {
return {
code: 200,
message: 'ok',
data: {
username:'zc',
createId:'1'
}
}
}
},
]
三、.env.development
# .env.development
VITE_APP_BASE_URL=/
四、.env.production
# .env.production
VITE_APP_BASE_URL=http://zc-prod.com
五、.eslintrc.cjs
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": "plugin:vue/vue3-essential",
"overrides": [
],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"parser": "@typescript-eslint/parser",
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
"vue/multi-word-component-names": [
"error",
{
ignores: ["index"], //需要忽略的组件名
},
]
}
}
六、package.json
{
"name": "b-vue3-ts-vite-elementplus",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"pro": "vite --mode production",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.3.0",
"element-plus": "^2.2.28",
"lodash": "^4.17.21",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"pinia": "^2.0.29",
"sass": "^1.58.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vite-plugin-mock": "^2.9.6",
"vue-tsc": "^1.0.11"
}
}
七、tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"] // 相对位置需要配置baseUrl才能识别，否则会报错
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
八、tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
九、vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
define:{
'process.env': {} // 这是在dealRouter.ts引用import path from 'path',会报process is not defined
},
plugins: [
vue(),
viteMockServe({
mockPath: './mocks', // 设置模拟.ts 文件的存储文件夹
supportTs: true,
localEnabled: true, // 设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
prodEnabled:false // 设置打包是否启用 mock 功能
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"]
},
server: {
// 配置端口
port: 9090,
// 自动打开浏览器
open: true,
hmr:true, // 热更新
// 通过配置开发时，代理服务器，在开发时进行跨域解决
proxy: {
'/api': {
target: 'http://zc-dev.com',
// 改变请求头源地址
changeOrigin: true,
// 重写，如果目标地址中存在 /api，就将 /api 替换为空字符串
rewrite: path => path.replace(/^\/api/, '') // todo :api就是没有被替换？？？？
}
}
},
// todo: vite打包以后的js,css和img资源分别分门别类在js/css/img
build:{
assetsDir:"static",
rollupOptions:{
input:{
index:path.resolve(__dirname,"index.html"),
project:path.resolve(__dirname,"project.html")
},
output:{
chunkFileNames:'static/js/[name]-[hash].js',
entryFileNames:"static/js/[name]-[hash].js",
assetFileNames:"static/[ext]/name-[hash].[ext]"
}
}
}
})
开发来自于vite cn.vitejs.dev/guide/
