Vue3项目实战：新手入门教程

概述

本文详细介绍了如何从零开始搭建Vue3项目，包括环境配置、项目创建和运行。通过实战教程，你将学会Vue3的组件化开发、模板语法、响应式原理以及路由管理等核心概念。此外，文章还涵盖了项目的部署与上线流程，帮助你顺利完成Vue3项目实战。

Vue3项目实战：新手入门教程 Vue3基础环境搭建

安装Node.js和Vue CLI

为了开始使用Vue3搭建项目，你需要安装Node.js和Vue CLI。Node.js是前端开发的必备工具，而Vue CLI是Vue3项目管理和构建的命令行工具。

1. 安装Node.js：

首先，你需要安装Node.js。你可以从Node.js官网下载最新版本的Node.js，或者通过以下命令安装：

# 使用nvm（Node Version Manager）安装Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.zshrc
nvm install --lts

安装完成后，你可以使用以下命令来验证是否安装成功：

node -v
npm -v

1. 安装Vue CLI：

安装完Node.js之后，就可以安装Vue CLI了。Vue CLI是一个命令行工具，它提供了一套完整的工作流来快速搭建Vue3项目。

npm install -g @vue/cli

安装完成后，你可以使用以下命令验证是否安装成功：

vue --version

使用Vue CLI创建Vue3项目

使用Vue CLI创建Vue3项目非常简单，只需执行以下命令：

vue create my-vue3-project

这里my-vue3-project是你的项目名称，你可以自定义。执行完该命令后，Vue CLI将提示你选择默认配置或手动配置项目。选择手动配置，以确保项目使用Vue3版本。

初始化项目并运行

使用Vue CLI创建项目后，进入项目文件夹并启动开发服务器：

cd my-vue3-project
npm run serve

此时，Vue3项目已经成功搭建并启动了开发服务器，你可以在浏览器中访问http://localhost:8080来查看项目。

Vue3组件化开发入门

介绍Vue3的组件概念

在Vue3中，组件是构建应用的基本单元。每个组件本质上是一个独立的、可重用的Vue实例，具有自己独立的数据、模板和逻辑。

创建和使用Vue3组件

1. 创建组件：

创建一个名为HelloWorld.vue的组件文件：

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

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    description: String
  }
}
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

1. 使用组件：

在其他组件或根组件中使用HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Vue3" description="This is a simple Vue3 component" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

组件间的通信（Props和Events）

1. Props：

父组件向子组件传递数据：

<template>
  <div id="app">
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

1. Events：

子组件向父组件传递数据：

<template>
  <div id="app">
    <ChildComponent @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(childMessage) {
      console.log(`Child Message: ${childMessage}`);
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
}
</script>

组件生命周期实例

当组件被创建、挂载、更新和销毁时，会触发一系列生命周期钩子。以下是一个完整的组件实例，展示了生命周期钩子的使用：

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

<script>
export default {
  name: 'LifecycleComponent',
  data() {
    return {
      message: 'LifecycleComponent'
    };
  },
  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>

Vue3模板语法详解

使用v-bind和v-on指令

1. v-bind：

动态绑定HTML属性：

<template>
  <div>
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" />
    <a v-bind:href="url">Visit Website</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/logo.png',
      url: 'https://example.com'
    }
  }
}
</script>

1. v-on：

绑定事件处理器：

<template>
  <div>
    <button v-on:click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

条件渲染（v-if, v-else）

根据条件显示或隐藏元素：

<template>
  <div>
    <p v-if="isTrue">条件为真</p>
    <p v-else>条件为假</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTrue: true
    }
  }
}
</script>

列表渲染（v-for）

遍历数组或对象：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

Vue3响应式原理与实践

响应式数据的基础

Vue3使用Proxy对象来实现响应式，从而避免了Vue2中使用Object.defineProperty的复杂性。响应式数据可以在组件中通过data和computed属性来定义。

1. 定义响应式数据：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Initial message'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Changed message';
    }
  }
}
</script>

监听器（watch）的使用

使用watch来监听数据的变化：

<template>
  <div>
    <input v-model="inputValue" />
    <p>Input Value: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newVal, oldVal) {
      console.log(`Input changed from ${oldVal} to ${newVal}`);
    }
  }
}
</script>

计算属性（computed）的定义和调用

使用computed来定义依赖于其他数据的值：

<template>
  <div>
    <p>Original: {{ original }}</p>
    <p>Capitalized: {{ capitalized }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      original: 'hello world'
    }
  },
  computed: {
    capitalized() {
      return this.original.toUpperCase();
    }
  }
}
</script>

计算属性的实际应用案例

假设你需要在一个应用中显示用户的名字和头衔，你可以使用计算属性来简化数据的处理：

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      title: 'Developer'
    }
  },
  computed: {
    fullName() {
      return `${this.title} ${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

路由管理与单页面应用开发

安装和配置Vue Router

安装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: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

创建和导航路由

在组件中使用router-view来渲染匹配的路由组件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from 'vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');
</script>

高级路由功能（命名视图、嵌套路由）

1. 命名视图：

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

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      aside: About
    }
  }
];

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

export default router;

在模板中使用<router-view>来渲染命名视图：

<template>
  <div>
    <router-view></router-view>
    <router-view name="aside"></router-view>
  </div>
</template>

1. 嵌套路由：

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

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

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

export default router;

在模板中使用嵌套路由：

<template>
  <div>
    <router-view></router-view>
    <router-view name="child-view"></router-view>
  </div>
</template>

嵌套路由的实际应用场景

假设你有一个主页，其中包含一个用户列表，每个用户列表项都可以导航到该用户的详细信息页面。你可以在主页组件中设置嵌套路由来实现这一功能：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="`/users/${user.id}`">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
      ]
    }
  }
}
</script>

Vue3项目部署与上线

项目的构建与打包

使用Vue CLI构建项目：

npm run build

构建完成后，会在dist文件夹中生成静态文件。

部署到静态服务器

将dist文件夹中的内容上传到静态服务器，例如使用FTP或Git。

持续集成与持续部署（CI/CD）简介

持续集成和持续部署（CI/CD）是现代软件开发的重要实践，通过自动化构建、测试和部署过程来提高开发效率。

1. 配置CI/CD：

使用GitHub Actions或GitLab CI进行自动化构建和部署。

# .github/workflows/main.yml
name: CI/CD

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - name: Install dependencies
      run: npm ci
    - name: Build
      run: npm run build
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.DEPLOY_KEY }}
        target_branch: master
        build_dir: dist

1. 部署到服务器：

配置自动化部署脚本，例如使用scp或rsync将静态文件部署到服务器。

# deploy.sh
scp -r dist/* user@server:/path/to/deploy