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 修改思路

1. 修改项目名称、介绍、特征、logo
2. 干掉mock
3. 重写API
4. 精简路由
5. 创建新的URL、路由、视图
6. 在视图（.vue文件）中使用组件，完成页面内容