首页手记 Vue3项目实战：新手入门与初级技巧教程

Vue3项目实战：新手入门与初级技巧教程

标签：

Vue.js

本文详细介绍了Vue3项目实战，从基础知识到组件化开发，再到路由和状态管理，帮助新手入门并提升到初级水平。文章内容涵盖了Vue3的安装、项目搭建、组件使用、路由配置以及状态管理等关键部分。此外，还提供了实战案例，展示了如何创建一个简单的博客应用，并讲解了项目的部署与调试技巧。

Vue3项目实战：新手入门与初级技巧教程

Vue3基础知识介绍

安装Vue3

在开始使用Vue 3之前，我们需要先安装它。Vue 3 的安装可以通过三种不同的方式完成：使用CDN、使用Vue CLI、或者手动安装。

使用CDN
可以直接在HTML文件中引入Vue的CDN链接，这种方式适合小项目或学习使用。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@next"></script>

使用Vue CLI
Vue CLI 是一个用于构建 Vue.js 项目的命令行工具。首先需要全局安装 Vue CLI。
```
npm install -g @vue/cli
```
然后，通过以下命令创建新的 Vue 项目。
```
vue create my-vue-project
```
在创建项目时，可以选择 Vue 3 版本。
手动安装
如果已经有一个项目，可以手动安装 Vue 3。
```
npm install vue@next
```

简单的Vue3项目搭建

在安装好 Vue 之后，我们可以开始创建一个简单的 Vue 3 项目。首先创建一个 index.html 文件，然后引入 Vue 和一个简单的 Vue 实例。

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 HelloWorld</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    const { createApp } = Vue;

    const App = {
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
    };

    createApp(App).mount('#app');
  </script>
</body>
</html>

Vue3组件化开发基础

Vue 3 使用组件化开发，便于代码维护和复用。组件通常由标签、模板、脚本和样式部分组成。

创建组件
通过创建一个新的 Vue 实例来定义一个组件。

<div id="app">
 <my-component></my-component>
</div>
<script>
 const { createApp, h } = Vue;

 const MyComponent = {
   name: 'MyComponent',
   template: '<div>这是我的组件</div>',
 };

 const app = createApp({
   components: {
     MyComponent,
   },
 }).mount('#app');
</script>

复用组件
可以将组件引入到其它文件中复用。

<script type="module" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./components/MyComponent.vue"></script>

局部注册组件
除了在全局注册组件，也可以在局部注册。

<script>
 const { createApp, h } = Vue;

 const MyComponent = {
   name: 'MyComponent',
   template: '局部注册的组件',
 };

 const App = {
   components: {
     MyComponent,
   },
   template: '<div><my-component></my-component></div>',
 };

 createApp(App).mount('#app');
</script>

Vue3项目实战之组件使用

创建Vue3组件

创建组件时，首先定义它的模板和逻辑。

<script>
  const { createApp, h } = Vue;

  const MyComponent = {
    name: 'MyComponent',
    template: `<div>{{ message }}</div>`,
    data() {
      return {
        message: '这是我的组件',
      };
    },
  };

  const app = createApp({
    components: {
      MyComponent,
    },
    template: '<my-component></my-component>',
  }).mount('#app');
</script>

使用props传递数据

通过 props 将数据从父组件传递给子组件。

<script>
  const { createApp, h } = Vue;

  const MyComponent = {
    name: 'MyComponent',
    props: ['message'],
    template: '<div>{{ message }}</div>',
  };

  const app = createApp({
    components: {
      MyComponent,
    },
    template: `
      <div>
        <my-component :message="parentMessage"></my-component>
      </div>
    `,
    data() {
      return {
        parentMessage: '从父组件传递的数据',
      };
    },
  }).mount('#app');
</script>

事件绑定与触发

事件绑定与触发是组件间通信的常用方式之一。

<script>
  const { createApp, h } = Vue;

  const MyComponent = {
    name: 'MyComponent',
    template: '<button @click="handleClick">点击我</button>',
    methods: {
      handleClick() {
        this.$emit('custom-event', '事件被触发');
      },
    },
  };

  const app = createApp({
    components: {
      MyComponent,
    },
    template: `
      <my-component @custom-event="handleCustomEvent"></my-component>
    `,
    methods: {
      handleCustomEvent(message) {
        console.log(message); // 输出：事件被触发
      },
    },
  }).mount('#app');
