Vue.js前端框架之vite+vue+naive前端项目模板
1.搭建Vue示例项目
npm create vue
cd vue-demo :进入项目目录
npm install :安装所有依赖
npm run dev:启动项目
2.了解Vue开发和工作原理
2.1 package.json
类似于Python项目中pyproject.toml,包含了项目名称、版本、命令、依赖、设定
2.2 index.html
浏览器访问到的HTML文件
加载src/main.ts 项目代码
前端项目和浏览器的桥梁
2.3 main.ts
消除错误
ts配置文件(ts.config.app.json) "moduleResolution":"node"
1.实例化vue的App
将app挂载到HTML中
前端项目和index.html的桥梁
2.4 App.vue
.vue是Vue.js创建的一种格式,也叫单文件组件(SFC)
模板(HTML)、脚本(JS)、样式(CSS)合并到同一个文件里
2.5 router
app.use(router) //启用插件
http://localhost:5173 --->HomeView.vue
http://localhost:5173/about--->AboutView.vue
可以让前端代码,根据URL决定页面显示的内容
路由:URL和视图之间的映射
vue加载、解析、处理各样的代码。最终转变成能够被浏览器识别、执行、处理的HTML+CSS+JS
3.第三方样式组件
兼容vue3的UI
对于CSS不擅长的前端开发来说,样式组件,就是必不可少的工具
- naive-ui: https://github.com/tusen-ai/naive-ui
- vuetity:https://github.com/vuetifyjs/vuetify
- element-plus:https://github.com/element-plus/element-plus
- quasar
- Antd Vue
- Angular Material
3.1 element-plus
3.1.1 安装
npm install element-plus
3.1.2 启用插件
import './assets/main.css' import 'element-plus/dist/index.css' import ElementPlus from 'element-plus' import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) //Vue加载插件 app.use(ElementPlus) //使用插件 app.mount('#app')
3.1.3 使用插件
<template> <div class="about"> <h1>This is an about page</h1> <el-input v-model="input" placeholder="Please input" /> </div> </template> <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style> <script lang="ts" setup> import { ref } from 'vue' const input = ref('') </script>
3.2 naive-ui
3.2.1 安装
npm install naive-ui
3.2.2 启用插件
import './assets/main.css' import 'element-plus/dist/index.css' import ElementPlus from 'element-plus' import Naive from 'naive-ui' import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) //Vue加载插件 app.use(ElementPlus) //使用插件 app.use(Naive) //使用插件 app.mount('#app')
3.1.4 使用插件
<template> <div class="about"> <h1>This is an about page</h1> <el-input v-model="input" placeholder="Please input" /> <n-button type="primary"> Primary </n-button> </div> </template> <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style> <script lang="ts" setup> import { ref } from 'vue' const input = ref('') </script>
4.模板项目
将常用的组件,已经拼接到位,免去选择的苦恼
常见vue3的admin模板项目
名字 | 地址 | start | UI库 |
vue-vben-admin |
https://github.com/vbenjs/vue-vben-admin | 16.6k | ant-design |
vue-pure-admin |
https://github.com/pure-admin/vue-pure-admin |
7.7k |
element-plus |
naive-ui-admin | https://github.com/jekip/naive-ui-admin | 3.5k | naive-ui |
soybean-admin |
https://github.com/honghuangdc/soybean-admin |
3.2k | naive-ui |
admin模板项目通常包含登录页面,左侧菜单栏、表格、表单,等常见的页面、功能、组件
模板和框架不一样:
- 框架
- 安装、导入、调用
- pytest、vue、flask
- 模板:
- 下载、解压、修改
4.1 naive-ui-admin
vue3+naive+ts
https://github.com/jekip/naive-ui-admin
4.2 安装依赖
npm install
4.3 预览页面
npm run dev
4.4 项目目录
├── build # 打包脚本相关
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 脚本
│ └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ │ ├── icons # icon sprite 图标文件夹
│ │ ├── images # 项目存放图片的文件夹
│ │ └── svg # 项目存放svg图片的文件夹
│ ├── components # 公共组件
│ ├── design # 样式文件
│ ├── directives # 指令
│ ├── enums # 枚举/常量
│ ├── hooks # hook
│ │ ├── component # 组件相关hook
│ │ ├── core # 基础hook
│ │ ├── event # 事件相关hook
│ │ ├── setting # 配置相关hook
│ │ └── web # web相关hook
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置
│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置
│ │ ├── designSetting.ts # 样式配置
│ │ ├── encryptionSetting.ts # 加密配置
│ │ ├── localeSetting.ts # 多语言配置
│ │ ├── projectSetting.ts # 项目配置
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
4.5 修改思路
- 修改项目名称、介绍、特征、logo
- 干掉mock
- 重写API
- 精简路由
- 创建新的URL、路由、视图
- 在视图(.vue文件)中使用组件,完成页面内容
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?