Vue3资料：新手入门教程与实战指南

本文全面介绍了如何开始使用Vue3，包括环境搭建、基础语法、组件开发、路由与状态管理、生命周期钩子的应用以及项目部署与优化。文章详细讲解了Vue3的新特性和最佳实践，并提供了丰富的示例代码，帮助读者深入理解Vue3。

Vue.js 是一个渐进式JavaScript框架，它使构建用户界面变得更容易。Vue3是Vue.js的最新版本，通过引入TypeScript支持、性能优化和API改进等新特性，使得开发体验更加流畅和高效。Vue3的响应式系统经过了彻底的重构，以实现更好的性能，同时提供了更好的维护性。

在开始使用Vue3开发之前，需要先安装Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许你使用JavaScript来编写服务器端应用程序。

下载Node.js

访问Node.js官方网站（https://nodejs.org/），下载适合你操作系统的最新稳定版Node.js安装包。安装过程中，应该勾选“Add to PATH”选项，这样安装的Node.js会自动添加到系统环境变量中。

验证Node.js安装

打开命令行工具，输入以下命令来检查Node.js是否安装成功：

node -v

输出的版本号表示Node.js已经成功安装。

安装Vue CLI

Vue CLI是Vue.js的命令行工具，用于快速搭建项目、预览、开发、构建Vue.js应用程序。使用npm或yarn安装Vue CLI：

npm install -g @vue/cli

或者

yarn global add @vue/cli

验证Vue CLI是否安装成功：

vue --version

输出的版本号表示Vue CLI已经成功安装。

使用Vue CLI创建一个新的Vue3项目。在命令行工具中，执行以下命令：

vue create my-vue3-project

在创建项目时，Vue CLI会提示你选择预设或手动配置。为了确保创建Vue3项目，应该选择手动配置，然后在选择特性时勾选“Vue 3 Preview”。

执行创建后，进入项目文件夹，安装依赖：

cd my-vue3-project
npm install

启动开发服务器：

npm run serve

这会启动一个开发服务器，你可以通过浏览器访问 http://localhost:8080 来查看你的Vue3项目。

在Vue3中，数据绑定是通过v-bind和v-model指令来实现的。v-bind用于绑定DOM属性到Vue实例中的数据，而v-model用于双向绑定表单输入值。

v-bind

例子：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ count }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    count: 10
  }
})

v-model

例子：

<div id="app">
  <input v-model="searchQuery" placeholder="Type something...">
  <p>{{ searchQuery }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    searchQuery: ''
  }
})

计算属性是基于它们的依赖关系缓存的，如果是方法，每次都会重新求值，即使它依赖的数据没有发生变化。计算属性可以更好地管理和复用计算逻辑。

计算属性

例子：

<div id="app">
  <p>{{ fullName }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

方法

例子：

<div id="app">
  <p>{{ fullName() }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  methods: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

Vue3的模板语法遵循HTML和JavaScript的规则，同时添加了一些特殊指令来使我们能够更方便地操作DOM。主要包含插值、指令、事件处理、条件渲染、列表渲染等。

插值

<div id="app">
  <span>{{ message }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

事件处理

<div id="app">
  <button @click="handleClick">Click me</button>
</div>

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
})

条件渲染

<div id="app">
  <p v-if="ok">This is a paragraph</p>
  <p v-else>No paragraph</p>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

列表渲染

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Orange']
  }
})

Vue3中，组件是构建应用程序的基本单元。你可以通过以下两种方式创建和使用组件：

选项式组件

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

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

在父组件中使用：

<template>
  <div id="app">
    <h1>App</h1>
    <HelloWorld />
  </div>
</template>

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

export default {
  components: {
    HelloWorld
  }
}
</script>

语法糖组件

可用 <script setup> 来创建和使用组件，无需导出组件：

<script setup>
import { ref } from 'vue'

const msg = ref('Hello Vue3!')
</script>

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

父子组件通信

父组件可以通过 props 将数据传递给子组件：

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String
})
</script>

<template>
  <div>{{ msg }}</div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const message = 'Hello from parent'
