vue前端搭建企业级项目

一、技术选型和项目研讨会

Pnpm+Vite + Vue3 + JavaScript + Vue Router + Ant Design Vue + ESLint + Stylelint + Prettier

pnpm 包管理工具

Vite 下一代前端开发与构建工具快速轻量级按需编译热更新

Vue3 市场主流的开发框架 Composition API

JavaScript 前端3剑客之一，必不可少

Vue Router 路由，掌管页面跳转

Ant Design Vue ui框架，统一样式风格，不用再头疼样式， Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

ESLint ESLint 是一个开源的 JavaScript 和 JSX 代码检查工具，旨在帮助开发者发现和修复代码中的潜在问题。它通过静态分析代码来识别不符合特定规则的代码模式，从而提高代码质量、减少错误并保持代码风格的一致性。

StyleLint StyleLint 是一个强大的、可配置的 CSS 代码检查工具，用于检测和修复 CSS 代码中的问题，确保代码风格的一致性和质量。它支持多样的 CSS 语法（如 SCSS、Sass、Less 等），并可以通过配置来适应不同的开发需求。

Prettier Prettier 是一个广泛使用的代码格式化工具，可以自动格式化 JavaScript、TypeScript、CSS、SCSS、LESS、HTML、JSON、Markdown、GraphQL、Vue 和更多文件类型。它的目标是通过强大的默认规则消除代码样式的讨论，并减少代码冲突。与其他代码格式化工具不同，Prettier 使用一致且可靠的样式，使得代码看起来更统一。

正常情况下的项目开展，出需求之后是技术选项和开发排期会议。

经过上面的讨论，技术选型结束，那么就开始搭建项目了。

由于使用了很多的配置和插件，所以按照正式的公司项目流程，项目会由前端团队负责人提供一个配置完的项目模板来搭建项目。

本地项目搭建我们使用vite官方社区的Elan Young提供的vite-vue-js-starter-template 项目模板

二、项目搭建

1.项目创建命令：

📌

npx degit ElanYoung/vite-vue-js-starter-template my-project

或者

📌

npx degit yl1995/vue-js-template my-project1

由于该项目模板使用的是gitHab的仓库，所以大家需要一定的技术能力才能够成功的访问

2.gitee仓库地址

所以提供gitee的模板项目地址，可以下载压缩包或者是git拉取

企业级项目搭建模板

3.项目依赖安装和运行

📌

pnpm i 或者pnpm install 安装所有依赖

pnpm run dev 运行项目

三、项目配置

1.在 `vite.config.js` 配置访问地址

修改server配置下面的host地址为127.0.0.1本地地址

2.删除 `.github` 文件夹

多余文件删除一下

3.项目目录讲解

之前的基础项目

正式的企业级项目----多了一些配置文件，这些文件主要是一些插件自动生成和模板配置，看着累，但是对于开发过程的影响不大。

4.修改和配置自己的路由，建立登录页和各个功能模块的页面组件，页面组件内容先放该模块名称即可，后续再根据ui组件库和参考图开发对应的功能模块页面。

动手时间，

本项目路由的搭建使用了项目级别的搭建模式，模块化的路由配置。

modules目录下面一个js文件就可以放一个模块的路由，格式如下图

export default [//路由配置内容{path: '/login',name: 'login',component: () => import('@/views/login/index.vue'),},
];

例如新增一个user模块的路由

路由会自动识别和加载到路由实例中

const files = import.meta.glob('./modules/*.js', {
//import.meta.glob 允许你从一个目录中导入多个文件，而不需要手动逐个导入。
//它返回一个对象，对象的键是文件的路径，值是动态导入的 Promise。eager: true,
});// 路由暂存
const routeModuleList = [];// 遍历路由模块
Object.keys(files).forEach((key) => {
//Object.keys 获取对象的属性名称，装到一个数组里，再遍历const module = files[key].default || {};//获取每一个文件暴露出来的路由配置数组内容const moduleList = Array.isArray(module) ? [...module] : [module];
//判断文件的路由配置内容是数组格式就展开运算符实现合并routeModuleList.push(...moduleList);//把所有的路由信息添加到路由暂存中
});// 存放动态路由
const asyncRouterList = [...routeModuleList];// 存放固定路由
const defaultRouterList = [];const routes = [...defaultRouterList, ...asyncRouterList];//最终配置的路由信息

ui参考网址

http://10.255.70.20:8011

admin

123456

任务

📌

