Windows下 前端 nodejs -> @vue/cli 环境搭建

Windows 下 前端node环境搭建全过程 nodejs -> @vue/cli 

1. 先下载nodejs 安装包,下载地址：https://nodejs.org/zh-cn/download/

点击系统对应位数版本进行下载。

2. 下载完毕进行解压

解压完毕是这种样子的

4. 将上图文件夹中的 “node-v8.11.4-win-x64” 文件夹进行剪切， 然后在非C盘创建一个文件夹用来安装开发软件使用。

如下图, 由于本人使用的虚拟机进行演示，只有一个盘，所以请忽略分盘

5. 设置环境变量， 右键我的电脑 = 属性= 高级系统设置=弹出窗口选择点击环境变量=在下边的选择框按钮出选择新建，然后将你解压的nodejs文件夹路径进行复制粘贴到变量值处， 变量名可以叫NODE_HOME 如下图所示：

6. 将刚建立的 NODE_HOME 加入到系统path;

7. 测试nodejs 环境变量 按住shift键 再鼠标右键弹出菜单中选择打开一个命令行窗口如下图进行操作测试；

node -v

 

npm -v

 

8.  注册npm淘宝镜像，使npm安装依赖加速，查看配置命令是 npm config list , 输入这个命令可以看到默认使用的是 metrics-registry = "https://registry.npmjs.org/" 镜像地址，国内访问不理想, 如图

npm config list

将其修改为淘宝镜像 输入命令

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

node环境配置完成

9.  安装@vue/cli https://cli.vuejs.org/ 目前是3.0版本

npm install -g @vue/cli

等待安装完成, 安装完成后如下：

输入vue -V 大写V

vue -V
也可以下面的命令打开vue UI界面
vue ui 

10. 破解webstorm 并设置

破解插件下载 对应最新2018.2.1

下载地址

 密码：088w

更新(

      注意如果上面百度网盘下载的插件无法破解，请下载最新的插件:

      JetbrainsCrack-xxx-release-enc.jar

      JetbrainsPatchKeygen-xxx.jar

)

将下载好的两个jar包复制到webstorm安装某个目录下 我直接放到bin目录下的

如图修改webstorm.exe.vmoptions 和 webstorm64.exe.vmoptions 两个文件内容新增一行参数

-javaagent:C:/Development/WebStorm 2018.2.1/bin/JetbrainsCrack-3.1-release-enc.jar

注意将反斜杠改成斜杠保存

在webstorm bin目录下按住shift键 右键选择打开命令行 输入

 ..\jre64\bin\java -jar .\JetbrainsPatchKeygen-1.2.1.jar

选择 3.webstorm 随意输入一个username 回车

进行一些设置

设置js 的 es6以上语法支持

导入小程序代码提示插件 下载地址 https://github.com/miaozhang9/wecharCodejar/blob/master/wecharCode.jar

 

现在就可以按照 http://mpvue.com/mpvue/quickstart/ 步骤 创建一个小程序项目 导入idea 进行开发 使用小程序官方工具进行显示调试了