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相关

相关推荐
陈无左耳、3 小时前
HarmonyOS学习第2天: 解锁语言与框架的无限可能
学习·华为·harmonyos
朝九晚五ฺ3 小时前
【Linux探索学习】第三十弹——线程互斥与同步(上):深入理解线程保证安全的机制
linux·运维·学习
柃歌3 小时前
【UCB CS 61B SP24】Lecture 5 - Lists 3: DLLists and Arrays学习笔记
java·数据结构·笔记·学习·算法
剑走偏锋o.O4 小时前
MyBatis框架详解与核心配置解读
java·学习·mybatis
2025年一定要上岸4 小时前
Java EE初阶-计算机导论
学习·java-ee
im长街4 小时前
Ubuntu22.04 - gflags的安装和使用
学习
南宫生5 小时前
力扣每日一题【算法学习day.131】
java·学习·算法·leetcode
Neo Evolution5 小时前
Flutter与移动开发的未来:谷歌的技术愿景与实现路径
android·人工智能·学习·ios·前端框架·webview·着色器
B.-8 小时前
在 Flutter 中实现文件读写
开发语言·学习·flutter·android studio·xcode
Dizzy.51712 小时前
数据结构(查找)
数据结构·学习·算法