通过Vue3全家桶实战，从基础介绍到高级应用，本文全面覆盖了Vue3的安装与环境配置，核心概念如响应式系统、Composition API与Options API的区别，以及如何在实践中运用这些概念。文章深入探讨了创建基本Vue3应用、使用Composition API实现组件功能、集成Vue Router和Vuex进行状态管理，同时提供SPA优化策略和性能提升方法。通过一步步实战演练，帮助开发者构建高效、响应式的Vue3应用。
Vue3基础介绍 安装与环境配置要开始你的Vue3旅程，确保你的开发环境已经配置好Node.js和npm。然后，安装Vue CLI，这是Vue3项目创建、开发和构建的首选工具。
npm install -g @vue/cli使用Vue CLI创建一个新的Vue3项目：
vue create my-app选择默认的配置，或根据需要自定义配置：
vue create my-app --preset @vue/cli-plugin-vuetify这将创建一个包含Vue3应用的基本结构。接下来，进入项目目录并启动开发服务器：
cd my-app
npm run serve打开浏览器访问http://localhost:8080，看到新应用的欢迎页面。
响应式系统
Vue3的核心特性是其响应式系统，它让数据变化时自动更新UI。在Vue3中，响应式系统基于ref和reactive API。
import { ref, reactive } from 'vue';
const message = ref('Hello, Vue3!');
const user = reactive({ name: 'Jane' });Composition API
Composition API引入了composition-api-plugin来简化组件的创建和扩展。它可以让你更灵活地组合功能，而无需依赖于Options API的全局状态管理。
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const message = ref('From Composition API!');
return () => (
<div>
<h1>{message.value}</h1>
</div>
);
},
});Options API vs Composition API
Options API是一种传统的组件定义方式，适用于那些希望使用更传统的ES6类和属性的方法。Composition API则提供了更多的灵活性和模块化，更适合复杂的项目结构。
在选择API时，请考虑团队的熟悉度、项目规模以及个人偏好。
Vue3响应式系统实战实例：创建基本Vue3应用
使用JavaScript或TypeScript实现一个简单的计数器应用，显示当前计数值，并提供增加和减少计数的功能。
// index.js
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value += 1;
}
function decrement() {
count.value -= 1;
}
export { count, increment, decrement };<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 Counter</title>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script>
</body>
</html>实战：使用Composition API实现简单的组件功能
创建一个名为Counter的组件，使用Composition API的useEffect来管理计数器的行为。
// src/Counter.vue
import { ref, onMounted, onUnmounted } from 'vue';
export default {
name: 'Counter',
setup() {
const count = ref(0);
const increment = () => count.value += 1;
const decrement = () => count.value -= 1;
onMounted(increment); // 在组件挂载后先增加一次
return {
count,
increment,
decrement,
};
},
};使用新创建的Counter组件：
<!-- src/App.vue -->
<template>
<div id="app">
<Counter />
</div>
</template>
<script>
import Counter from './Counter.vue';
export default {
components: { Counter },
};
</script>Vue Router概述
Vue Router是Vue.js的官方路由管理器，用于处理单页应用的路由逻辑。在Vue3中，通过@vue/cli-plugin-router插件轻松集成Vue Router。
vue add router创建一个简单的路由配置：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Counter from './components/Counter.vue';
const routes = [
{ path: '/', component: Counter },
];
const router = createRouter({
history: createWebHistory(),
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');Vuex入门
Vuex是Vue.js的官方状态管理库，主要用于管理应用状态。创建一个新的Vuex实例：
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import { strict as assert } from 'assert';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count += 1;
},
decrement(state) {
state.count -= 1;
},
},
actions: {
increment({ commit }) {
commit('increment');
},
decrement({ commit }) {
commit('decrement');
},
},
});使用新创建的Vuex实例：
<!-- src/App.vue -->
<template>
<div id="app">
<button @click="increment">+</button>
<p>{{ count }}</p>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: mapState(['count']),
methods: mapActions(['increment', 'decrement']),
};
</script>性能优化策略
在构建单页应用（SPA）时，性能优化至关重要。Vue3提供了多种技术来优化性能：
- 懒加载：仅加载应用中的组件，直到它们被用户真正访问。
- 代码分割：将应用代码分割成多个可以按需加载的部分。
- 预渲染：预渲染静态页面以减少动态加载时间。
在Vue CLI中，可以使用配置文件.vue-cli-vite.config.js来启用懒加载：
// .vue-cli-vite.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm${packageName.split('@').join('-')}`;
},
priority: 10,
reuseExistingChunk: true,
},
},
},
},
};实战：应用优化
使用配置文件中的懒加载和代码分割策略：
vue build将构建出的文件部署至生产环境，并测试应用性能。
部署与发布Vue项目构建与打包
Vue CLI提供了一个名为vue build的命令，用于构建和优化Vue项目，生成适用于生产环境的代码。
vue build构建后，生成的文件位于dist目录，可以将这些文件部署到任何支持Web服务器的环境中。
实战：将应用部署至生产环境
- 使用CDN：将JavaScript文件部署至CDN，提高全球用户的加载速度。
- 服务器部署：将应用部署到服务器或云服务，如Nginx、Apache或AWS、Azure等云平台。
# 将构建文件部署到CDN
# 或将构建文件上传到服务器共同學習，寫下你的評論
評論加載中...
作者其他優質文章
