手把手教你搭建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 [email protected] [email protected] [email protected] --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 输入运行命令