VUE学习(一)-安装vue-cli2和vue-cli3脚手架并创建项目
一.安装nodejs
- 进入nodejs官网:http://nodejs.cn/download/
- 下载后双击安装即可
- 查看是否安装完成,win+R -> cmd - > 回车 ,输入如下命令 (貌似不用配置环境变量,如果输入如下命令提示“...不是内部命令...”,请配置环境变量)
二.安装vue-cli2脚手架
1.了解npm与cnpm
- npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
- cnpm:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以用淘宝的镜像替代国外服务器。使下载更快。
两种方式二选一即可
2.npm 方式安装
指定镜像服务器
命令"npm -install -g vue-vli" 安装vue-cli脚手架时,因为网络原因(服务器国外的),可能安装失败。我们可通过淘宝镜像安装
方法一 输入命令:npm install -gd express --registry=http://registry.npm.taobao.org
方法二 1.设置npm的下载位置为淘宝镜像,命令 npm config set registry http://registry.npm.taobao.org
2.npm install -g vue-cli
2.cnpm 方式安装
2.1 安装cnpm
- WIN+R -> CMD -> 回车,cnmp -v 查看是否安装,
- 输入命令 : npm install -g cnpm --registry=http://registry.npm.taobao.org
- 安装完成后,输入cnmp -v 测试是否安装成功,如下图所示说明安装成功
2.2 安装vue-cli2
- cnmp install -g vue-cli 或者 cnmp install -gd vue-cli(加d,包含开发环境的安装)
- 查看是否安装完成 vue -V (注意是大写的V)
2.3 创建vue-cli2项目
- vue init webpack 项目名称(命令全部小写,使用webpack的模板创建),如下图按顺序操作即可
三. 安装vue-cli3脚手架并创建项目
卸载vue-cli2
1.如果安装了vue-cli2,先卸载掉
如果是npm安装的输入命令 npm uni vue-cli -g 进行卸载,如果是cnpm安装的,则输入 cnpm uni vue-cli -g
(如果用 npm uni vue-cli -g 卸载不成功就用cnpm uni vue-cli -g试试,没什么科学依据,试试电脑不会爆炸)
2.安装vue-cli3
- 普通安装:npm install -g @vue/cli
- 淘宝镜像安装:cnpm install -g @vue/cli
开始安装
查看是否安装成功 vue -V (V大写)
3.创建项目
- 图形界面的方式创建项目
a.启动图形界面
不进行详述
- 通过命令行创建(主流方式)
a.命令 vue create 项目名称
后面的选择默认的即可,然后等待