Vue.js 3.0入门指南：就像用jQuery一样轻松上手

2023-09-09 20:51:25

Vue.js 3.0：入门指南，就像用 jQuery 一样简单

简介

Vue.js 3.0 是一个备受欢迎的 JavaScript 框架，凭借其简洁性、灵活性以及强大的生态系统，深受开发者的青睐。如果您想快速上手 Vue.js 3.0，本文将提供类似 jQuery 的入门指南，带您领略其魅力。

1. 引入 UI 库

UI 库在 Vue.js 3.0 中扮演着至关重要的角色，帮助您轻松构建美观、响应式且交互性强的用户界面。Element UI 就是一款流行的 UI 库，提供了丰富的组件和样式，满足各种开发需求。

<!-- 引入 Element UI -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 引入路由

路由是 Vue.js 3.0 中另一个重要的功能，用于管理应用程序的不同页面并实现页面之间的跳转。本文将使用 Vue Router，一个功能丰富、API 友好的流行路由库。

<!-- 引入 Vue Router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

3. 引入 Pinia

Pinia 是一个轻量级的状态管理库，用于管理 Vue.js 3.0 应用程序中的状态。它易于使用、性能卓越，并与 Vue.js 3.0 深度集成。

<!-- 引入 Pinia -->
<script src="https://unpkg.com/pinia/dist/pinia.js"></script>

4. 入门示例

4.1 创建 Vue.js 3.0 项目

<!-- 创建根组件 App.vue -->
<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: '欢迎使用 Vue.js 3.0！'
    });

    onMounted(() => {
      // 在组件挂载后执行
    });

    return {
      message,
      increment() {
        state.message += '！'
      }
    };
  }
};
</script>

<!-- 创建入口文件 main.js -->
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './store';

const app = createApp(App);
app.use(router).use(pinia).mount('#app');