vue-6.1 用vue-cli创建一个 vue 项目

本文详细介绍了如何在Windows环境下使用vue-cli创建一个Vue.js项目,包括安装node.js,检查node和npm版本,注册码云账号,创建Git仓库,配置SSH公钥,通过vue init webpack命令初始化项目,并将项目推送到线上仓库。遵循文中步骤,可成功搭建Vue项目。

一句话:在命令行 vue init webpack “项目名”

  1. 安装node.js
    • 官网 download LTS(更稳定)对应安装包
  2. cmd
    • – node -v => node是否安装成功
    • – npm -v => npm是否安装成功
  3. 码云注册
    • 创建项目(仓库)
      本地代码与线上代码通过Git相关联
  4. download Git
  5. cmd
    • git --version
      • 报错 https://blog.youkuaiyun.com/wochunyang/article/details/70674252
    • git --version =》 git是否安装成功
  6. 码云–个人–设置–SSH公钥 --点击怎样生成公钥
  7. windows桌面点击右键–git bash (类似Linux)
  8. git bash 中
    • 运行在这里插入图片描述
    • 查看在这里插入图片描述里面的内容在这里插入图片描述
    • 将公钥粘贴回码云公钥的地方在这里插入图片描述
  9. 复制地址在这里插入图片描述
  10. git bash 中 切换到自己想要的文件夹内
    • git clone 在这里插入图片描述
  11. vue官网安装vue cli脚手架工具
    大型项目:webpack进行构建,做一些语法的解析=》通过命令行工具来构建工程
  12. 命令行内:安装vue cli
    在这里插入图片描述
  13. 命令行内:切换到自己所需要的文件夹下:
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
  14. 进入建立的那个文件夹里在这里插入图片描述
    15.在这里插入图片描述
    localhost:8080运行后如此代表项目创建成功在这里插入图片描述
  15. 命令行内把文件添加到线上仓库
    • 命令行–输入git status ==》可以查看到有很多文件
      在这里插入图片描述
    • git add . 先把所有文件增加到git的缓冲区
    • git commit -m ‘project initialized’
      报错在这里插入图片描述
      Windows内使用双引号,即 git commit -m “project initialized”
      =》https://blog.youkuaiyun.com/eebaicai/article/details/84672393
    • git push
      至此文件已添加到线上仓库
      在这里插入图片描述
      在这里插入图片描述

总结:
16. 查看node、npm是否安装成功
17.将git和本地联系起来
1. git bash中 ssh-keygen -t rsa -C “XXX@163.com”
2. cat ~/.ssh/id_rsa.pub 找到公钥
3. 复制公钥到线上仓库
17. 在Git上创建仓库并拉到本地
1. 【在自己想要放置的文件夹内】git clone “仓库地址”
2. 【命令行中】npm install --global vue-cli
3. 【自己想要放置的文件夹内】 vue init webpack “项目名【和仓库名一样】”

命令行中

== 1. 安装vue-cli==

此后只需:

==2. vue init webpack “项目名” ==【vue初始化一个基于webpack的项目】

接下来按步骤操作即可

===》

命令行中 vue init webpack "项目名"

