【备忘】nodejs+npm+electron安装

一、nodejs+npm安装

1、下载nodejs的二进制解压版，在d:\tools下解压，改目录名为nodejs，设置环境变量NODE_HOME为D:\Tools\nodejs;

2、其他配置

npm config set cache="D:\Tools\nodejs\node_cache"

编译过程中下载的东西都缓存在这里的

npm config set prefix="D:\Tools\nodejs\node_global"

这个配置会改变npmrc的位置

npm config set userconfig="D:\Tools\nodejs\user\.npmrc"

npm config set tmp="D:\Tools\nodejs\temp"

3、在环境变量的path中增加%NODE_HOME%与%NODE_HOME%\node_global

npm不需要单独安装，在%NODE_HOME%路径中已经有了，npm的配置文件在%NODE_HOME%\node_global\etc\npmrc中，使用npm config ls -l查看所有默认配置，npm config list查看etc\npmrc中的配置；

后面安装的vue、electron在%NODE_HOME%\node_global下面

4、因为npm用于安装各种模块，国外镜像速度慢，连接不正常，修改npm的registry为淘宝的镜像；

npm config set registry https://registry.npm.taobao.org

不配置，则默认为https://registry.npmjs.org/

5、完整的npmrc文件在d:\Tools\nodejs\node_global\下，内容为：

registry=https://registry.npm.taobao.org

disturl = https://npm.taobao.org/mirrors/node

metrics-registry = https://registry.npm.taobao.org

electron_mirror=https://npm.taobao.org/mirrors/electron/

ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

cache = D:\Tools\nodejs\node_cache

prefix=D:\Tools\nodejs\node_global

HOME =D:\Tools\nodejs

二、安装electron

指导文档https://www.electronjs.org/docs

要先修改electron镜像源：

npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

npm install -g electron

三、测试项目

1、创建项目目录

2、创建package.json,main.js,index.html

a）npm install --save-dev electron

注意后面又--save-dev选项，将项目需要的东西都拷贝到目录下

b）npm start 启动程序，这时的程序是跑在模拟器上的

3、如果运行出现异常

a）安装fix：npm install electron-fix -g

b）运行fix：electron-fix start

c）在package.json的scripts加入

"scripts": {
  "fix": "electron-fix start"
}

四、安装插件

1、创建vue环境

vue组件：npm install -g @vue/cli，vue-cli是老版本

vue init simulatedgreg/electron-vue my-project

2、打包安装工具

打包工具：npm install -g  electron-packager

编译工具：npm install -g  electron-builder

3、其他

渲染：npm install -g webpack

界面元素：npm install -g element-ui

• 创建vue初始项目

创建一个vue初始项目，在它的基础上开发，先Cd到需要创建项目的路径下，然后运行

1. vue create projectname自动创建projectname目录，在项目目录下运行
2. vue add electron-builder 将electron相关的东西加到项目中
3. Npm run electron:serve 运行项目看效果
4. Npm run electron:build 编译，生成的安装文件在dist_electron下，打包前的文件在dist_electron\win-unpacked\下，可以直接运行看效果

• Npm install -g -save的区别

-g是全局安装，--save是只在项目中安装

项目记录

https://github.com/kevin-wynn/vue-bash