Vue CLI 新手宝典：零基础打造 Vue 应用

什么是 Vue CLI？ Vue CLI 是一个脚手架工具，可简化 vue.js 应用程序的创建和开发过程。它提供了预先配置的项目模板、构建工具和命令，使你无需手动设置即可快速开始。

安装 Vue CLI

1. 确保已安装 node.js 和 npm。
2. 在终端中运行：npm install -g @vue/cli

创建新项目

1. 创建一个新文件夹。
2. cd 进入该文件夹。
3. 运行：vue create my-app
4. 选择一个预设（默认为默认预设）。
5. 等待 Vue CLI 创建项目。

项目结构 Vue CLI 创建的项目具有以下结构：

• node_modules：包含应用程序依赖项。
• public：包含静态资产（如 html、CSS 和图像）。
• src：包含应用程序源代码。
• package.JSON：定义应用程序及其依赖项。

开发应用程序

1. cd 进入应用程序目录。
2. 运行：npm run serve 启动开发服务器。
3. 在浏览器中打开 Http://localhost:8080 以查看应用程序。
4. 在 src 文件夹中编辑 Vue 组件。
5. 保存更改以自动重新加载应用程序。

构建应用程序

1. 运行：npm run build 构建应用程序。
2. 输出的应用程序将位于 dist 文件夹中。

部署应用程序 应用程序构建完成后，你可以将其部署到服务器或托管平台上，例如：

• Netlify
• Vercel
• GitHub Pages

高级功能 Vue CLI 还有许多高级功能，包括：

• 单元测试：使用 Jest 和 Vue Test Utils 进行单元测试。
• 集成测试：使用 Cypress 进行端到端集成测试。
• 状态管理：使用 Vuex 或 Pinia 进行状态管理。
• 路由：使用 Vue Router 进行路由。
• 样式：使用 Sass 或 Less 等 CSS 预处理器。

资源

• Vue CLI 文档
• Vue.js 教程
• Vue 社区论坛