使用Vue CLI快速创建Vue3项目

Vue CLI 是官方提供的一款脚手架工具，用于快速搭建Vue.js项目。它能够帮助开发者快速初始化一个Vue项目，配置好项目所需的开发工具、插件等，使得开发过程更加高效。

1. Vue CLI的基本介绍

Vue CLI 是一个功能强大的开发工具，它为开发者提供了以下优势：

快速搭建项目：提供了预设的模板，开发者只需选择即可。
自动化配置：内置了常用的工具和插件，自动完成配置，如Webpack、Babel、ESLint等。
插件系统：可以通过插件扩展功能，支持热加载、单元测试等。
项目管理：可以轻松创建、管理和运行Vue项目。

1.1 安装Vue CLI

首先，需要安装Node.js和npm（Node.js的包管理工具）。安装完毕后，可以使用npm或yarn来安装Vue CLI。

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

安装成功后，执行vue --version检查版本，确认Vue CLI已正确安装。

2. 使用Vue CLI创建Vue3项目

2.1 创建项目

使用vue create命令可以创建一个新的Vue项目。Vue CLI会引导你选择配置和插件，也可以选择使用默认配置。

vue create vue3-project

系统会提示你选择一个预设配置：

Default preset (recommended)：使用Vue3的默认配置。
Manually select features：手动选择特性，比如Babel、Vue Router、Vuex等。

例如，选择手动选择特性时，系统会列出以下选项：

Choose Vue version
Babel
Router
Vuex
Linter / Formatter

2.2 选择Vue版本

选择Vue 3.x版本进行创建：

Vue 3.x：选用Vue3版本。
Vue 2.x：如果想使用Vue2，可以选择此项。

确保选择Vue3版本进行开发。

2.3 项目初始化完成

项目创建成功后，CLI会自动安装项目依赖，安装完成后进入项目文件夹：

cd vue3-project

使用npm run serve启动开发服务器：

npm run serve

此时，浏览器中可以看到“Welcome to Your Vue.js App”的默认页面，说明Vue3项目已经成功创建并运行。

3. 项目结构分析

创建完成的Vue3项目包含以下文件结构：

vue3-project/
├── node_modules/           # 存放所有依赖的模块
├── public/
│   └── index.html          # 页面模板
├── src/
│   ├── assets/             # 存放静态资源（图片、样式等）
│   ├── components/         # Vue组件
│   ├── App.vue             # 根组件
│   ├── main.js             # 入口文件
├── .gitignore              # Git忽略文件
├── package.json            # 项目依赖和脚本
├── README.md               # 项目说明文档

3.1 重要文件说明

public/index.html：项目的HTML模板文件，Vue实例会挂载到该文件中。
src/main.js：项目的入口文件，在这里初始化Vue实例。
src/App.vue：根组件，是整个应用的父组件。
src/components/：存放其他子组件。

4. 代码案例

4.1 修改`App.vue`

在src/App.vue文件中，我们可以修改根组件，添加自己的内容。

<template>
  <div id="app">
    <h1>欢迎使用Vue 3项目</h1>
    <p>{{ message }}</p>
    <button @click="changeMessage">点击修改消息</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: '这是Vue3的项目'
    };
  },
  methods: {
    changeMessage() {
      this.message = '你点击了按钮，消息已更改！';
    }
  }
};
</script>

<style scoped>
#app {
  text-align: center;
  margin-top: 50px;
}

button {
  margin-top: 20px;
  padding: 10px;
  font-size: 16px;
}
</style>

解释：

data()返回一个对象，包含Vue组件的状态数据。
methods定义了一个方法changeMessage，当按钮点击时会修改message的值。

4.2 使用组件

创建一个新的组件并在App.vue中引用它。

# 在src/components/目录下创建一个新的组件文件MessageComponent.vue

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: 'MessageComponent',
  data() {
    return {
      message: '这是一个新的Vue组件！'
    };
  }
};
</script>

然后在App.vue中引入并使用该组件：

<template>
  <div id="app">
    <h1>欢迎使用Vue 3项目</h1>
    <MessageComponent />
  </div>
</template>

<script>
import MessageComponent from './components/MessageComponent.vue';

export default {
  name: 'App',
  components: {
    MessageComponent
  }
};
</script>

解释：