Vue脚手架

Posted 2023-03-20

参考技术A

在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为： https://cli.vuejs.org/zh/

安装 3.x 版本的 Vue 脚手架。

输入 vue -V 如果出现版本号，就说明安装成功。

脚手架安装成功之后，就可以通过脚手架创建vue项目了。

通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下：

使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。

注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

总结 ：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行 npm install 安装所有依赖项，然后再执行 npm run serve 就可以把项目跑起来了。如果想要再给项目添加新的依赖，可以cd到项目目录，然后执行 vue ui 打开GUI，在可视化面板中就可以给项目添加新的依赖了。

vue 脚手架简单安装流程

参考技术A 能够显示版本号，说明环境已经安装好了。

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

按照提示，打开浏览器输入地址： http://localhost:8080
最终结果如下：

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。