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

相关推荐
ThreeYear_s1 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
新中地GIS开发老师4 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
Studying 开龙wu4 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者4 小时前
HTML版英语学习系统
学习·html
nenchoumi31195 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人
NULL指向我5 小时前
香橙派3B学习笔记9:Linux基础gcc/g++编译__C/C++中动态链接库(.so)的编译与使用
笔记·学习
ThreeYear_s6 小时前
基于FPGA的PID算法学习———实现PID比例控制算法
学习·算法·fpga开发
_李小白7 小时前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d
Sleepless_斑马7 小时前
【FFmpeg学习(1)】图像表示
学习·ffmpeg