一、 Node.js 的下载安装
- Node.js的下载路径:https://nodejs.org/en/download/ ,建议下载msi的安装包。
- 安装Node.js 是为了安装npm,npm是Node.js内置的。
- 1、双击安装
- 2、在安装过程中,注意默认设置系统环境变量,之后一路next。
- 3、安装成功后,在安装路径下检查是否生成了相关文件。
node_modules包下是Node.js程序运行所需要的一些资源文件。 - 4、查看系统环境变量是否添加成功。
cmd中使用 node -v、npm -v 命令查看是否配置环境变量成功。
- 5、安装成功后需要格外注意两个Node.js文件。在c盘用户目录下存在两个Node.js全局文件夹。
没见到npm-cache是因为没有用过,一旦使用缓存目录就生成了。我们试图把这2个目录移动回到D:\nodejs,让缓存内容不在c盘中保存。
先如下图建立2个目录。
然后运行以下2条命令,注意路径的改变。
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
执行上述命令之后,再输入命令npm list -global命令,发现全局配置文件已经发生了改变。
node_global:用于存放以后通过npm下载的资源包。
node_cache:用于存放npm下载资源时的缓存内容。
- 6、修改npm远程镜像仓库,npm远程下载资源时,默认是从国外官方镜像资源库进行下载的,国内访问速度较慢,我们可以将默认镜像仓库修改为阿里的镜像库。
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
输入命令npm config list 显示所有配置信息,我们关注一个配置文件
C:\Users\Administrator.npmrc
- 7、检查镜像是否修改成功,npm能否提供资源下载管理。
- 8、由于将npm默认全局路径node_global进行了修改,因此,我们为了更加方便的使用后续下载的资源,我们需要在提供一个环境变量。
- 在path环境变量中添加一个新的环境变量,值为node_global路径。
二、vue资源的下载安装
通过npm下载vue相关资源到npm本地仓库中去。
命令:npm install vue -g
这里的-g是指安装到global全局目录去
上述命令执行成功后,会在global路径下出现node_modules,其中便有vue资源模块。而在node_global中会存在Vue的相关可执行文件。
三、使用npm下载vue-router模块,该模块用于处理Vue单页面路由问题,我们后续会学习。
npm install vue-router -g
四、使用npm下载vue-cli模块,该模块是一个Vue构建工具。
运行npm install vue-cli -g安装vue脚手架
注意:vue-cli工具是内置了模板集成工具webpack 和 webpack-simple,前者用于管理比较复杂专业的项目,后者比较适用中小型项目。因此,我们不需要单独安装webpack。
五、使用vue-cli工具快速构建一个Vue脚手架项目。
1、在某个练习项目文件下,打开命令行。这里选择了一个空目录。
2、使用vue-cli初始化一个Vue项目。
命令:vue init webpack-simple vue01,该Vue项目名称为vue01。
当然,使用vue init webpack vue01命令同样能够初始化脚手架工程,但它构建速度和检验要更加复杂。
3、进入vue01项目,通过npm下载该基础工程所依赖的资源文件。
- 这个过程可能会有几分钟的时间。
- 在执行npm命令的过程中,可能由于外网资源问题,可能会安装下载较慢,命令持续等待的问题。我们可以使用ctrl+c中断命令执行,再次执行npm install。
- 执行npm install过程中,如果出现警告,额可以不用过多关注,这是版本的警告。
4、执行npm run dev命令,将会启动刚刚构建的项目。
5、访问http://localhost:8080/将会访问该Vue项目的首页。
当我们使用ctrl + c时,将会终止程序执行,停止服务。
六、安装cnpm阿里资源管理器,在上述过程中,我们使用npm时,发现执行过程十分缓慢,这是因为npm install命令会从国外服务器上下载很多配置资源。
命令:npm install cnpm -g
安装cnpm成功之后,我们就可以使用cnpm指令来代替npm指令,vue脚手架项目的构建过程将变成如下过程:
- 1、vue init webpack-simple 项目名称
- 2、cd 项目
- 3、cnpm install
- 4、cnpm run dev
七、vue-devtools安装,查看下述教程安装。
https://segmentfault.com/a/1190000009682735
八、使用webstorm构建Vue项目。
-
我们可以通过npm的相关命令构建Vue脚手架项目,同时也可以通过WebStorm提供的相关功能进行脚手架项目的构建,使构建更加方便。
-
1、新建web项目。
-
2、选择Vue项目,配置基本信息(只需要第一次配置,之后会自动保存信息)。
项目名称vue不建议使用驼峰式命令,使用全小写即可。
3、选择next,进行项目基础信息配置。
基础项目构建成功。相当于执行了vue init webpack vuetest01命令。
4、导入vue脚手架项目基本功能模块。- 选择package.json文件,右键执行Run ‘npm install’命令。相当于执行npm install命令。
- 执行过程依旧会很慢,但会出现进度条。
- 构建成功。
5、启动Vue项目。相当于执行 npm run dev命令。
启动成功。
- 选择package.json文件,右键执行Run ‘npm install’命令。相当于执行npm install命令。