Vue 3 学习指南：从入门到精通

前言

Vue.js 是一款流行的 JavaScript 框架，专注于构建用户界面。Vue 3 是该框架的最新版本，带来了许多新特性和性能改进。本文将带你全面了解 Vue 3，从基础知识到高级特性，逐步提升你的技能。

一、环境搭建

1.1 安装 Node.js 和 npm

在开始使用 Vue 3 之前，你需要安装 Node.js 和 npm（Node Package Manager）。可以从 Node.js 官网 下载并安装适合你操作系统的版本。

安装完成后，可以使用以下命令验证安装是否成功：

node -v
npm -v

1.2 创建 Vue 3 项目

Vue 3 提供了 Vue CLI 工具来快速搭建项目。首先，全局安装 Vue CLI：

npm install -g @vue/cli

然后，使用 Vue CLI 创建一个新项目：

vue create my-vue3-project

按照提示选择默认配置或自定义配置，项目创建完成后，进入项目目录并启动开发服务器：

cd my-vue3-project
npm run serve

访问 http://localhost:8080，你应该能看到 Vue 的欢迎页面。

二、基础知识

2.1 项目结构

Vue 3 项目的基本结构如下：

my-vue3-project/
├── node_modules/       # 依赖包
├── public/             # 公共静态文件
├── src/                # 源代码
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
├── .gitignore          # Git忽略文件
├── package.json        # 项目配置文件
└── README.md           # 项目说明

2.2 Vue 组件基础

Vue 组件是 Vue 应用的基本构建块。每个组件由模板、脚本和样式组成。以下是一个简单的 Vue 组件示例：

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  color: blue;
}
</style>

App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Vue 3!" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

main.js

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

createApp(App).mount('#app')

2.3 Vue 3 新特性

2.3.1 Composition API

Composition API 是 Vue 3 引入的一种新的组件编写方式，使逻辑复用更加简单和直观。以下是一个使用 Composition API 的示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

2.3.2 Teleport

Teleport 是 Vue 3 提供的新特性，用于将组件渲染到 DOM 的指定位置，而不是默认的父组件位置。

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <p>This is a modal!</p>
        <button @click="showModal = false">Close</button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const showModal = ref(false)

    return {
      showModal
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

三、进阶特性

3.1 Vue Router

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用。首先安装 Vue Router：

npm install vue-router@next

然后配置路由：

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

src/main.js

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

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

src/views/Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

src/views/About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

3.2 Vuex

Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用的状态。首先安装 Vuex：

npm install vuex@next

然后配置 Vuex：

src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: state => state.count
  }
})

src/main.js

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

createApp(App).use(store).mount('#app')

在组件中使用 Vuex：

src/components/Counter.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

3.3 Composition API 与 Vuex

在使用 Composition API 时，可以通过 useStore 访问 Vuex 状态：

src/components/CounterComposition.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.getters.count)
    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count,
      increment
    }
  }
}
</script>

四、性能优化

4.1 懒加载

懒加载组件可以减小初始加载体积，提高页面加载速度。可以使用 Vue Router 的异步组件功能实现懒加载：

src/router/index.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

4.2 动态导入

使用 Webpack 的动态导入特性，可以将大型库或模块分割为更小的块，只在需要时加载：

if (condition) {
  import('some-large-library').then(module => {
    // 使用模块
  })
}

4.3 使用 Keep-Alive

<keep-alive> 是 Vue 提供的一个内置组件，用于缓存不活动的组件实例，保留它们的状态或避免重新渲染。

<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-else></router-view>
</template>

然后在路由配置中设置 meta 属性：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { keepAlive: true }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

五、部署与发布

5.1 构建项目

在准备部署项目时，首先需要进行构建：

npm run build

构建命令会生成一个 dist 目录，里面包含优化过的生产环境代码。

5.2 部署到静态服务器

可以将 dist 目录中的文件上传到任何静态文件服务器，如 Apache、Nginx 或 GitHub Pages。

5.2.1 部署到 GitHub Pages

首先，将项目托管在 GitHub 上，然后安装 gh-pages：

npm install --save-dev gh-pages

在 package.json 中添加部署脚本：

"scripts": {
  "deploy": "gh-pages -d dist"
}

然后运行以下命令进行部署：

npm run build
npm run deploy