如何搭建vue3.0项目

发布时间：2021-12-22 15:06:42 作者：小新
来源：亿速云阅读：247

# 如何搭建Vue 3.0项目

## 前言

Vue.js 作为当前最流行的前端框架之一，其3.0版本带来了诸多性能优化和新特性。本文将详细介绍从零开始搭建Vue 3.0项目的完整流程，涵盖环境准备、项目初始化、目录结构解析、核心配置以及进阶优化等内容，帮助开发者快速上手Vue 3开发。

---

## 一、环境准备

### 1.1 安装Node.js
Vue 3需要Node.js 12.x或更高版本：
```bash
# 检查Node版本
node -v

# 推荐使用nvm管理Node版本
nvm install 16
nvm use 16

1.2 包管理工具选择

推荐使用npm或yarn：

# 安装yarn
npm install -g yarn

1.3 其他工具

VS Code + Volar插件（官方推荐替代Vetur）
Chrome + Vue Devtools 6.0+

二、项目初始化

2.1 使用Vue CLI创建项目

# 全局安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create vue3-demo

# 选择Vue 3预设
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

2.2 使用Vite创建项目（推荐）

更快的现代构建工具：

npm create vite@latest vue3-vite-demo --template vue

cd vue3-vite-demo
npm install
npm run dev

三、项目目录结构解析

vue3-project/
├── public/                # 静态资源
├── src/
│   ├── assets/            # 静态资源
│   ├── components/        # 组件
│   ├── composables/       # 组合式函数（Vue 3推荐）
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia状态管理
│   ├── views/             # 页面级组件
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口
├── .env                   # 环境变量
├── vite.config.js         # Vite配置
└── package.json

四、核心配置详解

4.1 入口文件配置（main.js）

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

const app = createApp(App)

// 注册全局组件
app.component('MyComponent', MyComponent)

app.mount('#app')

4.2 Vite基础配置（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

4.3 环境变量配置

# .env.development
VITE_API_BASE=http://dev.example.com

// 使用环境变量
console.log(import.meta.env.VITE_API_BASE)

五、Vue 3核心特性实践

5.1 Composition API

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件挂载')
})
</script>

5.2 Teleport组件

<teleport to="#modals">
  <div class="modal">...</div>
</teleport>

5.3 Fragment支持

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

六、路由配置（Vue Router 4）

6.1 安装配置

npm install vue-router@4

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

6.2 路由守卫

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    return '/login'
  }
})

七、状态管理（Pinia）

7.1 安装配置

npm install pinia

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

7.2 组件中使用

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

八、项目优化

8.1 代码分割

// 动态导入组件
const Home = () => import('./views/Home.vue')

8.2 按需引入UI库

以Element Plus为例：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

8.3 性能分析

npm install rollup-plugin-visualizer

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [visualizer()]
})

九、项目部署

9.1 生产构建

npm run build

9.2 Docker部署示例

FROM nginx:alpine
COPY dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

十、常见问题解决

浏览器兼容性问题
配置@vitejs/plugin-legacy支持传统浏览器
SFC样式问题
使用<style scoped>或CSS Modules
HMR不生效
检查Vite服务器配置和网络代理

结语

通过本文的指导，您应该已经掌握了Vue 3项目的完整搭建流程。Vue 3带来的Composition API、性能优化等特性，能够帮助开发者构建更高效的前端应用。建议继续探索： - Vue 3响应式原理 - 服务端渲染（SSR） - 微前端架构集成

项目示例代码：https://github.com/example/vue3-starter
官方文档：https://vuejs.org/ “`