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

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

<template>
    <div>
       首页
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>

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')

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>

<template>
    <router-view></router-view>
</template>

<style>
*{
    margin: 0;
    padding: 0;
}
</style>

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";