创建Vue3项目的步骤

1. 环境准备

• 安装Node.js：确保安装了Node.js，建议使用LTS。

• 安装Vue CLI（可选）：如果你需要使用Vue CLI，可以通过以下命令全局安装：

  npm install -g @vue/cli
  

2. 创建项目

使用Vue CLI

1. 创建新项目：在命令行中运行以下命令，替换my-project为你的项目名称：

   vue create my-project
   

2. 选择配置：

   • 在命令行中，会询问你选择预设（默认或手动选择功能）。选择适合你的选项。
   • 如果选择手动配置，确保选中Vue 3。

3. 进入项目目录：

   cd my-project
   

使用Vite（推荐）

1. 创建新项目：运行以下命令（替换my-project为你的项目名称）：

   npm create vite@latest my-project --template vue
   

2. 进入项目目录：

   cd my-project
   

3. 安装依赖

在项目目录中运行以下命令以安装依赖：

npm install

4. 启动开发服务器

运行以下命令启动开发服务器：

npm run dev

默认情况下，开发服务器会在http://localhost:5173（Vite）或http://localhost:8080（Vue CLI）上运行。

5. 创建组件

1. 在src/components目录下创建新的Vue组件，例如HelloWorld.vue：

   <template>
     <h1>Hello, Vue 3!</h1>
   </template>
   
   <script>
   export default {
     name: 'HelloWorld',
   };
   </script>
   
   <style scoped>
   h1 {
     color: blue;
   }
   </style>
   

2. 在src/App.vue中引入并使用新组件：

   <template>
     <div id="app">
       <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue';
   
   export default {
     name: 'App',
     components: {
       HelloWorld,
     },
   };
   </script>
   

6. 配置路由（可选）

如果需要使用路由，可以安装Vue Router：

npm install vue-router

然后在src/router/index.js中配置路由。

7. 使用状态管理（可选）

如果需要使用状态管理，可以安装Pinia或Vuex：

npm install pinia
# 或者
npm install vuex

8. 启动项目

npm run serve
# 或者
npm run dev