一文教会你搭建vite项目并配置路由和element-plus_vue.js_

npm init vite@latest m-component -- --template vue-ts 

npm i 

npm run dev 

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server:{ port:8080 } }) 

npm i -S vue-router@next element-plus 

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router"; import Home from "../views/Home.vue" const routes:RouteRecordRaw[] = [ { path:'/', component:Home } ] const router = createRouter({ routes, history:createWebHistory() }) export default router 

import { createApp } from 'vue' import App from './App.vue' import router from './router/index' const app =createApp(App) app.use(router) app.mount('#app') 

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' const app =createApp(App) app.use(router).use(ElementPlus) app.mount('#app') 

npm i -D sass sass-loader

$--color-primary: #62c28c; /* 改变 icon 字体路径变量，必需 */ $--font-path: "node_modules/element-plus/lib/theme-chalk/fonts"; @import "node_modules/element-plus/packages/theme-chalk/src/index";