</script>

<template>
  <ChildComponent :msg="message" />
</template>

兄弟组件通信

通过事件总线（Event Bus）实现兄弟组件间的通信：

创建一个Event Bus文件（eventBus.js）：

import { createApp } from 'vue'

const EventBus = createApp({})
export default EventBus

在兄弟组件中使用：

<script setup>
import { onMounted, onUnmounted } from 'vue'
import EventBus from './eventBus.js'

const sendMessage = () => {
  EventBus.emit('message', 'Hello from component A')
}

onMounted(() => {
  EventBus.on('message', (msg) => {
    console.log(msg)
  })
})

onUnmounted(() => {
  EventBus.off('message')
})
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import EventBus from './eventBus.js'

onMounted(() => {
  EventBus.on('message', (msg) => {
    console.log(msg)
  })
})

onUnmounted(() => {
  EventBus.off('message')
})
</script>

使用provide和inject

父组件通过provide提供数据，子组件通过inject接收：

<template>
  <div id="app">
    <Parent />
  </div>
</template>

<script setup>
import { provide } from 'vue'
import Parent from './components/Parent.vue'

provide('message', 'Hello from parent')
</script>

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

<template>
  <p>{{ message }}</p>
</template>

动态组件

<template>
  <div id="app">
    <button @click="currentComponent = 'A'">A</button>
    <button @click="currentComponent = 'B'">B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import A from './A.vue'
import B from './B.vue'

const currentComponent = ref('A')
</script>

异步组件

<template>
  <div id="app">
    <component :is="myComponent"></component>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const myComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
</script>

Vue Router是Vue.js官方的路由器，提供了路由功能，可以实现单页面应用的导航。

安装Vue Router

npm install vue-router@next

配置路由

创建新的路由文件 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(),
  routes
})

export default router

引入路由配置

<script setup>
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')
</script>

路由链接

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

Vuex是一个用于Vue.js的集中式状态管理库，可以用来实现全局状态管理。

安装Vuex

npm install vuex@next

配置Vuex

创建新的store文件 store/index.js：

import { createStore } from 'vuex'

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

引入store

<script setup>
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)

app.mount('#app')
</script>

使用store

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

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

const store = useStore()

const count = computed(() => store.state.count)

const increment = () => {
  store.dispatch('increment')
}
</script>

登录页面状态管理

<template>
  <div id="app">
    <form @submit.prevent="login">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

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

const store = useStore()

const username = computed({
  get() {
    return store.state.username
  },
  set(value) {
    store.commit('setUsername', value)
  }
})

const password = computed({
  get() {
    return store.state.password
  },
  set(value) {
    store.commit('setPassword', value)
  }
})

const login = () => {
  store.dispatch('login')
}
</script>

<script>
export default {
  setup() {
    const store = useStore()

    const username = computed({
      get() {
        return store.state.username
      },
      set(value) {
        store.commit('setUsername', value)
      }
    })

    const password = computed({
      get() {
        return store.state.password
      },
      set(value) {
        store.commit('setPassword', value)
      }
    })

    const login = () => {
      store.dispatch('login')
    }

    return {
      username,
      password,
      login
    }
  }
}
</script>

import { createStore } from 'vuex'

export default createStore({
  state: {
    username: '',
    password: '',
    loginStatus: false
  },
  mutations: {
    setUsername(state, username) {
      state.username = username
    },
    setPassword(state, password) {
      state.password = password
    },
    setLoginStatus(state, status) {
      state.loginStatus = status
    }
  },
  actions: {
    login({ commit }) {
      // 模拟登录逻辑
      setTimeout(() => {
        commit('setLoginStatus', true)
      }, 1000)
    }
  }
})

Vue3生命周期钩子分为两类：实例挂载前的钩子和实例挂载后的钩子。实例挂载前的钩子有beforeCreate和created，实例挂载后的钩子有beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。

实例挂载前的钩子

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件配置 (event handler) 之前被调用。
• created：在实例初始化完成后被调用，此时数据观测 (data observer) 和事件配置 (event handler) 已经完成，但DOM还没有被渲染。

