1.相关名词解释
npm: Nodejs下的包管理器。
webpack: 主要作用通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(快速创建一个vue项目,生成一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装使用)
2.安装
1.官网下载安装包。网址:https://nodejs.org/en/
2.更换成自己想要存放的目录,记住路径。后面有用
然后一路next进行安装
这样安装会自动将path添加到环境变量中
可以win+r,cmd进命令行,输入echo %PATH%查看一下
到安装nodejs的目录下新建下图所圈目录
运行如下命令,路径与自己的保持一致
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
可以看到路径已经改变,且目录里面为空。npm list -global查看npm本地仓库
然后为npm配置一个镜像仓库,命令为:npm config set registry=http://registry.npm.taobao.orgnpm config list 显示所有配置信息
npm config get registry查看镜像仓库是否配置成功
查看是否能够拉取到vue的信息 npm info vue
开始安装vue
npm install npm -g (npm install:安装或更新命令;npm:模块名字 ; -g:表示安装到global目录下,就是前面设置的d:\nodejs\node_global目录)
可以看出,npm已经升级了。
已经不为空了。
此时,默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录,
直接运行npm install等命令会报错的。
需要配置环境变量:
增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules
注意路径,然后重新打开cmd。让设置生效安装vue.js
命令:npm install vue -g (-g:安装在全局目录中)
安装vue-router
命令:npm install vue-router -g
npm install vue-cli -g安装vue脚手架
如果安装过程中出现如下错误,可以ctrl+c停止进程,重新安装。
安装完毕后,直接运行vue是不行的,因为我们将vue安装在了自己定义的global目录下,需要设置变量
重新打开cmd,输入vue即可看到信息
创建一个vue项目,根据个人需求蛇者具体信息
初始化,安装依赖
npm install
运行 npm run dev
出现localhost:8080代表成功
运行npm run build 生成静态文件