[教程]Vue3 Vue CLI，轻松入门项目搭建攻略

引言随着前端技术的发展，Vue.js 已经成为最受欢迎的前端框架之一。Vue3 作为 Vue.js 的最新版本，带来了许多改进和新特性。Vue CLI（Command Line Interface）则...

引言

随着前端技术的发展，Vue.js 已经成为最受欢迎的前端框架之一。Vue3 作为 Vue.js 的最新版本，带来了许多改进和新特性。Vue CLI（Command Line Interface）则是官方提供的脚手架工具，可以帮助开发者快速搭建 Vue 项目。本文将详细介绍如何使用 Vue CLI 搭建 Vue3 项目，帮助新手轻松入门。

一、环境准备

在开始之前，请确保你的开发环境已经准备好以下工具：

1. Node.js：Vue CLI 需要 Node.js 环境，请从官网下载并安装最新版本的 Node.js。
2. npm：Node.js 会自带 npm，如果没有，请通过 Node.js 安装。
3. Vue CLI：全局安装 Vue CLI，以便在命令行中使用。

npm install -g @vue/cli

二、创建 Vue3 项目

安装 Vue CLI 后，可以通过以下命令创建一个新的 Vue3 项目：

vue create my-vue3-project

这里 my-vue3-project 是你想要创建的项目名称。

2.1 选择预设

Vue CLI 会询问你一些配置选项，包括预设、功能插件等。对于新手来说，推荐选择“Manually select features”（手动选择功能），这样可以更清晰地了解每个功能的作用。

2.2 选择功能插件

在手动选择功能时，以下是一些常用的插件：

• Babel：用于代码转译。
• TypeScript：用于 TypeScript 支持。
• Progressive Web App (PWA) Support：用于构建渐进式 Web 应用。
• Router：用于路由管理。
• Vuex：用于状态管理。
• CSS Pre-processors：用于 CSS 预处理器，如 Sass 或 Less。
• Linter / Formatter：用于代码风格检查。

根据你的需求选择合适的插件。

2.3 项目结构

创建项目后，Vue CLI 会生成以下目录结构：

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

三、项目配置

3.1 修改 main.js

在 src/main.js 文件中，你可以配置 Vue 应用的入口文件。以下是一个简单的示例：

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

3.2 修改 App.vue

在 src/App.vue 文件中，你可以配置 Vue 应用的根组件。以下是一个简单的示例：

<template> <div> <h1>Hello Vue3!</h1> </div>
</template>
<script>
export default { name: 'App'
}
</script>
<style>
/* 在这里编写样式 */
</style>

3.3 修改 package.json

在 package.json 文件中，你可以配置项目的依赖、脚本等。以下是一个简单的示例：

{ "name": "my-vue3-project", "version": "0.1.0", "description": "", "main": "src/main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service test" }, "dependencies": { "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-router": "^4.5.0", "@vue/cli-plugin-vuex": "^4.5.0", "@vue/cli-service": "^4.5.0" }
}

四、项目运行与调试

4.1 运行项目

在命令行中，进入项目目录并运行以下命令：

npm run serve

这将在本地启动一个开发服务器，并自动打开浏览器访问 http://localhost:8080/。

4.2 调试项目

在开发过程中，你可以使用浏览器的开发者工具进行调试。以下是调试 Vue 应用的基本步骤：

1. 打开浏览器，访问 http://localhost:8080/。
2. 打开浏览器的开发者工具。
3. 切换到“源”标签页。
4. 在源代码中设置断点，并启动调试。

五、总结

通过本文的介绍，相信你已经掌握了使用 Vue CLI 搭建 Vue3 项目的技巧。在实际开发过程中，你可以根据自己的需求进行配置和扩展。祝你在 Vue3 的世界里探索出一片属于自己的天地！