vite创建vue3工程
项目初始化
npm init vite@latest
项目启动
cd tiny_office_tools_admin
pnpm install
pnpm run dev
常见配置
1、配置@替代路别名，实现@替代/src
1）安装 @types/node
为了能使用 __dirname等系统变量
2）配置vite.config.ts文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [{
find: '@',
replacement: resolve(__dirname, './src')
}]
}
})
3）修改tsconfig.json
{
"baseUrl": "",
"paths": {
"@": ["./src"],
"@/*": ["./src/*"]
}
}
2、配置路由
1）安装路由插件
pnpm install vue-router@4 -S
2）配置路由
router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: "/index"
},
{
path: "/index",
name: "index",
component: () => import("@/views/index/index.vue")
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router;
3）挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"
const app = createApp(App)
app.use(router)
app.mount('#app')
4）配置路由窗口
# App.vue
<template>
<router-view></router-view>
</template>
3、配置pinia
1）安装pinia
pnpm install pinia -S
2）配置store/index.ts
import { createPinia } from "pinia"
const store = createPinia()
export default store
3）main.ts中全局引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"
import store from "./store"
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
4、配置LESS
1）Sass预处理器
pnpm install sass sass-loader -D
2）Less预处理器
pnpm install less -D
3）使用
<style scoped lang="scss"></style>
<style scoped lang="less"></style>
常见问题
npm执行失败，报4048错误码
cd tiny_office_tools_admin
pnpm install
pnpm run dev
【解决方案】npm 权限不够，用root打开node
vite启动失败，报1147错误码
【解决方案】vite没有安装成功
