Chapter 11 脚手架Vue CLI使用步骤

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

---

前言

在现代前端开发中，构建和管理应用程序的工具尤为重要。Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。

---

本篇文章参考黑马程序员

一、安装 Vue CLI

使用以下任一命令，在全局环境中安装 Vue CLI。
①使用 yarn：
电脑输入Win+R打开运行窗口，在运行窗口输入“cmd”，点击“确定”。

输入yarn global add @vue/cli并回车，等待 Vue CLI 安装。

②使用 npm：
电脑输入Win+R打开运行窗口，在运行窗口输入“cmd”，点击“确定”。

输入npm install -g @vue/cli并回车，等待 Vue CLI 安装。

二、查看 Vue CLI 版本

安装完成后，通过vue --version命令检查 Vue CLI 的版本，如能查看版本号，则说明安装成功。

三、创建项目架子

输入vue create project-name命令并回车，创建新项目。

【注意】
project-name 为项目名，必须为英文字符，不能使用中文字符。

选择 Vue 2：

四、启动项目

项目创建完成后，使用以下任一命令启动开发服务器，进行本地开发。
①使用 yarn：
输入yarn serve并回车。

②使用 npm：
输入npm run serve并回车。

启动本地开发服务器后，通过浏览器访问 http://localhost:8080 查看应用程序：