1.开始我的项目
yarn create @vitejs/app
批改 vite.config.ts
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// 如果编辑器提醒 path 模块找不到,则能够装置一下 @types/node -> npm i @types/node -Dimport { resolve } from 'path'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录 } }, base: './', // 设置打包门路 server: { port: 4000, // 设置服务启动端口号 open: true, // 设置服务启动时是否主动关上浏览器 cors: true, // 容许跨域 // 设置代理,依据咱们我的项目理论状况配置 proxy: { '/api': { target: 'http://127.0.0.1:8000', changeOrigin: true, secure: false, rewrite: (path) => path.replace('/api/', '/') } } }})
2. 生成路由
装置路由npm install vue-router@4
配置路由文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'import Home from '@/views/Home.vue'import Table from '@/views/Table.vue'const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, { path: '/table', name: 'Table', component: Table }]const router = createRouter({ // hash 模式 history: createWebHashHistory(), routes})export default router
在 main.ts 中注册
import { createApp } from 'vue'import App from './App.vue'import router from './router/index'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import { createPinia } from 'pinia'const app = createApp(App)app.use(router)app.use(ElementPlus)app.use(createPinia())app.mount('#app')
3. 集成 elementPlus
参考官网
4.继承 scss
npm i sass -D<style lang="scss" scoped><style>
5.集成 axios
同 Vue 2