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

相关推荐
cwtlw9 小时前
PhotoShop学习01
笔记·学习·ui·photoshop
Bluesonli9 小时前
第 22 天:多线程开发,提高 UE5 性能!
学习·游戏·ue5·虚幻引擎·unreal engine
虾球xz9 小时前
游戏引擎学习第124天
java·学习·游戏引擎
远离UE49 小时前
UE5 Computer Shader学习笔记
笔记·学习·ue5
一小路一10 小时前
从0-1学习Mysql第五章: 索引与优化
数据库·后端·学习·mysql·面试
IT、木易12 小时前
大白话css第二章深入学习
前端·css·学习
fanged12 小时前
CMake小结2(PICO为例)
学习·嵌入式
笨鸟先飞的橘猫14 小时前
lua学习(一)
开发语言·学习·lua
zhulu50614 小时前
PyTorch 源码学习:GPU 内存管理之它山之石——TensorFlow BFC 算法
学习·tensorflow
白云千载尽15 小时前
大语言加持的闭环端到端自动驾驶模型 学习笔记纯干货
论文阅读·笔记·学习·自动驾驶·carla·vlm