前端框架环境搭建
本篇目录[*]环境搭建1.1 nvm安装1.2 nodejs安装，含node和npm1.3 package.json中库的版本号
[*]Vue+Electron项目搭建2.1 使用Vue脚手架创建Vue项目2.2 Vue中引入Electron2.3 安装 Vue Devtools extension 2.4 打安装包
[*]森
1. 环境搭建1.1 nvm安装
nvm下载安装
[*]
https://github.com/coreybutler/nvm-windows/releaseshttps://mmbiz.qpic.cn/mmbiz_png/Mso7NVOvia4aWeRibT9xXfiafveNhK86zEhicW3CZia8TH9dapUJicxvbQsibzjkLsF5hqqp6rqibnRmrTgHwIrcOVdPbQ/640?wx_fmt=png
如果上面地址打不开，或网络比较慢的话，也可从如下地址下载：
链接：https://pan.baidu.com/s/1cS1SwMlh3aChSYhaditvUw提取码：diog
下载完成后，一步步安装完成。
详细参考：Windows 10下编译运行 Mailspring
1.2 nodejs安装，含node和npmnvm常用命令查看帮助
[*]
nvm查看nvm版本
[*]
nvm version查看本地安装的nodejs情况
[*]
vnm list查看可安装的版本
[*]
nvm list available安装指定版本的nodejs
[*]
nvm install 11.11.0使用指定版本的nodejs
[*]
nvm use 11.11.0
如果上面安装命令过慢，可以直接下载相应nvm下相关版本的nodejs压缩包,链接：https://pan.baidu.com/s/1wLJ-wCRITlTAYyAFkaADXg提取码：01t8直接解压到 %APPDATA%\nvm 目录下https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvjP8VnNK0uUXANTN0PJUDKBLSRh0tj52nibAjQc1FQqPoibZxMdQJFU7ZJ1KptynNuD09mpURwZoW5w/640?wx_fmt=png设置好后，如下：
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvjP8VnNK0uUXANTN0PJUDKBYVYvh86Q6NgrhaoU0PtibHrYjWWbGQomOyuWFH1FzlKNYQexohHskAQ/640?wx_fmt=png
npm相关命令npm全局安装位置查看
[*]
[*]
npm root -gC:\Program Files\nodejs\node_modules
查看所有已安装的 npm 软件包（包括它们的依赖包）的最新版本
[*]
npm list也可以打开 package-lock.json 文件查看查看全局安装的软件包
[*]
npm list -g若要仅获取顶层的软件包（基本上就是告诉 npm 要安装并在 package.json 中列出的软件包），则运行
[*]
npm list --depth=0通过指定名称来获取特定软件包的版本
[*]
npm list cowsay查看软件包在 npm 仓库上最新的可用版本
[*]
[*]
[*]
npm view version如：npm view cowsay version
yarn相关
yarn要单独安装
[*]
npm install -g yarn
yarn是什么？yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn是为了弥补 npm 的一些缺陷而出现的
npm的缺陷：npm install的时候巨慢，新的项目拉下来要等半天同一个项目，安装的时候无法保持一致性。由于package.json文件中依赖包版本号的特点，有时会由于安装版本不一致出现bug安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端中，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误
yarn的优点：速度快：并行安装：npm是按照队列执行每一个包，也就是必须等到当前包安装完成之后才能继续后面的安装。而yarn是并行执行所有任务，提高了性能离线模式：如果之前已经安装过一个软件包，用yarn再次安装时会从缓存中获取，就不用像npm那样再从网络下载了
安装版本统一：为了防止拉取到不同的版本，yarn有一个锁定文件（lock file）记录了被确切安装上的模块的版本号。每次只要新增了一个模块，yarn就会创建（或更新）yarn.lock 这个文件。这么做就保证了每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm其实也有办法实现处处使用相同版本的包，但需要开发者执行 npm shrinkwrap 命令。
更简洁的输出：npm的输出信息比较冗长，执行 npm install xxx 时命令行里会不断地打印出所有被安装上的依赖。相比之下，yarn简洁太多，默认情况下直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息
多注册来源处理：所有的依赖包不管它被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是npm要么是bower，防止出现混乱不一致
更好的语义化：yarn改变了一些npm命令的名称，比如 yarn add/removenpm和yarn命令对比
npm
yarn
npm inityarn init
npm init -yyarn init -y
npm installyarn
npm install xxxyarn add xxx
npm install --global xxxyarn global add xxx
npm uninstall xxxyarn remove xxx
npm install xxx@版本号yarn add xxx@版本号
npm install xxx --saveyarn add xxx
npm install xxx --save-devyarn add xxx --dev
npm update --saveyarn upgrade
npm runyarn run
npm run xxxyarn run xxx
npm run devyarn dev
npm --version
yarn --version
1.3 package.json中库的版本号版本号以 x.y.z 为例说明x:主版本号 MAJOR 不兼容的大更改。y:次版本号 MINOR 向下兼容的功能性问题z:修订号 PATCH 向下兼容的问题修复
~x.y.zx,y不变，只更新z的变化，即x.y下的最新版本^x.y.zx不变，更新y和z的变化，即x下的最新版本
2. Vue+Electron项目搭建环境搭建2.1 使用Vue脚手架创建Vue项目1. 安装vue cli查看cli可用版本
[*]
npm view @vue/cli version安装指定版本
[*]
npm install -g @vue/cli@5.0.4或默认安装最新版本，如下：
[*]
[*]
[*]
npm install -g @vue/cli# ORyarn global add @vue/cli
目前用nvm安装的16.14.2但安装成功后，不能正常运行
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvhRm2qPOF7jGmNTlD4sKx7sH9ty5l909zP0FjwUNQaia8WtzpAiazOO4SBbaDHMiaRC6swKNLEgQoIEw/640?wx_fmt=png
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
0 verbose cli 1 info using npm@8.5.02 info using node@v16.14.23 timing npm:load:whichnode Completed in 0ms4 timing config:load:defaults Completed in 2ms5 timing config:load:file:C:\Users\Administrator\AppData\Roaming\nvm\v16.14.2\node_modules\npm\npmrc Completed in 1ms6 timing config:load:builtin Completed in 3ms7 timing config:load:cli Completed in 6ms8 timing config:load:env Completed in 5ms9 timing config:load:project Completed in 2ms10 timing config:load:file:C:\Users\Administrator\.npmrc Completed in 0ms11 timing config:load:user Completed in 0ms12 timing config:load:file:C:\Program Files\nodejs\etc\npmrc Completed in 0ms13 timing config:load:global Completed in 0ms14 timing config:load:validate Completed in 0ms15 timing config:load:credentials Completed in 1ms16 timing config:load:setEnvs Completed in 2ms17 timing config:load Completed in 22ms18 timing npm:load:configload Completed in 22ms19 timing npm:load:setTitle Completed in 1ms20 timing config:load:flatten Completed in 4ms21 timing npm:load:display Completed in 7ms22 verbose logfile C:\Users\Administrator\AppData\Local\npm-cache\_logs\2022-04-18T09_34_57_900Z-debug-0.log23 timing npm:load:logFile Completed in 8ms24 timing npm:load:timers Completed in 0ms25 timing npm:load:configScope Completed in 0ms26 timing npm:load Completed in 39ms27 verbose stack C:\Users\Administrator\AppData\Roaming\nvm\v16.14.2\node_modules\npm\node_modules\libnpmfund:127 verbose stack ../workspaces/libnpmfund27 verbose stack ^27 verbose stack27 verbose stack SyntaxError: Unexpected token '.'27 verbose stack at Object.compileFunction (node:vm:352:18)27 verbose stack at wrapSafe (node:internal/modules/cjs/loader:1032:15)27 verbose stack at Module._compile (node:internal/modules/cjs/loader:1067:27)27 verbose stack at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)27 verbose stack at Module.load (node:internal/modules/cjs/loader:981:32)27 verbose stack at Function.Module._load (node:internal/modules/cjs/loader:822:12)27 verbose stack at Module.require (node:internal/modules/cjs/loader:1005:19)27 verbose stack at require (node:internal/modules/cjs/helpers:102:18)27 verbose stack at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\nvm\v16.14.2\node_modules\npm\lib\utils\reify-output.js:16:38)27 verbose stack at Module._compile (node:internal/modules/cjs/loader:1103:14)28 verbose cwd C:\29 verbose Windows_NT 10.0.1904330 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "@vue/cli"31 verbose node v16.14.232 verbose npmv8.5.033 error Unexpected token '.'34 verbose exit 135 timing npm Completed in 452ms36 verbose code 137 error A complete log of this run can be found in:37 error C:\Users\Administrator\AppData\Local\npm-cache\_logs\2022-04-18T09_34_57_900Z-debug-0.log
可以下载单独的安装包
https://nodejs.org/zh-cn/也可以从我的分享中下载相对完整的nvm包
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvhRm2qPOF7jGmNTlD4sKx7soNoboNqDbhE17Y0FfGQsKBN3TaFx8GZFslBRZacz3JaibDDqK5kq69Q/640?wx_fmt=png注：默认相关npm包安装到了%appdata%\npm目录下，手动找到这些包放到了nvm目录下不同的nodejs版本中
[*]
%appdata%\nvm\v16.14.安装完后，查看安装目录内容
[*]
[*]
λ npm root -gC:\Program Files\nodejs\node_moduleshttps://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvh16uxOCQkqWZvmKbBjNszoMFmWicpcvc5fAYiayjS17ZoNh0WlDVNBu9jMFYT6evISh8ibb7tRLasMA/640?wx_fmt=png2. 创建项目# 下方 cjxt 为项目名，可自己定义
[*]
vue create cjxt设置Vue版本及代码检测，这里选择Vue 2的配置，如下图https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvh16uxOCQkqWZvmKbBjNszoALHNHMib9eGmtsiaen3Y5GxAXfjWZw1IibcFeibQRqxGrq4bC8lhfstsuQ/640?wx_fmt=png
设置包管理工具，这里选择Yarnhttps://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvh16uxOCQkqWZvmKbBjNszoibI1WiaoZlLZNBmgib4a8ah2bZTILum6MtUlXZ0EQH4bVYQunZxV9cYOg/640?wx_fmt=png
开始安装，如下图：https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvh16uxOCQkqWZvmKbBjNszoiaHibYibYHDNq4YmNXZFLX61HVR0trw0CMtfweGMvkwoUDia0tqNKIyDgA/640?wx_fmt=png
安装成功https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvhRm2qPOF7jGmNTlD4sKx7sibyop1s4w9zHJ0QSyqgR40icDyGiaPZjGZ8POtibLzV9aL8KciajrAhqSwg/640?wx_fmt=png
查看更多命令：https://yarnpkg.com/en/docs/cli/install运行
[*]
[*]
cd cjxtyarn serve
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvhRm2qPOF7jGmNTlD4sKx7sxyXj4Bdm0RYZLSgNQgGicDLUMlEoZRXPN9bFFGC9NtnsicEoAInRFiahA/640?wx_fmt=png
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzvhRm2qPOF7jGmNTlD4sKx7sSuros07FE9aYzN087kR1AI4ibIKYDeFL9H6waFgG2icWjJ1RwaPy9VWQ/640?wx_fmt=pngvue-cli-service会启动本地服务 相关源码在
[*]
node_modules\@vue\cli-service 目录下
修改默认启动的端口号，启动参数进行如下修改
[*]
vue-cli-service serve --port 7001
2.2 Vue中引入Electron安装electron-builder
[*]
vue add electron-builder安装过程中会让选择对应要安装的electron版本https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzviaE2IbhwpI40SkgwSiaWxEu0ibuhGia0e6kIk141Pu28m5EN3L2bfPXc1ibuDmsS1w7SiaCTlfXd11okUQ/640?wx_fmt=png
安装完成，如下：
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzviaE2IbhwpI40SkgwSiaWxEu0TFKaxKvwagJOXvJXdrN0kjtWEjoRSGS6IZj8hyN6Y7ib1hATH8zhDcg/640?wx_fmt=png
相关增加修改的文件如下图:
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzviaE2IbhwpI40SkgwSiaWxEu0opUeIrpRwNpiaia2bIVhoeLZeGduqZZd3hh5YAbgYaZTV8R7sfJYq7Yw/640?wx_fmt=png新生成了background.js文件，并修改了package.json。https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzviaE2IbhwpI40SkgwSiaWxEu08pcibBGLPdw6E82ZatZgnAZ58PcTsiamN4IV4yjibWK6HdjzgTRCHCgpg/640?wx_fmt=png
运行项目
[*]
yarn electron:serve
https://mmbiz.qpic.cn/mmbiz_png/ldJdiac3rzviaE2IbhwpI40SkgwSiaWxEu0PUOqNS3QSIUP9PxxmHbNUu1UxpeY0MH3r3DAjiaibWakLicAQZBLCw7Mw/640?wx_fmt=png
2.3 安装 Vue Devtools extension Download the Vue Devtools extension for a better development experience:
[*]
https://github.com/vuejs/vue-devtoolsbackground.js 中有一段加载vue开发工具扩展的代码如下try语句中：
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
app.on('ready', async () => {if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installExtension(VUEJS_DEVTOOLS) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) }}createWindow()})这是网络问题导致，安装不上可以直接注释掉，也可以按如下方法处理
2.4 打安装包 在根目录下运行如下命令:
[*]
yarn electron:buildhttps://blog.csdn.net/ddx2019/article/details/102847122
页:
[1]