基本页面配置与登录页面编写

删除原有的所有初始内容,在views下新建WelcomeView组件

安装vue router

在router下新建index.js文件,编写路由:

import {createRouter,createWebHistory} from "vue-router";

const router=createRouter({
    history:createWebHistory(import.meta.env.BASE_URL),
    routes:[
        {
            path:'/',
            name:'welcome',
            component:()=>import('@/views/WelcomeView.vue'),
            children:[]

        }
    ]
})
  
  export default router

配置最外层登陆页面的路由

编写main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";

const app=createApp(App)
app.use(router)
app.mount('#app')

安装element ui

通过按需导入需要下载额外的插件,vite.config.js中添加:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

编写welcome.vue:






编写LoginPage.vue:






你可能感兴趣的:(vue.js)