Vue.js 是当前最受欢迎的前端框架之一，它非常适合用于构建现代化的 Web 应用程序。Vue.js 的出现是为了简化开发者在操作 DOM、处理数据等方面的工作，使开发过程更加高效和便捷。随着开发技术的发展和大型项目的出现，对于前端框架的要求也越来越高，这就需要有一种高效且快捷的方式来构建项目，这时候 vue-cli 就派上用场了。
什么是 vue-cli?
vue-cli 是 Vue.js 的官方脚手架工具，它能够快速构建 Vue.js 项目，包括目录结构、热重载、单元测试等，让开发者专注于业务逻辑的实现，同时降低了初学者在搭建框架时所需要的时间和精力。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了现代前端工具预设和配置，这些工具和配置都是经过精心设计和优化的，帮助开发者快速构建出高质量的 Vue.js 应用。
vue-cli 的安装
使用 vue-cli 前，需要在本地安装 Node.js，安装好后在命令行中输入以下命令就可以进行 vue-cli 的全局安装：
npm install -g @vue/cli
这个命令会安装最新版本的 vue-cli 工具，如果你想要安装特定版本的 vue-cli，就需要在命令末尾加上版本号。
安装完毕后，可以在命令行中输入以下命令检查是否安装成功：
vue --version
如果出现当前 vue-cli 工具的版本号，则说明安装成功。
使用 vue-cli 构建项目
安装好 vue-cli 后，你可以在任意文件夹路径下新建一个 vue 项目。打开命令行工具，进入到你想要创建项目的文件夹中，执行以下命令：
vue create demo-project
demo-project 就是项目名称，可以根据个人喜好自行修改。
执行完以上命令后，就可以创建一个 vue 项目了，创建工具会在当前目录下创建一个新目录 demo-project，并自动进行项目初始化配置。
在新生成的项目中，有如下的文件结构：
-- -------------------- ---- -------
------------
--- ---------
--- ---------------
--- ------------
--- -----------------
--- ------------
--- ------
--- -----------
--- ----------
--- ---
--- -------
--- ------
- --- --------
--- ----------
- --- --------------
--- -------其中，目录 public 是网站的根目录，其中的 index.html 是入口 HTML 文件，可以在其中改写 title 标签等全局性设置。目录 src 是存放 vue 组件的地方，其中 App.vue 是项目的主组件，HelloWorld.vue 是一个示例组件，main.js 是整个项目的入口文件。
项目运行
cd demo-project npm run serve
执行完以上命令后，打开网页浏览器并访问 http://localhost:8080 ，你就可以看到一个全新的 Vue.js 项目了，我们进入上面提到的 src/App.vue 文件中，将代码修改为如下即可。
-- -------------------- ---- -------
----------
---- --------------
------ --- -------
------
-----------
--------
------ ------- -
----- -------------
---- -- -
------ -
---- -------- -- ---- ------ ----
-
-
-
---------
------ -------
------ -- -
------ --------
-
--------此时重新刷新浏览器，你就可以看到修改后的效果了。
总结
借助 vue-cli 工具创建 Vue.js 项目，将会更加便捷和高效，其自动生成的目录结构和配置文件可以使开发人员专注于核心业务逻辑的开发和实现。Vue.js 提供了很多优秀的特性，这为我们的开发带来了很多便利性，虽然使用 vue-cli 构建项目的过程可能不可避免的会遇到一些错误和问题，但相信它所带来的收益会大于困难。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e73a20f6b2d6eab32b91a6