VUE前端的简单设计技巧

淡淡的烟草味﹌ 2023-09-30 08:49 3阅读 0赞

#### 文章目录 ####

*  一、添加UI依赖
 *  二、嵌套路由介绍
 *  三、整理主页

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、添加UI依赖 ##

1.  打开vue项目，进入外部/内部终端，下载element  
    ![在这里插入图片描述][13a4b3d14e9a473399941d894205a5e7.png]
2.  下载完成后即可在package.json中查看  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]
3.  修改公共配置文件main.js
    
        import {
              createApp} from 'vue'
        import Appfrom './App.vue'
        import router from './router'
        // 引入依赖
        import ElementPlus from 'element-plus'
        import 'element-plus/dist/index.css'
        	
        
        var app=createApp(App)
        	
        // 使用ElementPlus
        app.use(ElementPlus)
        	
        
        app.use(router).mount('#app')

## 二、嵌套路由介绍 ##

在建立网页时经常存在网页嵌套的现象，在vue开发时，即组件嵌套，例如User登录界面不作为一个单独界面，而是作为Main主界面的一个部分，那么此时就存在嵌套路由的说法，即User的路由嵌套在Main路由之中。

写好Main.vue、User.vue组件后，对两组件进行路由配置，打开index.js文件：

import {
         createRouter, createWebHistory } from 'vue-router'
    import HomeView from '../views/HomeView.vue'
    // 引入路由
    import Main from "@/views/main/Main";
    import Users from "@/views/user/Users";
    
    const routes = [
      {
        
        path: '/',
        name: 'home',
        component: HomeView
      },
      {
        
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
      },
      {
         // 配置嵌套路由
        path:'/main',
        name:'Main',
        component:Main,
        children:[
          {
        
            path:'/users',
            name:'Users',
            component:Users
          }
        ]
      }
    ]
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

## 三、整理主页 ##

当需要设计前端时，我们通常先清洗一下原网页

1.  打开App.vue，改为如下：
    
        <template>
        
          <router-view/>
        </template>
        
        <style>
        #app {
               
          width: 100%;
          height: 100%;
        }
        </style>
2.  打开index.html，改为如下：
    
        <!DOCTYPE html>
        <html lang="">
          <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <link rel="icon" href="<%= BASE_URL %>favicon.ico">
            <title><%= htmlWebpackPlugin.options.title %></title>
            <style type="text/css">
              *{
               
                /*将边去掉,没有缝隙*/
                margin: 0px;
                padding: 0px;
              }
              /*将整个页面充满*/
              html,body{
               
                width: 100%;
                height: 100%;
              }
            </style>
          </head>
          <body>
            <noscript>
              <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
            </noscript>
            <div id="app"></div>
            
          </body>
        </html>

[13a4b3d14e9a473399941d894205a5e7.png]: https://img-blog.csdnimg.cn/13a4b3d14e9a473399941d894205a5e7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ea7a3764ab3f4046bdde6ed22cca31af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16