Vue3资料：新手入门必读教程

本文全面介绍了Vue3的基本知识，包括其新特性和与Vue2的主要区别，帮助开发者快速上手。文章还详细讲解了Vue3项目环境搭建、组件开发、路由管理与状态管理等内容，提供了丰富的示例代码和实战演练项目。此外，文中还涵盖了常用插件与工具的集成方法，以及项目构建和部署的详细步骤，是学习Vue3资料不可或缺的指南。

Vue.js是一个渐进式JavaScript框架，它提供了丰富的功能，从简单的视图组件到复杂的单页应用。Vue.js的设计目标是易于理解和上手，同时具备强大的功能，使得开发者能够轻松构建用户界面。

Vue.js的核心功能包括：

• 声明式渲染：通过模板语法，将DOM更新与JavaScript代码分开。
• 双向数据绑定：自动同步数据模型与DOM。
• 组件系统：将应用组织为独立、可复用的组件。
• 虚拟DOM：高效渲染高性能应用。

示例代码

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Vue 3.0带来了许多新特性和改进，主要目标是提高性能、减少包体积、增强类型支持等。

性能提升

• 编译器优化：Vue 3编译器在编译时进行优化，包括静态树提升、静态属性提升等。
• 更高效的渲染：Vue 3通过细粒度的DOM更新进一步提升渲染性能。
• 更好的性能分析工具：Vue 3提供了更详细的性能分析工具，帮助开发者更好地理解应用的运行机制。

更小的体积

• Tree Shaking：引入了Tree Shaking功能，可以移除未使用的代码，从而减小应用体积。
• 功能拆分：Vue 3将核心功能拆分为更细粒度的模块，使开发者能够按需引入所需的模块。

新特性

• Composition API：一种新的API风格，允许更灵活地组织和复用逻辑。
• Teleports：允许将DOM插入到父组件之外的位置，解决了一些复杂的布局问题。
• 更好地支持TypeScript：Vue 3与TypeScript的兼容性更好，提供了更为丰富的类型注解。

示例代码

// Composition API 示例代码
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      console.log('Component is mounted');
    });
    return { count };
  }
}

Vue 3相对Vue 2做了许多改进，以下是主要区别：

• 响应式系统：Vue 3使用Proxy对象替代Object.defineProperty，使响应式实现更加高效。
• Composition API：引入了Composition API，提供了一种新的组织组件逻辑的方式。
• 更好的TypeScript支持：Vue 3有更好的TypeScript支持，引入了更丰富的类型注解。
• 性能提升：通过编译器优化和更高效的渲染机制，Vue 3显著提升了性能。
• 更小的体积：通过Tree Shaking和功能拆分，Vue 3的应用体积更小。

在开始使用Vue3之前，需要确保你的开发环境已经安装了Node.js和npm。以下是安装步骤：

1. 访问Node.js官网下载并安装最新版本的Node.js。
2. 安装完成后，打开终端窗口（命令行工具），输入命令node -v和npm -v，验证Node.js和npm是否安装成功。

示例代码：

# 检查Node.js版本
node -v

# 检查npm版本
npm -v

使用Vue CLI（Vue命令行工具）来快速创建一个新的Vue项目。以下是创建步骤：

1. 安装Vue CLI：

   npm install -g @vue/cli

2. 创建一个新项目：

   vue create my-vue3-project

3. 在创建过程中，当被询问是否使用Vue 3时，选择Manually select features，然后在Vue version选项中选择Vue 3。

示例代码：

vue create my-vue3-project

推荐使用以下工具来提高开发效率：

• VS Code：强大的代码编辑器，提供了丰富的插件支持。
• Vue CLI：Vue 项目的快速搭建工具。
• Vue Devtools：浏览器插件，用于调试Vue应用。
• WebStorm：集成开发环境，提供了强大的代码分析和调试功能。

示例代码

# 安装VS Code
# 访问https://code.visualstudio.com/下载并安装VS Code

Vue组件是Vue应用的基本构建块，每个组件都有自己的状态、模板和逻辑。组件之间的关系类似于模块化编程的函数，可以被复用和组合。

组件的基本结构

一个Vue组件通常包括以下部分：

• 模板：用于定义组件的结构。
• JavaScript逻辑：处理组件的逻辑和事件。
• 样式：定义组件的样式，可以内联或外联。

示例代码

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, Vue 3!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Vue的核心功能之一是数据绑定，它允许开发者在HTML和JavaScript之间建立连接，实现双向数据同步。

双向数据绑定

Vue提供了v-model指令来实现双向数据绑定，它可以在表单元素（如<input>）中实现输入框与变量的实时同步。

示例代码

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

响应式系统

Vue使用Proxy对象来实现响应式系统，当数据发生变化时，Vue会自动更新视图。

示例代码

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

state.count++;
console.log(state.count); // 输出1

Vue提供了生命周期钩子，允许开发者在组件的不同生命周期阶段执行特定的代码。

生命周期钩子列表

• beforeCreate：实例初始化之前
• created：实例初始化完成后，属性和方法已经被计算，但DOM还未挂载
• beforeMount：在挂载开始之前被调用
• mounted：在实例挂载到DOM后被调用
• beforeUpdate：数据更新之前被调用
• updated：数据更新之后被调用
• beforeUnmount：实例即将被卸载时调用
• unmounted：实例被卸载后调用

