手把手教你搭建Vuejs环境——零基础

 

                               第一部分 nodejs安装

1. nodejs下载

下载网址：https://nodejs.org/en/download/

2. nodejs安装

选择自己需要的目录进行安装。

3. nodejs测试

在命令提示符中输入 node –v 查看版本号。

第二部分 npm安装

1. npm安装

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本。

2. 设置包路径

包路径就是npm从远程下载的js包所存放的路径。

使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）。

NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，将管理包的路径设置在单独的地方。所以安装目录设置在node.js的目录下，创建npm_modules和 npm_cache。

执行下边的命令：

本机安装node.js在E:\Program Files\nodejs下所以执行命令如下：

npm config set prefix "E:\Program Files\nodejs\npm_modules"

npm config set cache "E:\Program Files\nodejs\npm_cache"

此时再使用 npm config ls 查询NPM管理包路径发现路径已更改。

3. 环境配置

更改之后要配置npm的环境变量。配置路径如图2（用户变量）所示。

图2 用户变量配置

图3 系统变量配置

第三部分 cnpm安装

1. cnpm安装

npm默认会去国外的镜像去下载js包，在这里我们安装淘宝镜像。安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org安装以后，输入命令 cnpm –v 查看版本号。

2. 问题解决

若命令提示符报cnpm不是内部命令，解决方法如下：

找到npm_modules文件夹，本机路径为：E:\Node.js\npm_modules，进入这个路径，输入命令 cnpm –v 即可查看版本。这时，可给当前用户和系统配置变量。配置变量路径为 E:\Node.js\npm_modules\

这时输入cnpm –v 就可以看到cnpm的版本

然后安装nrm,安装命令：cnpm install nrm –g。nrm ls 可以查看所有的镜像，其中带*的镜像就是当前所用镜像。使nrm use XXX可以切换镜像。

第四部分 webpack安装

1. 全局安装

全局安装命令：npm install webpack -g 或 cnpm install webpack -g

npm install webpack-cli –g

npm install --global webpack

npm install --save-dev  webpack-cli

2. 安装成功

然后再命令提示行中输入webpagk，出现如图4所示，则说明安装成功。

图4  webpack安装成功图

第五部分 jdk安装

1. jdk安装

安装JDK 选择安装目录 安装过程中会出现两次安装提示 。第一次是安装 jdk ，第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。（不能都安装在java文件夹的根目录下，jdk和jre安装在同一文件夹会出错）。

2. 环境变量配置

首先要打开系统环境变量配置的页面。具体操作是：打开开始菜单，找到“此电脑”，然后右键“更多”→“属性”。在弹出的页面，选择“高级系统设置”。在弹出的页面，选择“环境变量（N）…”。在弹出的页面，系统变量区域，选择“新建”。在新建页面，输入变量名“JAVA_HOME”；变量值“你的jdk的路径（请参照图5.1，找到你的安装路径）”，然后点击“确定”。 在系统变量区域，选择“新建”，输入变量名“CLASSPATH”；变量值：“.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;”。请注意变量值中，前面的“点“和”分号”，可以直接复制此变量值。然后点击“确定”。

图5.1 jdk环境变量配置（1）

通过滚轴，在系统变量区域找到“Path”变量，并双击打开。点击新建，添加如下两行代码（红色选择框中的两行代码）。如图5.2所示。然后在命令提示符中输入：java –version，即可看到jdk的版本。

图5.2  jdk环境变量配置（2）

第六部分 项目配置

1. 页面配置

（1）去Git下载项目

（2）打开命令提示行，进入目录：E:\github\weixinPay\trunk\hospital-portal-pages，在命令提示行中输入cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev，对程序进行打包。

（3）这时，hospital-portal-pages文件夹中会出现一个package.json文件。

（4）使用IDEA打开项目，打开package.json文件，在IDEA中的Terminal中去安装package.json文件中的包，安装命令为：cnpm i 包名 –S。

（5）安装完所有的包之后，在package.json文件上面击右键，点击show npm scripts,然后运行dev项目。

2. 服务端配置

（1）Maven配置

下载Maven文件，解压到自己想要的目录。使用IDEA打开项目，在菜单栏找到File—Settings，在搜索栏中搜索Maven。配置方法如图7.1所示。

图7.1  Maven配置方法图

（2）jdk配置

使用IDEA打开项目，在菜单栏找到File—Project Structure，配置方法见图7.2所示。

图7.2  jdk配置方法

（3）使用IDEA打开项目，在菜单栏找到View—Tool Windows—Maven，在Maven中加载项目。加载步骤如图7.3所示。根据步骤1找到文件中的pom.xml文件，然后点击下载按钮。之后点击步骤3中的按钮，输入图7.4中的命令，运行文件。

图7.3 加载Maven项目

图7.4 运行文件

（4）运行Maven项目

在菜单栏中找到如图7.5所示的下拉菜单，然后点击编辑配置，此时就到了如图7.6的界面，找到需要运行的Maven项目，在命令行（Command line）中输入命令clean spring-boot:run，之后关闭，在图7.5中点击绿色运行按钮，即可启动项目。

图7.5 编辑配置

图7.6 输入运行命令