✅ 作者 : 布克吉（微信公众号同名）
🍎简介 : 专注于前端开发，微信小程序，后台管理（Vue+React）
本博客主要用于分享前端技术知识，更多内容请看下方👇
✨人生态度 ：☀️Eventually everything will be fine！☀️
目录
前提 确保已经配置开发环境
可以nodejs官网直接下载，或参考以下链接使用nvm管理
一、vue3项目创建
1.普通创建
vue create myproject创建过程会确认使用vue版本，这里我们选择vue3
等待项目初始化完成，运行项目到浏览器
# 进入目录
cd myproject
# 启动项目
npm run serve附加：可以在终端或命令提示符中运行以下命令显示图形化界面，用来管理和创建项目
vue ui2.vite创建
安装Vite：在终端或命令提示符中运行以下命令来全局安装Vite：
npm install -g create-vitecmd进入存放项目的目录，创建一个名为test的项vue3目
create-vite test --template vue按照提示，进入项目，安装依赖
cd test
npm install安装完成后，启动开发服务器以查看和开发你的Vue 3应用：
npm run dev3.为什么使用vite
-
构建方式：Vite使用了一种新的构建方式，即基于ES模块的原生浏览器支持，通过利用浏览器自身的模块解析能力，实现了快速的冷启动和热模块替换。
-
开发体验：Vite在开发过程中具有更快的冷启动速度和热更新速度，使得开发者可以更快地进行代码修改和预览。
-
构建结果：Vite在构建结果方面更加轻量级，生成的代码更加精简，减少了不必要的包装和转换，从而提高了应用的性能。
-
插件系统：Vite使用了一种新的插件系统，可以更灵活地扩展和定制构建过程。
二、插件的安装和使用
1.安装axios并使用
npm install axios --save1.1新建Api文件夹，添加http.js
//导入axios
import axios from 'axios'
import { ElMessage } from "element-plus";
//创建一个axios对象并配置
let request = axios.create({
timeout: 20000,// 请求超时时间
transformRequest: [function(request) {
let content = encodeURIComponent(JSON.stringify(request))
return content
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
//生产环境使用真实url 开发环境用跨域配置的url
const baseurl = process.env.NODE_ENV=='production'? window.webConfig.webApiBaseUrl:''
//请求拦截器 前端给后端参数
request.interceptors.request.use(config => {
//在请求之前做些什么
// 添加loading加载（看情况）
const token = localStorage.getItem('token')
if (token) {
config.headers["token"] = token //请求头添加token
}
return config // 拦截成功后最后一定要返回
//可通过return 向请求中添加数据
// return {
// ...config,
// token: token //添加token
// }
}, err => {
//请求错误做些什么
return Promise.reject(err)
})
// 响应拦截器 后端给前端参数
request.interceptors.response.use(response => {
//对响应数据做些什么
return response.data
}, err => {
//请求失败
alert(err)
// 处理响应错误
//失败回调:处理http网络错误的
//定义一个变量:存储网络错误信息
let message = "";
//http状态码
const status = error.response.status;
//示例
switch (status) {
case 401:
message = "TOKEN过期";
break;
case 403:
message = "无权访问";
break;
case 404:
message = "请求地址错误";
break;
case 500:
message = "服务器出现问题";
break;
default:
message = "网络出现问题";
break;
}
//提示错误信息
ElMessage({
type: "error",
message,
});
return Promise.reject(err) //抛出错误
})
//导出请求对象
export default (data) => {
return axios({
url:baseurl? baseurl+'路径':'/api/路径',
method: 'post',
data: data
})
}1.2新建管理接口的文件interface.js
import http from './http.js'
const createHttpHandler = (action) => (data) => http({ ...data, action });
//login keepalive作为服务端提供的接口名 在本文件中统一管理
export const Login= createHttpHandler('login');
export const KeepAlive= createHttpHandler('keepalive');
//...... 拓展知识：定义了一个工厂函数 createHttpHandler，它接收一个表示动作类型的字符串 action，并返回一个新的函数。这个新函数接受data参数，并将action与data合并后传递给 http 函数。
1.3新建index.js
const context = require.context('./', false, /.js$/)
const modules = {}
context.keys().forEach(fileName => {
if (!['./index.js', './interface.js'].includes(fileName)) {
Object.assign(modules, context(fileName))
}
})
export default modules1.4挂载到全局
import { createApp } from 'vue'
//导入index.js
import Api from './Api/index'
import App from './App.vue'
const app = createApp(App)
//通过provide挂载到全局
app.provide('$Api', Api)
app.mount('#app')
申明一点：这里不能用vue2中的this，全局挂载和使用可以用provide和inject
在 Vue 3 的 Composition API 中，确实每次需要使用 inject 时都需要显式地导入它，这是Vue为了保持模块化和清晰的依赖关系所设计的。不过，为了减少重复性并提高代码的可维护性。
1.5页面中引入使用 login.vue
import { inject } from "vue";
//...
const $Api= inject('$Api')
$Api.Login({
params
}).then(res => {
console.log(res)
})
//...1.6开发环境下的跨域处理和生产的打包配置
打包后去除控制台打印日志的插件
npm install vuex@next --save
vue.config.js文件中配置
const {
defineConfig
} = require('@vue/cli-service')
//对应的插件需要安装
let plugins = []
const TerserPlugin = require("terser-webpack-plugin")
const isProduction = process.env.NODE_ENV === 'production'
// 生产环境
if (isProduction) {
plugins.push(new TerserPlugin({
terserOptions: {
output: {
comments: false, //去除注释
},
// warnings:false,//去除黄色警告
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'], //移除console.log 避免console.error
}
}
}))
}
module.exports = defineConfig({
// base:'/',
//为true时用于开发输出报错位置（生产环境不需要）
productionSourceMap: false,
transpileDependencies: true,
lintOnSave: false,
//打包后生成的文件夹 静态文件和逻辑代码分开
outputDir: 'dist',
assetsDir: "./static",
publicPath: './',
configureWebpack: {
devServer: {
host: '0.0.0.0',
// host: 'localhost',
port: 8080,
"proxy": {
'/api': {
target: 'http://127.0.0.1/example/', //代理的位置
secure: true,
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
ws: true,
pathRewrite: { //路径重置
'^/api': "" //只要访问以api为开头的路径，就会通过此代理 不会存在跨域问题
}
}
},
// 热启动
hot: true,
open: true,
},
//启用插件
plugins
}
})
2.安装router并使用
前言
对于带有路由鉴权的网页
第一种方法是，导航菜单信息登录后由服务端返回。
- 用户登录: 用户提交用户名和密码等凭证给服务端进行身份验证。
- 权限验证: 服务端验证用户身份后，会检查该用户的角色和权限。这些权限信息通常与系统中的角色权限管理关联，每个角色预设了一组可访问的资源和页面。
- 返回权限数据: 验证通过后，服务端会将用户的权限信息、角色信息或者直接是定制化的导航菜单数据发送回客户端。这一步是为了让前端知道当前用户可以访问哪些功能或页面。
- 前端处理: 前端接收到这些数据后，会根据权限数据动态生成导航菜单，只显示用户有权限访问的菜单项。同时，前端的路由鉴权机制也会基于这些权限信息来决定用户请求某个路由时是否允许访问。
- 动态路由与导航守卫: 在Vue、React等前端框架中，可以使用动态路由配置和导航守卫（如Vue的路由守卫、React的高阶组件等）来实现这一过程，确保未授权的用户无法通过URL直接访问受保护的页面。
另一种方法是：导航菜单信息全在本地代码中，根据服务端返回的权限信息再进行筛选，生成当前用户的路由信息。
2.1安装路由
npm install vue-router@4 --save2.2使用示例（服务端只返回权限信息）
import Vue from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Dashboard from '../views/Dashboard.vue';
import Settings from '../views/Settings.vue';
const router = new Router({
routes: [
{ path: '/', name: 'Home', component: Home, meta: { requiresAuth: true, permission: 'home' } },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: { requiresAuth: true, permission: 'dashboard' } },
{ path: '/settings', name: 'Settings', component: Settings, meta: { requiresAuth: true, permission: 'settings' } },
// 其他路由...
],
});
// 创建router实例
const router = createRouter({
history: createWebHistory(),
routes,
});
// 路由守卫 - 全局前置守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('isAuthenticated'); // 简化处理，实际项目中应验证token
const userPermissions = JSON.parse(localStorage.getItem('permissions') || '[]');
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
// 未登录，重定向到登录页
next('/login');
} else if (!userPermissions.includes(to.meta.permission)) {
// 登录了但是没有权限访问此页面
next('/unauthorized');
} else {
next();
}
} else {
next(); // 不需要鉴权的路由直接放行
}
});
export default router;2.3挂载到实例上
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入router配置
createApp(App).use(router).mount('#app');2.4 使用
在 Vue 3 中，你不能直接全局注册 useRouter，因为它是 Composition API 的一部分，不是像 Vue 2 中的全局 Vue 实例那样的插件，不能通过 Vue.use() 的方式全局注册。useRouter 必须在每个需要使用到它的组件内部通过 Composition API 的函数来调用。
import { useRouter } from 'vue-router';
const router = useRouter()
//路由跳转
router.push(path)3.安装vuex并使用
3.1安装vuex
npm install vuex@next --save3.2使用方法同vue2
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')Vuex 是什么？ | VuexVue.js 的中心化状态管理方案
https://v3.vuex.vuejs.org/zh/vuex生态更完善，适用于复杂的大型项目，可模块化管理各个页面的store数据,简单的项目可用新存储库 pinia
常用的npm 命令后缀
--save 或 -S: 当你使用 npm install <package> --save 或简写为 npm install <package> -S 安装一个包时，这个包会被添加到项目的 dependencies 列表中。这意味着这个包是你项目运行时所必需的，用于生产环境。修改后的 package.json 文件会记录这个依赖，方便他人或部署环境通过 npm install 自动安装所有必要的依赖。
--save-dev 或 -D: 使用 npm install <package> --save-dev 或 npm install <package> -D 安装的包会被添加到 devDependencies 列表中。这些包通常是在开发阶段需要的，如测试框架、构建工具等，它们不是生产环境直接运行所必需的。
--global 或 -g: 这个后缀用于全局安装npm包，例如 npm install <package> -g。全局安装的包通常是指令行工具，可以直接在命令行中使用，而不局限于特定的项目。
觉得本篇文章有用的小伙伴们
欢迎点赞+收藏+关注哦~❤
5445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