示例代码

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

Vue Router是Vue官方提供的一个路由插件，用于实现单页应用的路由管理。

基本用法

1. 安装Vue Router：

   npm install vue-router

2. 配置路由：

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from './components/Home.vue';
   import About from './components/About.vue';
   
   const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
   ];
   
   const router = createRouter({
    history: createWebHistory(),
    routes
   });
   
   export default router;

3. 在主应用文件中引入路由配置：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   createApp(App).use(router).mount('#app');

示例代码

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

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

export default router;

// App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router';

export default {
  setup() {
    return { router };
  }
};
</script>

Vuex是一个用于Vue应用的状态管理库，它帮助开发者更好地管理应用的状态。

基本用法

1. 安装Vuex：

   npm install vuex

2. 创建store：

   import { createStore } from 'vuex';
   
   const store = createStore({
    state() {
      return {
        count: 0
      };
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
   });
   
   export default store;

3. 在主应用文件中使用store：

   import { createApp } from 'vue';
   import App from './App.vue';
   import store from './store';
   
   createApp(App).use(store).mount('#app');

示例代码

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="incrementCount">点击我</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const count = store.state.count;

    function incrementCount() {
      store.commit('increment');
    }

    return { count, incrementCount };
  }
};
</script>

在Vue中，可以使用多种方法实现组件间的通信，常见的方法包括：

• Props和Events：父组件通过Props向子组件传递数据，子组件通过Events向父组件传递数据。
• Emits：在Vue 3中，推荐使用新的Emit语法来替代传统的$emit。
• Provide和Inject：提供者和注入者模式，用于跨层级通信。
• Vuex：全局状态管理库，适用于复杂的状态管理需求。

示例代码

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component: {{ message }}</p>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  emits: ['message-updated'],
  methods: {
    sendMessage() {
      this.$emit('message-updated', 'Hello from child');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" @message-updated="handleMessage" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

Vue Router提供了一系列的导航守卫，可以在路由切换之前执行一些逻辑操作。

常见的导航守卫

• beforeEach：在导航触发前调用，可以进行全局的导航守卫处理。
• beforeEnter：在进入某个具体的路由时调用。
• beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave：分别在进入、更新、离开某个组件时调用。

示例代码

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

router.beforeEach((to, from, next) => {
  console.log(`从 ${from.path} 导航到 ${to.path}`);
  next();
});

export default router;

Vue可以与多种UI框架集成，常见的有Element UI、Ant Design Vue等。

Element UI集成

1. 安装Element UI：

   npm install element-ui

2. 在项目中引入Element UI：

   import Vue from 'vue';
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI);

示例代码

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

// App.vue
<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

路由懒加载可以减少应用在初始加载时的体积，只在需要时加载相应的组件。

按需加载

1. 使用动态引入：

   const About = () => import('./components/About.vue');

示例代码

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: () => import('./components/About.vue') }
  ]
});

export default router;

创建一个简单的待办事项应用，使用Vue3、Vue Router和Vuex来实现。

项目结构

- src
  - components
    - TodoItem.vue
  - store
    - index.js
  - router
    - index.js
  - App.vue
  - main.js

TodoItem组件

<!-- TodoItem.vue -->
<template>
  <div>
    <p>{{ text }}</p>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    id: Number
  },
  methods: {
    removeTodo() {
      this.$emit('remove', this.id);
    }
  }
};
</script>

Vuex Store

// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      todos: []
    };
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id);
    }
  }
});

export default store;

Router配置

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: TodoList }
  ]
});

export default router;

TodoList组件

<!-- TodoList.vue -->
<template>
  <div>
    <h1>待办事项</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <ul>
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :text="todo.text"
        :id="todo.id"
        @remove="removeTodo"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import TodoItem from '../components/TodoItem.vue';

export default {
  components: { TodoItem },
  setup() {
    const store = useStore();
    const newTodo = ref('');

    function addTodo() {
      if (newTodo.value) {
        store.commit('addTodo', { text: newTodo.value, id: Date.now() });
        newTodo.value = '';
      }
    }

    function removeTodo(id) {
      store.commit('removeTodo', id);
    }

    return { newTodo, addTodo, removeTodo };
  }
};
</script>

App组件

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router';

export default {
  setup() {
    return { router };
  }
};
</script>

主应用文件

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

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

使用Vue CLI构建Vue项目，打包后可以直接部署到生产环境。

构建命令

npm run build

构建完成后，会在dist目录下生成一个包含静态文件的文件夹，可以直接部署到Web服务器上。

示例代码

npm run build

将打包后的静态文件部署到Web服务器上，可以使用CDN、云服务提供商（如阿里云、腾讯云）或自己的Web服务器。

部署步骤

1. 上传dist目录下的静态文件到服务器。
2. 配置Web服务器（如Nginx）以提供静态文件服务。
3. 测试部署是否成功，确保应用在浏览器中可以正常访问。

示例代码

server {
  listen 80;
  server_name example.com;

  root /path/to/dist;
  index index.html;

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

• Vue.js 官网
• Vue Router 官方文档
• Vuex 官方文档
• Vue CLI 官方文档
• 慕课网Vue教程