三个概念
- npm：Nodejs下的包管理器。
- webpack：它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
- vue-cli：用户生成Vue工程模板。
一。下载安装node
Node.js官网https://nodejs.org/en/。
本次安装目录为D:\nodejs。安装后目录如下：
1. 检查安装是否正常
进入cmd输入指令 echo %PATH%，如果已经存在nodejs的安装路径，则安装正常。还可以查看node的版本(node -v)和npm的版本(npm -v)
2. 创建npm本地仓库
在nodejs目录下新建两个目录：node_cache 和 node_global
然后运行以下2条命令
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
再运行 npm list -global 查看目录，可以看到目录已经改变了，目前为空。
注意：安装后可能提示node或npm或vue不是内部或外部命令，也不是可运行的程序或批处理文件，关掉cmd命令行重新打开即可
3. 配置镜像站
输入命令 npm config set registry=http://registry.npm.taobao.org，配置一个镜像站，提升速度。
输入命令 npm config list 显示所有配置信息：
检查一下镜像站行不行：npm config get registry
看看能否获得vue的信息：npm info vue
4.下载模块
输入指令 npm install npm -g 升级npm模块。
再次查看global里面有什么模块：npm list -global，发现已经不为空了。
二。安装vue
npm安装vue.js：npm install vue -g
npm安装vue-router：npm install vue-router -g
安装vue脚手架：npm install vue-cli -g
1. 查看vue
输入vue指令会提示 vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件，原因是vue脚本不在path环境变量中，在自定义的global目录下。
所以打开环境变量编辑系统变量path，添加一个 D:\nodejs\node_global：
重新查看 vue 和 vue -V：
2. 使用vue-cli搭建项目
进入到D盘，切换到想要存放项目的根目录，使用 vue init webpack vue01指令搭建项目：（vue01为自定义的项目名）
出现黄色的两条指令说明搭建成功了：
按照指令提示，进入项目目录 cd vue01，安装npm npm install：
成功后使用指令 npm run dev 来运行vue项目：
出现 http://localhost:8080 说明运行成功。进入这个网址就可看到自己的项目了。
网友评论