CloseAI-004-UI要漂亮-VueTify3

首先看看效果:

英文:Very Nice
中文:嘎嘎漂亮

CloseAI-004-UI要漂亮-VueTify3

CloseAI 概述

  • 这是一个面向小白的视频,让AI给我们干活 —— 写程序
  • 让 AI 把AI工具拼接在一起,构建我们的工作流

CloseAI = 数据管理 + 逻辑实现 + Web界面

** 原则 **

  1. 把打造的过程和成果在牛哥的频道上同步给大家,上线后免费使用
  2. 用频道的收益承担基本的服务器等开销

对技术感兴趣的小伙伴可以参考视频和网页,完整复刻

所以,还没关注牛哥的小伙伴,如果愿意支持牛哥,请点赞关注+评论,并且尽量把视频看完,让频道尽快通过考核,牛哥在这里谢谢大家!

工程构建:

    1. 工程github地址:
      https://github.com/yangjiakai/lux-admin-vuetify3
    2. 下载或者克隆代码:

CloseAI-004-UI要漂亮-VueTify3

  1. 初始化:
npm install
  1. 启动工程:
npm run dev

npm 属于 Node应用相关命令,有不了解的可以查看牛哥之前的视频:
NodeJS是啥?:https://youtu.be/BxcQ_v-bVOA

工程结构:

  1. 这是一个基于vue3的程序

vue3 是前端的一种技术(vue技术的版本3,Vue.js是一个渐进式JavaScript框架),主要用于响应式布局,在当今的前端应用属于主流

  1. 使用了vuetify

Vuetify 是一个流行的 Vue.js UI 框架,它提供了一套丰富的组件和工具,用于快速开发响应式和美观的界面。适用于vue2和vue3

  1. 目录结构
    跟目录下大部分文件不用管,只需要关注src目录

Src目录

  1. 主入口:main.js

框架的启动文件,引导并装载相关的设置

mian.js 装载APP和Router

  • APP :App.vue 核心的被加载的文件

简单理解:vue都是显示文件,App.vue 就是默认的显示文件

  • Router :定义程序的路由
    简单理解:就是一个网址要对应显示哪个vue
    1. Router目录
      定义路由的目录,核心文件就是index.js,他包含了一堆其他的文件
    2. View目录
      定义了实际的显示vue
  1. components目录
    公共组件,也就是给各个vue文件复用时使用的

示例解析:

首页-DashBoard

CloseAI-004-UI要漂亮-VueTify3

从上到下以此载入组件

站内快搜



联系牛哥

加入牛哥的 TG 群组一起交流

=>>Telegram群组(点我加入)

有特殊情况的,需要单独沟通,可以添加牛哥的 微信 或者 Telegram