[教程]从零开始：Vue.js与Vue-CLI项目搭建全攻略

引言

Vue.js 是一款流行的前端JavaScript框架，它使得构建用户界面变得更加简单和高效。Vue-CLI（Vue Command Line Interface）是 Vue.js 官方提供的一个命令行工具，用于快速搭建 Vue.js 项目。本文将详细指导您从零开始，使用 Vue-CLI 搭建一个 Vue.js 项目。

环境准备

在开始之前，请确保您的开发环境中已经安装了以下软件：

1. Node.js 和 npm：Vue-CLI 需要 Node.js 和 npm 环境。您可以从 Node.js 官网 下载并安装。
2. Vue-CLI：通过 npm 安装 Vue-CLI。

安装 Vue-CLI

打开命令行工具，执行以下命令安装 Vue-CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue-CLI 是否安装成功：

vue --version

创建项目

安装 Vue-CLI 后，您可以使用以下命令创建一个新的 Vue.js 项目：

vue create project-name

其中 project-name 是您项目的名称。

选择预设

Vue-CLI 会引导您选择一个预设，这些预设包含了不同的配置和插件。以下是一些常见的预设：

• Manually select features：手动选择项目所需的配置和插件。
• Default ([Vue 2] babel, eslint)：默认配置，适用于 Vue 2 项目。
• Default (Vue 3 Preview) ([Vue 3] babel, eslint)：Vue 3 的默认配置。

根据您的需求选择合适的预设。

项目配置

在选择预设后，Vue-CLI 会引导您进行一些配置，例如：

• Project name：项目名称。
• Project description：项目描述。
• Author：作者名称。
• Use history：是否使用 Vue Router。
• Use Babel：是否使用 Babel。
• Use ESLint：是否使用 ESLint。

根据您的需求进行配置。

运行项目

创建项目后，进入项目目录并运行以下命令启动开发服务器：

cd project-name
npm run serve

默认情况下，开发服务器会在 http://localhost:8080/ 上运行。您可以在浏览器中打开此地址查看您的项目。

项目结构

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

project-name/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
│ └── router/
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── package.json
└── package-lock.json

• public/index.html：项目的入口 HTML 文件。
• src：源代码目录。
• src/assets：静态资源目录。
• src/components：组件目录。
• src/App.vue：主组件。
• src/main.js：入口文件。
• src/router：路由配置。

总结

通过以上步骤，您已经成功从零开始搭建了一个 Vue.js 项目。Vue-CLI 简化了项目的初始化过程，使得开发 Vue.js 应用变得更加高效。希望本文能对您有所帮助。