vite常用知识点

vite初始化项目

npm create vite@latest

vite安装router

npm install vue-router@4

router配置

1. src下新建router/index.js

   import { createRouter, createWebHistory } from 'vue-router'
   const routes = [
       {
           path: '/',
           redirect: '/home'
       },
       {
           path: '/home',
           name： 'home',
           component: () => import('./components/Home.vue')
       }
   ]
   
   const router = createRouter({
       history: createWebHistory(),
       routes
   })
   
   export default router
   

2. main.js引入router

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

3. App.vue改为<router-view></router-view>

vite安装scss

npm install sass -D

页面中使用

<style lang="scss" scoped>

</style>

vite安装element-plus

1. npm install element-plus --save

2. main.js引入

    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'
   
    const app = createApp(App)
   
    app.use(ElementPlus)
    app.mount('#app')
   

3. 图标全局引入

    //ElementPlus 图标引入
    import * as ElIconModules from '@element-plus/icons-vue'
    for(let iconName in ElIconModules){
        app.component(iconName,ElIconModules[iconName])
    }