vue3项目学习二:搭建项目架构

搭建项目架构

一、 初始化项目结构

  1. App.vue初始化
javascript 复制代码
<template>
  <router-view />
</template>

<style lang="scss"></style>
  1. 删除views文件夹中所有.vue文件
  2. 删除components文件夹下所有.vue文件
  3. 初始化router/index.js中的代码
javascript 复制代码
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [

]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

二、导入element-ui

element-ui对应vue3的版本为element-plus

  1. 通过vue-cli导入

vue add element-plus

  1. 选择全局导入


    等待安装完成

    注意安装完成后element会修改App.vue,此时如果启动会报错,所以先把App.vue恢复后再启动。
    或按照element官网进行安装。

三、搭建登陆架构

3.1 登陆页面

3.2 美化登陆页面样式

初始化全局style

  1. 在src创建styles/index.scss
css 复制代码
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,Microsoft YaHei,Arial, sans-serif;
}
#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin:0;
  padding:0;
}

a:focus,
a:active {
  outline: none; 
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
} 

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0 ;
    content: '';
    clear: both;
    height: 0;
  }
}
  1. 在main.js中导入

import '@/styles/index.scss'

3.3 封装SVG组件

为了方便使用外部svg图标和element图标,这里选择封装一个svg组件,可以统一使用能够用到的所有svg图标。

暂时没有用到,且较麻烦,过几天更新svg相关

相关推荐
小脑斧爱吃鱼鱼1 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
阿linlin1 小时前
OpenCV--图像预处理学习01
opencv·学习·计算机视觉
张张张3122 小时前
4.2学习总结 Java:list系列集合
java·学习
SuperW2 小时前
linux课程学习二——缓存
学习
杉之3 小时前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
Song5 小时前
JVM 学习计划表(2025 版)
jvm·学习
小杨爱学习zb5 小时前
学习总结 网格划分+瞬态求解设置
笔记·学习·算法
互联网上的猪6 小时前
Excel时间类型函数(包括today、date、eomonth、year、month、day、weekday、weeknum、datedif)
笔记·学习·excel
weixin_535455796 小时前
WPF设计学习记录滴滴滴2
学习·wpf
阿超爱嵌入式6 小时前
STM32学习笔记之RCC模块(实操篇)
笔记·stm32·学习