实例挂载后的钩子

• beforeMount：在挂载开始之前被调用，此时已生成虚拟DOM，但还没有挂载到DOM中。
• mounted：在实例挂载到DOM后被调用。
• beforeUpdate：在虚拟DOM更新之前被调用。
• updated：在虚拟DOM更新后被调用。
• beforeUnmount：在卸载组件实例前被调用，此时DOM还没有被移除。
• unmounted：在卸载组件实例后被调用。

• beforeCreate 和 created 可以在实例初始化后做一些初始化操作。
• beforeMount 和 mounted 可以在挂载前后获取DOM节点，进行一些DOM操作。
• beforeUpdate 和 updated 可以在虚拟DOM更新前后同步DOM状态。
• beforeUnmount 和 unmounted 可以在组件卸载前后清理资源。

示例代码

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

onBeforeCreate(() => {
  console.log('beforeCreate')
})

onCreated(() => {
  console.log('created')
})

onBeforeMount(() => {
  console.log('beforeMount')
})

onMounted(() => {
  console.log('mounted')
})

onBeforeUpdate(() => {
  console.log('beforeUpdate')
})

onUpdated(() => {
  console.log('updated')
})

onBeforeUnmount(() => {
  console.log('beforeUnmount')
})

onUnmounted(() => {
  console.log('unmounted')
})
</script>

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

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onBeforeMount(() => {
  console.log('beforeMount')
})

onMounted(() => {
  console.log('mounted')
})

onBeforeUpdate(() => {
  console.log('beforeUpdate')
})

onUpdated(() => {
  console.log('updated')
})

onBeforeUnmount(() => {
  console.log('beforeUnmount')
})

onUnmounted(() => {
  console.log('unmounted')
})
</script>

构建项目

使用vue-cli-service构建Vue3项目：

npm run build

这会生成一个 dist 文件夹，其中包含所有构建的静态文件。

部署到服务器

将构建好的文件上传到服务器，可以通过FTP工具或其他方法上传。配置服务器的web服务器（如Apache或Nginx）来指向构建出来的静态文件。

scp -r dist user@your.server:/path/to/your/app

在服务器上配置Nginx：

server {
  listen 80;
  server_name yourdomain.com;
  root /path/to/your/app;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

懒加载

在大型应用中，可以通过懒加载来提高应用的加载速度，只加载当前页面所需的组件，而延迟加载其它组件。

<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="sidebar"></router-view>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))
const Sidebar = defineAsyncComponent(() => import('./components/Sidebar.vue'))

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '',
        name: 'Sidebar',
        component: Sidebar
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
</script>

路由懒加载

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

CSS分割和缩小

使用PostCSS和CSS Minify插件来优化CSS代码，减少文件体积，提升加载速度。

module.exports = {
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-import'),
          require('tailwindcss'),
          require('autoprefixer')
        ]
      }
    }
  }
}

Vue Devtools

Vue Devtools是一个Chrome扩展，可以帮助你调试Vue应用，查看组件树、状态、性能等信息。

单元测试

使用Jest和Vue Test Utils进行单元测试。

安装测试依赖：

npm install --save-dev jest @vue/test-utils

创建测试文件 src/components/HelloWorld.spec.js：

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = shallowMount(HelloWorld, {
      props: { msg: 'Hello' }
    })
    expect(wrapper.text()).toBe('Hello')
  })
})

运行测试：

npm run test:unit

E2E测试

使用Cypress进行端到端测试。

安装Cypress：

npx cypress install

创建测试文件 cypress/integration/examples/my_spec.js：

describe('My first test', () => {
  it('visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome')
  })
})

运行E2E测试：

npx cypress open

通过以上内容，我们可以看到Vue3为我们提供了一个灵活且强大的前端框架，无论是新手入门还是高级开发者，都能在Vue3中找到适合自己的开发方式。通过构建真实的应用，我们可以更好地理解Vue3的各种概念和技术，进一步提升我们的开发技能。