Vue入门（九）

Vue-cli的使用——vue-cli的简介与使用

安装 node.js：

        开始前先在命令框（建议全程使用管理员权限打开命令框）中运行图中的两个命令，如果情况和图中一样则需要安装 node.js

安装步骤：

搜索 node.js官网，进入官网：

如果不习惯英文也可以切换成中文版：

安装自己电脑合适的版本

步骤 1 ：双击下载后的安装包 node-v16.15.1-x64.msi，如下所示：

步骤 2 ：勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 3 ：Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）： 

步骤 4 ：点击下一步 next（下一步）

 

步骤 5 ：可以不勾选，直接点击下一步 next（下一步）

  

 步骤 6 ：点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

步骤 6 ：点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js：

        系统高级设置 ==》高级 ==》环境变量(N)... ==》系统变量(N) ==》Path

        或者在命令框输入 path 命令查看

 

输入以下命令查看版本

查看 ndoe 版本：

ndoe -v

查看 nmp 版本：

nmp -v

如果查看 nmp 版本时出现下面的警告

将 nmp.cmd、npm 文件用 Notepad++ 打开，然后将"prefix -g"修改为"prefix --location=global"，保存时如果提示需要管理员权限点击确定，再保存。

有下面的内容即表明安装 ndoe.js 成功。

---

安装 Vue CLI

 点击学习——>点击教程

按图中序号依次点击：

按上面的步骤进入下面的网页后点击起步：

点击安装：

按照官网教程输入安装命令回车执行：npm install -g @vue/cli

安装时下载可能会很缓慢，可以配置 npm 淘宝镜像，在命令框输入以下命令回车执行：

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

安装完后可能会出现下面的情况： 

自己选择升不升级，如果升级就运行他提供的绿色那行命令。 

安装后输入以下命令查看 Vue-cli 版本号：

vue --version

---

创建一个项目

        根据官网提供的命令 vue create hello-world 创建一个项目，命令标红的部分是项目名可以自定义。

        注意：切换到你要创建项目的目录，然后使用命令创建项目，不然项目创建后可能自己找不到了，要创建在自己知道的地方。

输入命令回车后进入以下界面：

问你是用 Vue2 还是 Vue3 或者自定义，这里选择 Vue2 ，然后回车开始自动创建项目。

耐心等待即可。

 

使用默认配置不用自己手动再配置，回车项目就创建好了。

官网说明：这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

输入上面的两个命令（输入自己界面上的）后等待一会，进入以下界面。

Local：表示本机访问项目的地址

Network：表示同局域网下项目访问地址（这里我显示不可以，因为没有需求所以就没有解决，有需求可以自行百度）

输入提供的地址会进入下面的页面：

停止项目：按Ctrl+c两次即可，然后用编辑器打开项目文件

---

本人使用的是 HbuilderX 碰到终端无法使用的情况，参考这篇文章解决问题（亲测有效）：

解决Hbuilder编辑器内置终端无法输入和不能运行的问题_远行孤帆的博客-CSDN博客_hbuilder终端无反应

---

视频学习地址： 课程介绍，vue2.5入门 教程-慕课网 (imooc.com)   

可以发现视频中的教程录制时间较早和文章的一些步骤不同，大家要按照新的教程来学习，看完最后几个视频最好找最新的更加详细的Vue教程学习，这个教程很多东西没有讲到。