前端框架环境搭建

Qter

本篇目录

• 环境搭建
  1.1 nvm安装
  1.2 nodejs安装，含node和npm
  1.3 package.json中库的版本号
  
• Vue+Electron项目搭建
  2.1 使用Vue脚手架创建Vue项目
  2.2 Vue中引入Electron
  2.3 安装 Vue Devtools extension
  2.4 打安装包
  
• 森
  
  

1. 环境搭建1.1 nvm安装

nvm下载安装

• 
  

https://github.com/coreybutler/nvm-windows/releases

如果上面地址打不开，或网络比较慢的话，也可从如下地址下载：

链接：https://pan.baidu.com/s/1cS1SwMlh3aChSYhaditvUw

提取码：diog

下载完成后，一步步安装完成。

详细参考：Windows 10下编译运行 Mailspring

1.2 nodejs安装，含node和npm

nvm常用命令

查看帮助

• 
  

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 目录下

设置好后，如下：

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 [package_name] 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/remove

npm和yarn命令对比

npm	yarn
npm init	yarn init
npm init -y	yarn init -y
npm install	yarn
npm install xxx	yarn add xxx
npm install --global xxx	yarn global add xxx
npm uninstall xxx	yarn remove xxx
npm install xxx@版本号	yarn add xxx@版本号
npm install xxx --save	yarn add xxx
npm install xxx --save-dev	yarn add xxx --dev
npm update --save	yarn upgrade
npm run	yarn run
npm run xxx	yarn run xxx
npm run dev	yarn dev
npm --version	yarn --version

1.3 package.json中库的版本号

版本号以 x.y.z 为例说明

x:主版本号 MAJOR 不兼容的大更改。

y:次版本号 MINOR 向下兼容的功能性问题

z:修订号 PATCH 向下兼容的问题修复

~x.y.z  x,y不变，只更新z的变化，即x.y下的最新版本

^x.y.z  x不变，更新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但安装成功后，不能正常运行

• 
  

0 verbose cli [0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',0 verbose cli   'install',0 verbose cli   '-g',0 verbose cli   '@vue/cli'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 npm  v8.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包

注：默认相关npm包安装到了  %appdata%\npm  目录下，手动找到这些包放到了nvm目录下不同的nodejs版本中

• 
  

%appdata%\nvm\v16.14.

安装完后，查看安装目录内容

• 
  

λ npm root -gC:\Program Files\nodejs\node_modules

2. 创建项目

# 下方 cjxt 为项目名，可自己定义

• 
  

vue create cjxt

设置Vue版本及代码检测，这里选择Vue 2的配置，如下图

设置包管理工具，这里选择Yarn

开始安装，如下图：

安装成功

查看更多命令：  https://yarnpkg.com/en/docs/cli/install

运行

• 
  

cd cjxtyarn serve

vue-cli-service会启动本地服务 相关源码在

• 
  

node_modules\@vue\cli-service

目录下

修改默认启动的端口号，启动参数进行如下修改

• 
  

vue-cli-service serve --port 7001
2.2 Vue中引入Electron

安装electron-builder

• 
  

vue add electron-builder

安装过程中会让选择对应要安装的electron版本

安装完成，如下：

相关增加修改的文件如下图:

新生成了background.js文件，并修改了package.json。

运行项目

• 
  

yarn electron:serve

2.3 安装 Vue Devtools extension

Download the Vue Devtools extension for a better development experience:

• 
  

https://github.com/vuejs/vue-devtools

background.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:build

https://blog.csdn.net/ddx2019/article/details/102847122