vite+vue3+element-plus

vite+vue3+element-plus

1.开始

npm create vite@latest app -- --template vue

npm installl

npm run dev

2.引入element-ui

npm install element-plus

修改main.js

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

3.安装vue-router

npm install vue-router@4

修改main.js

import router from "./router"

不识别@

npm i @types/node -D

修改vue.config.js

import { resolve } from 'path'

export default defineConfig {
    // ...
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // 路径别名
        },
        extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
    }
}

index.js

import { createRouter, createWebHistory } from "vue-router"
import Index from '@/view/index/index.vue'

const router = createRouter({
    history: createWebHistory(),
    routes : [

        { path: '/', redirect: '/index' },
        {
            path: '/',
            name:'index',
            component: () => import('../view/index/index.vue'),
            children:[
                {
                    path: '/index',
                    name: 'index',
                    component: Index
                }
            ]
        }
    ]
})

export default router