<think> 我们面对的问题是在Windows 7系统下,将使用vue-cli-plugin-electron-builder构建的Vue项目从外网环境打包后,迁移到内网环境(无法联网)运行`npm run electron:serve`时出现`uv_os_gethostname function not implemented`的错误。 ### 问题分析 1. **错误信息解读**:`uv_os_gethostname`是Node.js中一个用于获取主机名的函数(来自libuv库)。这个错误通常发生在Node.js底层尝试调用这个系统函数时,但系统不支持或无法实现该功能。 2. **环境差异**:外网环境(构建环境)和内网环境(运行环境)的操作系统可能不同,或者内网环境(Win7)可能缺少必要的系统更新或组件。 3. **Windows 7的兼容性**:Windows 7已经停止支持,且其系统API可能较老。某些Node.js功能可能需要更新版本的Windows API支持。 4. **网络隔离**:内网无法联网,因此无法自动下载依赖或更新。 ### 可能的原因 - **Node.js版本问题**:构建时使用的Node.js版本可能较高,而高版本Node.js对Windows 7的支持有限(Node.js官方从v14开始逐步减少对Win7的支持)。 - **Electron版本问题**:Electron本身对Windows 7的支持也在逐渐减少。Electron 12及以上版本要求Windows 10及以上([Electron官方文档](https://www.electronjs.org/docs/latest/tutorial/support#windows))。 - **系统补丁缺失**:Windows 7需要特定的补丁(如KB2533623)才能支持一些较新的API。 ### 解决方案 #### 1. 确保使用兼容的Node.js和Electron版本 - **Node.js版本**:使用Node.js 12.x或13.x(官方对Win7支持的最后一个LTS版本是Node.js 12,但Node.js 13也可以)。Node.js 14及以上需要Win8.1+。 - **Electron版本**:选择一个支持Windows 7的Electron版本(例如Electron 11.x,因为Electron 12+要求Win10+)。 在项目中指定Electron版本: ```bash npm install electron@11.5.0 --save-dev ``` 或者修改`package.json`中的`devDependencies`: ```json "devDependencies": { "electron": "^11.5.0" } ``` #### 2. 检查Windows 7系统补丁 在内网环境的Windows 7机器上,确保安装了以下补丁: - KB2533623(关键补丁,用于支持新的API) - 以及其他必要的更新(如Service Pack 1)。 由于内网无法联网,需要离线安装补丁。可以从外网下载补丁,然后拷贝到内网安装。 #### 3. 在构建阶段使用与内网环境相同的操作系统 如果可能,尝试在Windows 7机器上构建整个项目(包括`npm install`和打包),这样可以确保生成的文件兼容Win7。 #### 4. 配置Electron Builder 在`vue.config.js`中,可以配置electron-builder的目标架构为兼容Win7的格式,并指定使用兼容的版本。 ```javascript // vue.config.js module.exports = { pluginOptions: { electronBuilder: { builderOptions: { // 指定兼容Win7 win: { target: 'nsis', // 其他配置... }, // 设置electron-builder的node版本 nodeVersion: '12.14.1', // 使用一个兼容Win7的Node版本 // 其他配置... } } } } ``` #### 5. 在内网环境重新安装依赖(离线) 由于内网无法联网,需要将整个`node_modules`(包括Electron的二进制文件)从外网拷贝到内网。但注意,Electron的二进制文件可能依赖于构建环境,因此最好在内网用相同的Node.js版本重新安装依赖(使用离线缓存)。 **离线安装步骤**: - 在外网环境使用`npm cache clean --force`清理缓存(可选)。 - 在外网环境,执行`npm install`安装所有依赖。 - 将整个项目目录(包括`node_modules`)拷贝到内网。 - 在内网环境,确保Node.js版本与构建环境一致,然后尝试运行。 #### 6. 针对Electron的离线运行 Electron在运行时可能需要下载额外的文件(如二进制文件),但内网无法下载。因此,确保将Electron的缓存文件(位于用户目录下的`.electron`和`.npm`目录)也一并拷贝到内网对应的缓存目录中。 #### 7. 使用`electron-builder`的离线模式 在打包时,使用`--offline`参数: ```bash npm run electron:build --offline ``` 但注意,这需要确保所有依赖已经在缓存中。 ### 总结步骤 1. **降级Node.js和Electron**:在外网环境中,将Node.js降级到12.x,并在项目中指定使用Electron 11.x(支持Windows 7的最后一个主要版本)。 2. **安装必要补丁**:确保内网Windows 7系统已安装KB2533623等必要补丁。 3. **在内网环境重新安装依赖**:将项目(包括`node_modules`)拷贝到内网后,在内网使用相同的Node.js版本重新安装(如果依赖有平台相关编译,可能需要在内网执行`npm rebuild`)。 4. **配置electron-builder**:在`vue.config.js`中指定兼容Win7的配置。 5. **尝试运行**:在内网环境运行`npm run electron:serve`。 如果问题仍然存在,检查内网环境的系统日志,查看是否有其他缺失的系统组件。 ### 相关问题 1. 如何检查Windows 7是否安装了KB2533623补丁? 2. 如何离线安装Node.js和npm依赖? 3. 如何配置electron-builder以支持更低版本的Windows? 4. 除了降级Electron,还有其他方法解决Electron在Win7上的兼容性问题吗? </think> ### 解决 Windows 7 下 Electron 项目内网运行报错 `uv_os_gethostname function not implemented` 的方法 #### 问题分析 该错误通常是由于以下原因导致: 1. **Node.js 版本兼容问题**:高版本 Node.js 对 Windows 7 的支持有限,`uv_os_gethostname` 在 Win7 上可能无法正常调用 2. **Electron 二进制文件不兼容**:外网构建的 Electron 二进制文件依赖特定系统环境 3. **离线环境缺失依赖**:内网无法下载必要的系统级依赖 #### 解决方案(逐步操作) ##### 1. 降级 Node.js 和 Electron 版本(关键) 在**外网环境**修改项目配置: ```json // package.json { "devDependencies": { "electron": "11.5.0", // 最后一个支持 Win7 的稳定版 "node": "12.22.12" // 兼容 Win7 的 LTS 版本 } } ``` 运行: ```bash npm install ``` > **原理**:Electron 12+ 和 Node.js 14+ 已放弃对 Win7 的官方支持[^1] ##### 2. 配置 electron-builder 强制兼容 Win7 在 `vue.config.js` 中添加: ```javascript // vue.config.js module.exports = { pluginOptions: { electronBuilder: { builderOptions: { win: { target: "nsis", icon: "public/favicon.ico" }, nsis: { oneClick: false, allowToChangeInstallationDirectory: true }, // 关键配置:禁用新 API nodeVersion: "12.22.12", asarUnpack: ["**/*.node"] } } } } ``` ##### 3. 离线打包特殊处理 在外网环境执行: ```bash # 预下载所有依赖(确保内网可使用) npm run electron:build -- --download.strictSSL=false # 复制整个项目到内网时需包含: - node_modules/ - dist_electron/ - .npmrc (内容为: offline=true) ``` ##### 4. 内网环境修复措施 在内网机器上: ```bash # 1. 设置系统环境变量(临时解决 HOSTNAME 问题) set HOSTNAME=LOCAL_MACHINE # 2. 使用兼容模式运行 npm run electron:serve -- --no-sandbox --disable-gpu ``` ##### 5. 终极备用方案:降级系统 API 调用 在 `background.js` 开头添加: ```javascript // 覆盖有问题的系统函数 if (process.platform === 'win32' && process.getSystemVersion().startsWith('6.1')) { process.dlopen = () => {} // 禁用原生模块加载 os.hostname = () => 'LOCALHOST' // 强制返回固定主机名 } ``` #### 最终验证流程 1. 外网:使用 Win7 虚拟机打包项目 2. 内网:运行前执行 `set NODE_ENV=production` 3. 启动命令:`npm run electron:serve -- --disable-http-cache` > **注意**:若仍报错,检查内网机器的 Windows 7 是否安装了 [KB2533623](https://support.microsoft.com/en-us/topic/update-for-the-winhttp-apis-8d9d1fbd-0f9c-7c65-5b40-98dfe36e4d15) 系统补丁(需离线安装包) ### 相关问题 1. 如何检测当前 Electron 版本是否兼容 Windows 7? 2. 除了 `uv_os_gethostname`,还有哪些常见的内网兼容性问题? 3. 如何为离线环境创建完整的 Electron 依赖缓存? 4. 在无法修改代码的情况下,如何通过系统配置解决此类问题? [^1]: Electron 官方支持策略:https://www.electronjs.org/docs/latest/tutorial/support#windows [^2]: Node.js Windows 支持矩阵:https://nodejs.org/en/about/previous-releases [^3]: Win7 系统补丁要求:https://docs.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值