根据prd和需求，创建自己需要的路由模块和路由内容，在views或者自己新建的pages下面创建对应的页面组件。要求可以通过路由访问到对应页面。

5.在 `App.vue和main.js` 中修改路由出口内容和样式

模板默认的样式用于学习，正式项目首先做到显示的长宽高铺满。

检查 main.js 中main.css样式

检查 App.vue 根组件的页面布局

6.eslint和stylelint使用和自动修复

关于CR换行符报错问题。

整个项目级别的修复使用

pnpm lint:fix 命令自动修复，注意需要代码文件都已经保存的情况下才能使用

当前页面的修复--使用编辑器自带的页面换行转换

编辑器点击右下角的lf或者是crlf位置，再弹出的页面选择lf即可。

保存代码自动修复（如果之前上课没有配置的同学配置一下）

vscode - 文件--首选项---设置

点击右上角打开设置，在里面添加下面的代码即可实现在保存的时候自动按照代码格式修复代码。

命令行手动操作

eslint

pnpm run lint 检查代码格式

eslint代码格式自动修复

pnpm run lint:fix

stylelint

pnpm run stylelint 检查css代码格式问题

css代码格式自动修复

pnpm run stylelint:fix

7.ant-desig-vue组件库的安装和使用

安装

pnpm install ant-design-vue

使用

按需引入使用

import {xxx} from 'ant-design-vue'

自动加载配置可选

安装自动加载工具

pnpm install unplugin-vue-components -D

配置vite.config.js中的代码导入自动加载工具的AntDesignVueResolver

在plugins插件目录添加AntDesignVueResolver的使用

javascript">import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';plugins: [vue(),AutoImport({imports: ['vue', 'vue-router', 'pinia'],resolvers: [AntDesignVueResolver({importStyle: false, // css in js}),IconsResolver({prefix: 'Icon',}),],eslintrc: {enabled: true,},dts: true,}),Components({resolvers: [AntDesignVueResolver({importStyle: false, // css in js}),IconsResolver({enabledCollections: ['lets-icons'],}),],}),Icons({autoInstall: true,}),],

页面使用

javascript"><a-button type="primary">123</a-button>  
无需再单独引入，直接可以开始组件使用，组件需要以a-开头标签格式

8.扩展页面级别的权限管理实现---路由拦截登录判断

beforeEach 路由前置守卫函数是路由实例router的一个函数属性，负责配置在路由跳转打开页面前的用户权限判断，实现页面级别的权限管理。

参数是一个匿名回调函数，

匿名回调函数有三个参数，

第一个是去哪里，

第二个是来自哪里，

第三个是路由放行函数，默认调用就是继续前往去的页面，也可以如路由的push函数一样传入地址path，跳转新的页面。在beforeEach函数的回调函数里面，不管权限判断通过或者不通过，必须调用第三个参数实现页面继续跳转，不然就会白屏。

javascript">router.beforeEach((to, from, next) => {//to 去的页面 ，from 来的页面，next 放行函数console.log(to, from, next, '22222');if (to.name === 'login') {//判断去登录页就不做操作，直接放行next();} else {if (localStorage.getItem('token')) {//其他页面判断用户是否登录，登录的话方向next();} else {//未登录的用户统一跳转登录页登录next('/login');}}
});

localStorage 是 HTML5 引入的一个 Web Storage API，用于在客户端存储数据。它提供了一种在浏览器中持久化存储数据的简单方式，数据不会因为浏览器的关闭而丢失。

特点

持久化存储:

数据存储在 localStorage 中是持久化的，即使浏览器关闭或计算机重启，数据也不会丢失。

同源策略:

localStorage 的数据是按照域名存储的，不同域名之间的数据是隔离的。

存储容量:

通常，每个来源（域名、协议、端口）可以存储大约 5-10MB 的数据。

无过期时间:

数据除非被显式删除，否则将一直保留在 localStorage 中。

使用方法

存储数据

使用 setItem 方法存储键值对：

localStorage.setItem('key', 'value');

或者直接使用方括号语法：

localStorage['key'] = 'value';

获取数据

使用 getItem 方法获取指定键的值：

const value = localStorage.getItem('key');

或者直接使用方括号语法：

const value = localStorage['key'];

删除数据

使用 removeItem 方法删除指定键的数据：

localStorage.removeItem('key');

或者使用 delete 操作符：

delete localStorage['key'];

清除所有数据

使用 clear 方法清除 localStorage 中的所有数据：

localStorage.clear();