- 博客(64)
- 收藏
- 关注
RSS订阅
原创 超详细！！！electron-vite-vue开发桌面应用之环境变量配置（十一）
在开发项目时，我们一般需要搭建不同环境下的配置参数，通过环境变量来区分是在构建正式环境还是开发环境。Vite使用.env文件来定义环境变量，并且可以通过.env.local、.env.[mode]和.env.[mode].local文件来对不同环境进行配置。
2024-08-19 15:23:13
449
原创 超详细！！！electron-vite-vue开发桌面应用之axios接口请求封装（十）
开发项目必然少不了通过接口获取获取，这就用到了axios。
2024-08-16 17:28:06
201
原创 超详细！！！electron-vite-vue开发桌面应用之配置css预处理器sass（七）
CSS 预处理器是一种将预先定义的语法和功能添加到 CSS中的工具。它们允许开发人员使用变量、嵌套规则、混合、继承等功能，以更高效和可维护的方式编写样式表,其中常用的有sass/less/stylus,这里采用的sass方案。
2024-08-16 11:54:29
464
原创 超详细！！！electron-vite-vue开发桌面应用之layout布局（九）
设置完基本的路由之后，接下来就可以进行常规的layout页面布局改造了。
2024-08-15 18:35:30
107
原创 超详细！！！electron-vite-vue开发桌面应用之Electron自定义头部菜单栏（六）
上篇配置完路由基本可以进行业务逻辑界面开发了，但是对于头部存在的菜单栏明显是不符合需求的，这里可以配置隐藏。也可以通过配置参数frame:false实现整体隐藏。
2024-08-15 10:43:21
457
原创 超详细！！！electron-vite-vue开发桌面应用之配置路由router（五）
在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由。在src下的main.ts中引入路由。在App.vue中使用路由。点击标签相互路由跳转。
2024-08-14 18:28:12
339
原创 超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）
unplugin-auto-import是一个用于Vue.js的插件，它可以自动导入Vue.js的相关API，如Vue自身，Vue的RFC(响应式)，Composition API，以及其他一些常用的Vue功能。unplugin-vue-components是一个用于Vue.js的插件，它允许你导入Vue组件，而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件，从而减少初始加载大小。
2024-08-14 15:41:35
445
原创 超详细！！！electron-vite-vue开发桌面应用之Electron Forge打包项目（三）
这个报错信息表明你正在使用的 forge.config.js 文件被当作一个ES模块文件处理，因为它是一个.js扩展名的文件，并且在文件内部使用了ES模块的语法（例如 import, export 等）如果你想要 forge.config.js 被当作CommonJS模块处理，你可以将文件扩展名改为 .cjs，Node.js 会默认将。这里直接将forge.config.js改为forge.config.cjs,再次运行npm run start，打开出现白屏。.cjs 文件作为CommonJS模块处理。
2024-08-14 13:52:10
472
原创 超详细！！！electron-vite-vue开发桌面应用之开启调试工具（二）
上篇已经初步搭建完项目，这次配置比较重要的一部分，那就是开启调试工具，这是开发项目比较重要且基础的部分。文件，添加开启工具的代码。
2024-08-08 18:35:45
174
原创 超详细！！！electron-vite-vue开发桌面应用之项目环境搭建（一）
这是electron的安装并不依赖本地npm中registry所配置的镜像，需要增加名称为electron_mirror的镜像源。执行npm install可能会报错。
2024-08-08 18:23:24
463
原创 路由配置修改（五）
其中针对多语言，name的应用相当关键。name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置。name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题。最终呈现效果就是自定义的一样。
2024-08-02 18:16:20
532
原创 登录用户信息处理（三）
查看mock/user.ts文件中/api/currentUser接口返回信息，用户名字段为name，咱们自己的接口数据用户名为username。这里有多种方法解决，可以进行替换，也可以直接赋值添加name字段，这里采用直接替换。至此登录用户信息以及退出登录按钮正常显示。这里登录用户名称替换完成。这里暂时采用静态图片地址。
2024-07-31 14:44:29
272
原创 antd pro实现后台管理系统的建立（一）
一系列的 lint 脚本，包括 TypeScript，less，css，md 文件。analyze 脚本做的事情与 build 的相同，但是他会打开一个页面来展示你的依赖信息。这里建议使用npm或者tyarn，cnpm和npm部分不兼容，创建项目时会报部分依赖缺失的问题。运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。与 lint 相同，但是会自动修复 lint 的错误。
2024-07-30 13:03:54
220
原创 个人建站前端篇（五）插件unplugin-vue-components的使用
unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。当你使用unplugin-vue-components来引入ui库的时候，message, notification 等引入样式不生效。
2024-02-20 17:39:03
2487
原创 个人建站前端篇（六）插件unplugin-auto-import的使用
vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。
2024-02-20 17:26:57
1549
原创 个人建站前端篇（二）项目采用服务端渲染SSR
最后将项目部署到生产环境上，执行npm run build打包，然后将dist文件夹下的内容复制到服务器上，启动server.js启动服务，访问项目，查看效果。进行代码改造，在 src 目录下新建entry-client.ts和entry-server.ts两个入口文件。修改main.ts文件，将Vue应用的入口文件改为entry-server.ts。其中entry-client.ts文件内容如下。最后在项目根目录新建启动文件server.js。entry-server.ts文件内容如下。
2024-01-31 16:21:41
1630
原创 个人建站前端篇（一）项目准备初始化以及远程仓库连接
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。新建dev分支，提交代码到gitee仓库，执行以下命令，提交代码到gitee仓库，并推送到远程仓库。这里项目根目录会生成directory.md文件，里面会列出项目的目录结构，方便我们查看项目结构。打开git bash，进入webSiteVue文件夹，执行以下命令。在gitee上创建一个新的仓库，命名为website。
2024-01-30 13:27:04
456
原创 云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据
至此，网站的初步部署已经完成, 云风网 正常访问。接下来采用 vue3.0 完成前端部分的改造，以及后续接口分页等功能的完善，未完待续！之前部署的网站 html 内容都是静态写死的，现在需要替换为接口获取数据展示。这些重复的代码结构简化为动态数据循环渲染。
2024-01-22 18:01:43
564
原创 云风网（www.niech.cn）个人网站搭建（八）服务器部署接口测试请求
将之前测试的 html 文件中http://127.0.0.1:8090/地址改成云服务器外网地址，同时需要安全组需要开放 8090 端口接下来根据步骤进行测试。
2024-01-22 17:58:25
403
原创 云风网（www.niech.cn）个人网站搭建（七）navicat 连接远程mongodb数据库
1、防火墙打开27017端口2、配置mongodb的配置文件修改mongodb配置文件。
2024-01-22 17:53:14
348
原创 云风网（www.niech.cn）个人网站搭建（六）node项目部署到服务器
二、网站 node 项目，新建 node 项目，配置对应的参数。一、服务器创建新目录 api，用于放置 node 项目文件。依旧采用宝塔面板部署。三、服务状态改为启动。
2024-01-22 17:48:06
545
原创 云风网（www.niech.cn）个人网站搭建（五）node本地项目接口开发
node 服务器进行模块化构建新建一个命名为 api 的文件夹作为服务器根目录安装依赖npm installpackage.json 配置下面是各个模块的功能。
2024-01-22 17:46:12
914
原创 云风网（www.niech.cn）个人网站搭建（四）navicat 连接mongodb数据库
第一步，启动MongoDB服务具体操作请移步：MongoDB安装配置教程第二步：创建新连接，创建数据库文件–新建连接–MongoDB双击打开连接（也可右键打开连接），右键新建数据库，命名创建新集合在集合处右键，新建集合mongodb的增删改查。
2024-01-22 17:38:34
401
原创 云风网（www.niech.cn）个人网站搭建（三）mongodb本地安装
1.创建数据库文件的存放位置在data文件夹下创建 db 文件夹（启动 MongoDB 服务之前需要必须创建数据库文件的存放文件夹，否则命令不会自动创建，而且不能启动成功）2.启动 MongoDB 服务（Win+R键），输入cmd3.进入命令编辑模式，找到db文件，按如下方式输入4.输入命令，来启动MongoDB 服务（高版本 mongosh）5.按Enter键之后显示，一般端口是270176.浏览器中输入地址和端口号为：7.显示结果如下，就说明安装成功并结束。
2024-01-22 17:33:24
1176
原创 云风网（www.niech.cn）个人网站搭建（二）服务器域名配置
这里直接采用宝塔服务器运维管理面板来进行配置，简单无脑Linux面板8.0.5安装脚本这里具体看服务器的配置，直接根目录命令安装就行了安装完成就可以看到面板访问地址了（也可以明细 bt default 查看）如果忘记密码，可以直接 bt 命令进行修改这里根据面板地址进行登录访问即可，下面可以进行配置了。
2024-01-22 17:16:53
581
原创 云风网（www.niech.cn）个人网站搭建（一）基础准备
这里就以阿里云平台为例，个人开发建议ECS云服务器，这个新用户有活动。一般几十块一年、基础配置个人开发够用了。前端部分目前打算先做一版原生 js 实现的、后续再改版为 vue/react 版本的。作为一名前端开发，这里就以 node 切入去开发接口，能够效率的解决接口数据问题。域名同样购买后进行备案申请，按照平台流程顺利操作就行了。一切准备好之后，就可以正式开发了。
2024-01-22 17:08:54
391
原创 调用微信扫一扫功能
原因：微信开发文档并没有说清楚，其实在微信后台可能是维护了2个接口， 或者是对设备类型进行了区别，总之在回调函数中返回的结果封装对象并不是同一个， 所以这要求我们也进行相应的处理， 不然就会出现上面这种默认奇妙的问题。需要注意的是 debug 调试的时候，设置为 true ，会自动弹出配置成功或失败信息，调试时可以借助它。$router.push 的跳转影响了我的 url ，在 IOS 上的 push 跳转不能写入浏览器的地址栏，但是安卓可以，导致安卓和 ios 跳转之后的地址不同，所以 ios 失败了。
2023-12-26 13:23:56
1678
原创 HTML5+NodeJs实现WebSocket实现循环推送
HTML5+NodeJs实现WebSocket实现循环推送最近在做图表展示方面需要实现循环推送效果，那么webSocket无疑是比较好的选择了，WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以WebSocket暂时来说是循环推送的最佳协议了。至于服务器语言选择nodeJ...
2019-12-30 18:47:05
1591
原创 react项目解决浏览器窗口变化重新加载的问题
useEffect, useState, useCallback解决浏览器窗口变化加载问题初步接触react项目遇到很多问题，这里记录分享一下问题以及解决方法。f12，切换移动端浏览模式，浏览器窗口变小，项目样式就乱了需要手动刷新重新加载之后恢复正常.为了解决这一问题，看了下文档，自己琢磨找到了解决办法。1、首先全局layouts/index.jsx引入useEffect, useS...
2019-12-17 11:33:44
2222
1
原创 云服务器 ECS搭建网站
这里直接访问外网地址是访问不同的，原因是端口号未添加安全组。现在就可以正常访问了，输入上面获取得账号密码登录。这里采用通用安装脚本，傻瓜式安装。面板设置查看信息，已生成建站路径。https开放443端口。安装完成获取访问地址。
2024-07-22 14:18:12
210
原创 解决justify-content:space-between 2个元素两端分布的问题
在display:flex布局的情况下，justify-content:space-between。当一行可以容纳三个元素，并且一行只有两个元素的情况，这两个元素会进行两端排列。
2024-03-21 17:23:47
500
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人