Vue3+Vite快速上手指南

概述

本文详细介绍了如何使用Vue3和Vite搭建项目，包括安装Node.js、创建和配置Vue3+Vite项目、基础配置以及项目部署和调试技巧。通过本文，读者可以快速上手并掌握Vue3+Vite项目的开发流程和常用配置。

Vue3+Vite项目搭建 1.1 安装Node.js

首先，确保已经安装了Node.js。可以通过访问Node.js官网下载安装包，或者使用包管理工具如nvm（Node Version Manager）来安装。以下是安装和验证Node.js版本的命令示例：

# 使用 nvm 安装 Node.js
nvm install --lts

# 验证安装的版本
node -v

1.2 创建项目

使用Vue CLI或直接通过Vite创建Vue3项目。这里推荐使用Vite，因为它在开发模式下速度更快。执行以下命令：

npm create vite@latest my-vue-app --template vue

这将创建一个名为my-vue-app的Vue项目，使用Vue模板。

1.3 进入项目目录

切换到项目目录中，安装依赖并启动项目：

cd my-vue-app
npm install
npm run dev

1.4 项目结构简介

一个新建的Vue项目通常具有以下结构：

my-vue-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.ts
├── package.json
├── vite.config.ts
└── tsconfig.json

1.5 Vue3+Vite项目的基础配置

编辑vite.config.ts文件以进行基础配置。例如，配置输出目录和压缩选项：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    minify: 'esbuild',
  },
});

Vue3基础语法 2.1 Vue3基础概念

• 响应式系统：Vue3使用Proxy来实现响应式系统，比Vue2更高效。
• Composition API：推荐的API，允许更灵活的代码组织，通过组合函数来实现逻辑复用。

2.2 Composition API

使用setup函数来访问Composition API。这是Vue3的新特性，提供了更灵活的逻辑组合方式。

import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment,
    };
  },
});

2.3 Options API

虽然Vue3推荐使用Composition API，但Options API依然可用。如果你是Vue2的资深用户，可以继续使用。

import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  name: 'App',
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
});

2.4 生命周期钩子

Vue3提供了新的生命周期钩子，例如onMounted，这是一个Composition API的钩子。

import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

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

    return { count };
  },
});

Vite常用配置 3.1 基本配置

编辑vite.config.ts文件，进行基本配置，如设置输入输出目录、公共路径等：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    publicPath: '/assets/',
  },
});

3.2 服务器配置

配置Vite开发服务器，例如设置端口、代理等：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:4000',
    },
  },
  plugins: [vue()],
});

3.3 打包配置

配置打包时的压缩级别和环境变量：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  build: {
    minify: 'esbuild',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
  define: {
    'process.env.NODE_ENV': '"production"',
  },
});

Vue3组件化开发 4.1 组件基础

Vue组件是可复用的代码块，通常包含HTML模板、JavaScript逻辑和CSS样式。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      default: 'Default Title',
    },
    description: {
      type: String,
      default: 'Default Description',
    },
  },
};
</script>

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

4.2 子组件与父组件通信

通过props属性在父组件中传递数据给子组件，通过emit事件在子组件中触发事件并传递给父组件。

<!-- Parent Component -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :title="parentTitle" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentTitle: 'Parent Title',
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    },
  },
};
</script>

<!-- Child Component -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="sendDataToParent">Send Data</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    title: {
      type: String,
      default: 'Child Title',
    },
  },
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Hello from Child!');
    },
  },
};
</script>

4.3 组件生命周期

组件生命周期钩子允许在组件的不同阶段执行代码，例如onMounted在组件实例化后调用。

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });
    onBeforeMount(() => {
      console.log('Component is about to be mounted');
    });
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });
    onUnmounted(() => {
      console.log('Component is unmounted');
    });
  },
});

Vue3路由与状态管理 5.1 Vue Router基础

Vue Router是官方推荐的路由库，用于管理前端路由。

npm install vue-router@next

import { createRouter, createWebHistory, createWebHashHistory } 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;

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

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

5.2 路由守卫

在路由切换时执行钩子函数，防止用户访问特定路由前进行某些操作。

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,
});

router.beforeEach((to, from, next) => {
  if (to.path === '/about') {
    console.log('User is going to About page');
  }
  next();
});

router.beforeResolve((to, from, next) => {
  console.log('Before route resolution');
  next();
});

router.afterEach((to, from) => {
  console.log('Route changed from', from.path, 'to', to.path);
});

export default router;

5.3 Vuex状态管理

Vuex是一个用于管理应用状态的库，尤其是在大型应用中。

npm install vuex@next

import { createStore } from 'vuex';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

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

// 在组件中使用store
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const store = useStore();

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

    const increment = () => {
      store.commit('increment');
    };

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

项目部署与调试 6.1 生产环境部署

将项目构建为生产模式，然后部署到服务器或云平台。

npm run build

这将生成一个dist目录，其中包含生产环境下的文件。

6.2 部署到服务器

将dist目录中的文件复制到服务器上的相应目录，通常配置为静态文件服务。

scp -r dist/* user@server:/var/www/html/

6.3 调试技巧

使用Vue Devtools来调试Vue应用，它提供了一个丰富的界面来查看组件树、状态、路由等。

npm install --save-dev vue-devtools

6.4 错误处理

在Vue应用中捕获和处理错误，例如使用try...catch在setup函数中处理异步逻辑。

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    onMounted(() => {
      try {
        fetch('http://api.example.com/data')
          .then((res) => res.json())
          .then((data) => console.log(data))
          .catch((err) => console.error(err));
      } catch (err) {
        console.error('Error during setup:', err);
      }
    });
  },
});