Vue（四）Vue脚手架——手把手教你安装和使用

一、什么是Vue脚手架

    之前我们使用Vue框架，都是通过脚本的方式引入Vue脚本，在html中运行，但是这只是入门级的操作，下面我们介绍Vue脚手架。

    **脚手架：**脚手架是一类软件的总称，此类软甲用于生成**标准化**的项目包，这种项目包具备完善的模块，报错提示，代码提示...

    并且，脚手架是一套已经包含**核心功能**和**标准文件夹结构**的半成品项目源代码，它的优点是标准化，极其便于协作，避免重复搭结构，降低学习成本。在今后所有的项目和新技术，基本都是在脚手架基础上开发的。

二、脚手架的安装和使用

安装脚手架的前提条件：

            **node版本**：要求版本在12以上 —— 检查方式：node -v；

            **中国镜像**：npm config set registry https://registry.npm.taobao.org；

            **备用镜像：**npm  config   set   registry   https://registry.npmmirror.com/

            在**有网**的环境下。

** 安装命令：**

    npm i -g @vue/cli  

满足以上条件，可以安装下载Vue脚手架了。

** 安装步骤**

    **1）点击电脑桌面，按下键盘 “win+R”键，输入 “cmd” ，然后点击 ”确定“。**

            ![](https://img-blog.csdnimg.cn/96a54689d9394cc0a906f4e4264ab265.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZCO5Y-w5qCT5p2h54uXfg==,size_15,color_FFFFFF,t_70,g_se,x_16)       ![](https://img-blog.csdnimg.cn/e1dce1ad428a4ef99af667af70f35a69.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZCO5Y-w5qCT5p2h54uXfg==,size_15,color_FFFFFF,t_70,g_se,x_16)

  **  2）执行安装全局脚手架软件命令：**

window：npm i -g @vue/cli @vue/cli：这是脚手架软件的名字，不能改

mac：sudo npm i -g @vue/cli

注意：

** （1）可以通过“vue -v”**命令查看是否安装成功；

（2）下载时，可能会失败，可以试一试多执行几次安装命令“npm i -g @vue/cli”；

（3）出现错误提示**“4048”，**使用管理员模式打开**“命令提示窗口”**即可。

    ** 3）利用脚手架软件生成项目包**

注意：在哪个目录下创建项目，就在哪里生成。（路径中千万不能有中文文件名）

** （1）生成Vue项目包**

生成命令：vue create vue-pro 其中：”vue-pro“是自定义的文件夹名称。

**     （2）选择配置项**

当你执行 **vue create vue-pro **命令后，点击确定，会出现下面的选择配置项

其中，前两项都是默认配置，不推荐使用，可以用 键盘的 **↑ ↓ **键选择第三个——手动配置

当选择第三项后，点击确定，出现下面的配置选项

由于我们初学，所以我们只用选择下面四项基础配置即可

用空格来选择或者取消，↑ ↓ 方向键来移动，最后用 “回车”确定

    选择上述四项配置后，点击确定，会出现下面的配置提示，但是现阶段，我们用不到，**直接回车即可**。

上面的操作完成后，系统就会给你下载Vue脚手架的项目文件，这里我们静静等待即可！

 到这里我们的项目包就已经下载完成了，看到下面的提示，说明项目包已经安装成功✌✌

使用脚手架运行Vue项目

   **1）Vue的正确打开方式**

** 注意：**想要打开一个vue项目包，必须直接在VScode中打开这个项目包，下面介绍打开一个Vue项目的正确姿势：

     由于我们的VScode是支持多窗口任务运行的，所以如果当前已经开启了一个项目，可以按照下面的步骤操作:

    **首先：**点击我们的VScode中的 “文件”-> “新建窗口”

     **然后：**点击“打开文件夹” -> 找到我们的项目包，选中，点击“选择文件夹”即可

                  **   ！！注意：一定要打开的是我们的整个项目包文件！！**

** 2）让Vue项目跑起来！**

由于我们的项目包自带服务器，所以必须使用自带的服务器来运行项目。

启动方式：必须在项目包目录下执行！！！

命令：npm run serve

    （1）★★ **小技巧：**右键单击package.json文件，选择"在集成终端中打开"，可以快速打开运行窗口；

    （2）打开运行窗口后，输入“**npm run serve**”命令后，即可启动我们的Vue项目。

    （3）按住Ctrl，点local:右侧的连接，即可自动打开浏览器。 

    需要注意vue采用的是**热编译**，修改后无需停止或重启项目，只要一修改，就会立刻自动重新编译，重新运行，自动在界面上显示新内容。

三、脚手架文件结构

    如果你有幸看到了这里，那你一定是个幸运儿。因为前面那么复杂的流程你都走完了，并且后台一切正常。

    但是如果你后台一片报错，或者运行不下去，你也可以联系我，我们一起探讨一下！

    废话不多说，下面让我们通过一张图，来了解一下我们的Vue脚手架项目的文件结构吧！

拓展1、如何运行别人发给你的Vue项目：

    由于node_modules文件比较大，所以我们在传项目时一般不会直接传这个文件，当我们收到别人的文件，发现没有node_modules这个文件夹时，这个项目是运行不了的，此时我们只需要：右键单价**package.json文件 **-> 选择”**在集成终端中打开**“ -> 输入”**npm install**“ 下载node_modules中的所有依赖即可。

拓展2、Vue脚手架中Git相关

    我们使用脚手架创建的项目包是非常专业的，**自带Git的相关配置**。

四、编写第一个Vue网站

    这样的一个简单的网站，我们只需要在原有的文件中稍微更改一些样式，就能够开发出来，后续我们会慢慢介绍，敬请期待！！！