公司前端开发Vite架构的使用

宇文麒麟

已于 2023-09-20 16:47:04 修改

阅读量127

点赞数

分类专栏： JAVA学习文章标签：架构

于 2023-09-20 15:22:37 首次发布

本文链接：https://blog.csdn.net/m0_38111370/article/details/132851675

版权

JAVA学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、前端安装和网站查看

1.1 安装前端开发工具

开发工具：Webstrom -2020.1

工具插件（用来加载依赖项）：Node -14.20.0

破解工具：webstorm-jihuo.zip

1.2 破解

webstorm-jihuo.zip

1.3 打开项目

打开开发工具：Webstrom

将项目文件夹整个拖入到：Webstrom界面，会直接打开项目的

1.4 命令：下载依耐项

如图：点击下面的：Termlnal

命令：npm i（下载依赖，第一次下载需要5~6分钟时间）

1.5 命令：运行网站

命令：npm run dev（启动项目，然后会给你一个IP地址，就可以在网页里面看网站了）

二、公司前端架构概述

2.1 整个前端框架由三部分组成：

antdv（基础UI组件/控件）+ vue3（框架/语法）+ vite3（编译器/打包代码）

2.1.1 antdv（基础UI组件/控件）

为 Web 应用提供了丰富的基础 UI 组件，例如textbox样式等，类似于我们新增用的Nifty

2.1.2 vue3（框架/语法）

是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。类似于我们用的jquery框架。

2.1.3 vite3（架构/编译器/打包代码）

create-vite 是一个快速生成主流框架基础模板的工具。我们让网站运行起来的命令 npm run dev，就是vite 将代码打包并发布成网站的编译命令。

如图：这就是官方给的Vite架构的基础代码，类似于我们新建一个网站，里面会有webconfig和其t它的一些必要的能使网站跑起来文件

Vitejs - Vite (forked) - StackBlitz

三、前端架构与基础架构的异同

3.1 在基础架构的不同和说明（新增文件）

3.2 public 文件夹（定义标签页小图标），如图：

就是将ico这种不经常变化的图片在这里编译成：vite.svg 静态文件，提高读写速度

引用方式：<link rel="icon" type="image/svg+xml" href="/vite.svg" />

3.3 TODO 有时间再晚上图片中的菜单说明

四、如何实现不同页面之间的切换

4.1 在vite框架下加载页面的简单方法

说明：vite框架下始终只有一个页面，那就是个目录的：index.html，所有的页面浏览和操作都是将写好的页面，插入index.html中的指定div层

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="../public/fav.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智慧大世界中台</title>
  </head>
  <body>
    <div id="app">都是为了写到这里</div>

    <!--引用 main.js,如果有可以直接执行的方法，会直接执行-->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

然后再main.js 中将写好的页面，导入到index.html重大appdiv里面去

//导入vue 框架，并命名为：createApp 
import { createApp } from 'vue'
//导入写好的App.vue页面内容
import App from './App.vue'

//将App页面内容，插入名为app的div中
createApp(App).mount('#app')

4.2 在基础框架下实现自定义页面的方法（公司框架）

index.html 和基本框架是一样的就不多说了

4.2.1 main.js 页面的调整

// 导入vue 框架，并命名为：createApp 
import {createApp} from 'vue';
// 导入 App.vue 页面
import App from './App.vue';
// 导入 UI组件库及其样式,并命名为Antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

// 导入路由包
// 这里非常重要,根据不同的url加载不同的vue页面
import router from './router/index';

// 使用路由包+使用UI组件库+将vue页面插入名为app的div中
const app = createApp(App);
app.use(router).use(Antd).mount('#app');

4.2.2 路由插件的：路由懒加载用法（vue-router插件）

详细全文参考这个地址：vue-router 详解_OneBaBa的博客-CSDN博客

这里我们要使用到一个vue的路由插件：vue-router

vue-router：是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用

下面代码中的：getComp 方法，就是为了实现不同层级的 import Component 方法

// 导入路由插件
import { createWebHistory, createRouter } from "vue-router";
// 导入进度条加载插件
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 动态路由内容声明（我们用的加载方式叫：路由懒加载 ）
// 这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）
const routes = [
  {
	path: "/",
	component: getComp("../components/layout/BasicLayout.vue", "component"),
	children: [{
			path: "/",
			redirect: "/home",
		},
		{
			path: "/home",
			title: "首页",
			name: "home",
			icon: 'BankOutlined',
			component: getComp("../views/Home.vue"),
		},
	],
}, {
	path: "/user",
	title: "用户管理",
	icon: 'UserOutlined',
	name: 'user',
	component: getComp("../components/layout/BasicLayout.vue", "component"),
	hideChildrenInMenu: true,
	hideInMenu: true,
	children: [{
			path: "/user",
			redirect: "/user/changePwd",
		},
		{
			path: "/user/changePwd",
			name: "user_changePwd",
			title: "更改密码",
			component: getComp("../views/user/ChangePwd.vue"),
		}
	]
}, {
	path: "/user/login",
	name: "login",
	title: "登录",
	hideInMenu: true,
	component: getComp("../views/user/Login.vue"),
}, {
	path: "/:catchAll(.*)",
	name: "404",
	hideInMenu: true,
	component: getComp("../views/404.vue"),
}
];

五、如何写页面

5.1 引入api文件，在文件中将需要调用的接口写进去

import {getRouterListApi} from './server/apis.js'

// 获取素材库列表
export const getResourceListApi = params => {
    return post({url: '/apis/filelibrary/getPageList', data: params || {}})
}

宇文麒麟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
公司前端开发Vite架构的使用

antdv（基础UI组件/控件）+ vue3（框架/语法）+ vite3（编译器/打包代码）就是将ico这种不经常变化的图片在这里编译成：vite.svg 静态文件，提高读写速度引用方式：index.html 和基本框架是一样的就不多说了。
复制链接

扫一扫