Discuz! Board

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 830|回复: 0

前端框架环境搭建

[复制链接]

1214

主题

1975

帖子

7486

积分

认证用户组

Rank: 5Rank: 5

积分
7486
发表于 2022-6-8 16:05:16 | 显示全部楼层 |阅读模式
本篇目录
  • 环境搭建
    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

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

提取码:diog

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

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压缩包,
提取码: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 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.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

开始安装,如下图:


安装成功

运行

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|firemail ( 粤ICP备15085507号-1 )

GMT+8, 2024-3-29 04:47 , Processed in 0.062459 second(s), 20 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表