安装Vue-cli并创建一个Vue-cli应用程序

一、配置环境

1.安装Node.js

1.访问Node.js官网，下载Node.js

Node.js中文官网：下载 | Node.js 中文网 (caibaojian.com)

这里以Windows 64位为例进行下载

2.下载完成后双击文件，进行安装

3.一路next，直到安装完成

4.检验安装是否成功

win + r打开命令行

• 输入node -v，查看是否能够正确打印出版本号即可！

• 输入npm -v，查看是否能够正确打印出版本号即可！

出现如下结果表明安装成功

2.安装Git

详细安装教程参考博客：Git下载与安装_づ七爷的博客-CSDN博客

3.升级npm版本

在命令行输入下述命令进行升级

npm install -g npm	-- 默认升级为最新版本

查看npm版本

npm -v

重新加载项目依赖(一定要执行)

npm install

4.配置淘宝镜像加速器

配置淘宝镜像加速器后，下载会快很多

npm config set registry https://registry.npm.taobao.org

在命令行输入上述命令进行安装

5.安装vue-cli

vue cli的包名称由vue-cli改成了@vue/cli 如果你再以前已经安装了vue-cli 那么你需要先将老版本卸载。

卸载命令：

npm uninstall vue-cli -g

1.在命令行输入下述命令进行安装

npm install -g @vue/cli

安装缓慢，耐心等待，若卡住不动鼠标点击命令窗户后按几下回车~~~

安装过程中会出现一堆警告，表示依赖包过时了，暂时不要管他

2.安装完成后输入下述命令查看vue版本号

vue -V

说明vue-cli安装成功

二、创建Vue-cli程序

1.选择或创建一个空文件夹

2.在命令行中进入到该目录

3.创建Vue项目

myvue为项目名称，可以根据需求命名，但尽量全小写

vue create myvue

4.进行项目设置

选择Vue2的版本

 

等待配置完成

 

出现Successfully，表明创建成功

 

5.运行项目

1.输入下列指令进入项目

cd myvue

2.输入下列指令启动项目

npm run serve

 

等待编译，编译完成后点击连接访问网页

浏览器访问此网址：http://localhost:8080

 

运行成功

9.停止项目运行

在命令行页面 CTRL + c

输入“y”结束运行