vue3 - 01搭建工程

**Vue3 -01 搭建工程**

在本文中，我们将一步步地讲解如何使用 Vue3 来搭建一个新的项目。我们将使用 Vue CLI 来创建一个新项目，并且会对一些重要的配置进行说明。

### 安装 Vue CLI首先，我们需要安装 Vue CLI。如果你已经安装过了，可以跳过这一步。

bashnpm install -g @vue/cli

或者，如果你使用 yarn：

bashyarn global add @vue/cli

### 创建新项目接下来，我们可以使用 Vue CLI 来创建一个新的 Vue3项目。我们将使用 `--proxy`选项来配置代理服务器。

bashvue create my-vue-app --proxy

或者，如果你使用 yarn：

bashyarn create v2.2.1? please input your project name: my-vue-app? select the features that you want to add in this project:
? Press Enter to use default values.
? do you want to save this as a preset for future projects? (y/N)

###项目结构创建完成后，我们可以看到一个新的 Vue3项目已经被创建了。我们可以在 `my-vue-app` 目录下找到以下文件和目录：

bashmy-vue-app/
node_modules/
public/
index.htmlsrc/
App.vuemain.jsvue.config.jspackage.jsonyarn.lock

### 配置代理服务器在上一步中，我们已经配置了代理服务器。我们可以在 `vue.config.js` 文件中找到相关的配置。

javascriptmodule.exports = {
 devServer: {
 proxy: {
 '^/api': ' /> },
 },
};

### 创建组件接下来，我们需要创建一个新的 Vue 组件。我们可以在 `src` 目录下找到 `App.vue` 文件。

vue<template>
 <div>
 <h1>{{ title }}</h1>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 title: 'Hello, Vue3!',
 };
 },
 methods: {
 handleClick() {
 console.log('你点击了我！');
 },
 },
};
</script>

### 使用组件最后，我们需要在 `main.js` 文件中使用我们刚刚创建的组件。

javascriptimport { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(router).mount('#app');

### 总结在本文中，我们一步步地讲解了如何使用 Vue3 来搭建一个新的项目。我们使用 Vue CLI 来创建一个新项目，并且对一些重要的配置进行说明。我们还创建了一个新的 Vue 组件并且使用它。

希望你喜欢这个教程。如果你有任何问题或者建议，请告诉我！