三 · 从零开始搭建一个项目(添加依ui框架以及初始化布局页)

1.安装ui框架

yarn add element-plus

2.引入ui框架 main.ts下面 添加 element-plus的初始化配置

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const startApp = async () => {
    const app = createApp(App);

    // 注册路由
    app.use(router);

    // 注册ElementPlus
    app.use(ElementPlus)
    app.mount('#app')
}

startApp().then((_) => {
    console.log("应用启动");
})

3.在Layout布局页面使用容器组件

4.引入scss的css预编译处理器

yarn add -D sass-embedded

5.初始化Layout页面的css 注意lang使用scss

<style scoped lang="scss">
.common-layout{
  width: 100%;
  height: 100%;

  .el-container{
    width: 100%;
    height: 100%;
  }

}
</style>

5.views下面添加home组件

6.添加home的路由为layout的子路由 并且重定向到/layout/home 注(子路由就不要加 /斜杠了)

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/layout/home',
    },
    {
        path: '/layout',
        name: 'layout',
        component: Layout,
        children: [
            {
                path: 'home',
                name: 'home',
                component: () => import('../views/home/Home.vue'),
            },
        ],
    },

];

7.启动项目