</script>

Vue3路由与导航

安装并配置Vue Router

安装Vue Router
```
npm install vue-router@next
```

定义路由
配置路由信息，包括路径和对应的组件。

<script>
 const { createApp, h } = Vue;
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
     component: () => import('./components/Home.vue'),
   },
   {
     path: '/about',
     name: 'About',
     component: () => import('./components/About.vue'),
   },
 ];

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

 const app = createApp({
   router,
   template: '<router-view></router-view>',
 }).mount('#app');
</script>

路由的定义与使用

在模板中使用 <router-view> 组件来渲染当前路由对应的组件。

<script>
  const { createApp, h } = Vue;
  import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
  import Home from './components/Home.vue';
  import About from './components/About.vue';

  const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ];

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

  const app = createApp({
    router,
    template: '<router-view></router-view>',
  }).mount('#app');
</script>

路由参数及导航守卫

路由参数
在定义路由时，可以使用动态参数。

<script>
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/user/:id',
     name: 'User',
     component: () => import('./components/User.vue'),
   },
 ];
</script>

导航守卫
通过导航守卫来控制路由跳转的条件。

<script>
 router.beforeEach((to, from, next) => {
   if (to.name === 'User') {
     if (!to.params.id) {
       next('/home');
       return;
     }
   }
   next();
 });
</script>

Vue3状态管理

Vuex入门介绍

Vuex 是 Vue 3 的官方状态管理库。它使得应用的状态管理更加简单和强大。

安装与配置Vuex

安装Vuex
```
npm install vuex@next
```

配置Vuex
在项目中设置一个 Vuex 实例。

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

 const store = createStore({
   state: {
     count: 0,
   },
   mutations: {
     increment(state) {
       state.count++;
     },
   },
   actions: {
     increment({ commit }) {
       commit('increment');
     },
   },
 });
</script>

使用Vuex进行状态管理

在组件中通过 store 来读取和修改状态。

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

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

  const { createApp, h } = Vue;

  const App = {
    template: `
      <div>
        <p>{{ count }}</p>
        <button @click="incrementCount">增加计数</button>
      </div>
    `,
    computed: {
      count() {
        return store.state.count;
      },
    },
    methods: {
      incrementCount() {
        store.dispatch('increment');
      },
    },
  };

  createApp(App).use(store).mount('#app');
</script>

Vue3项目实战之实战案例

创建一个简单的博客应用

创建一个简单的博客应用，包含文章列表、文章详情等功能。

<script>
  const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      name: 'Home',
      component: () => import('./components/Home.vue'),
    },
    {
      path: '/post/:id',
      name: 'Post',
      component: () => import('./components/Post.vue'),
    },
  ];
</script>

实战案例的组件拆分与组合

将博客应用拆分为多个组件。首先定义博客列表组件和文章详情组件。

<script>
  const Home = {
    template: '<div><h1>博客列表</h1><ul><li v-for="post in posts" :key="post.id"><router-link :to="`/post/${post.id}`">{{ post.title }}</router-link></li></ul></div>',
    data() {
      return {
        posts: [
          { id: 1, title: '第一篇文章' },
          { id: 2, title: '第二篇文章' },
        ],
      };
    },
  };

  const Post = {
    props: ['id'],
    template: '<div>这是一篇ID为{{ id }}的文章</div>',
  };

  const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/post/:id',
      name: 'Post',
      component: Post,
    },
  ];
</script>

动态路由与权限控制

根据用户的权限动态展示不同的路由。

<script>
  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isAuthenticated()) {
      next('/login');
      return;
    }
    next();
  });
</script>

Vue3项目的部署与调试

项目打包与部署

使用 Vue CLI 的 build 命令打包项目。

vue-cli-service build

调试技巧与常见问题解决

在开发过程中，可以使用 Vue 提供的调试工具和技巧。

Vue.config.productionTip = false;
Vue.config.errorHandler = (err, vm, info) => {
  console.error(`[Vue]: ${info}`, err);
};

部署到云服务器

将项目打包后的文件上传到云服务器，配置服务器端的静态文件服务器。

scp -r dist/ user@your.server.com:/var/www/html/

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

ibeautiful

手记
篇

粉丝

108

获赞与收藏

529

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空