Javascript

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

本文主要是介绍Vue3项目实战:新手入门与初级技巧教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

Vue3项目实战:新手入门与初级技巧教程
Vue3基础知识介绍

安装Vue3

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

  1. 使用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>
  2. 使用Vue CLI
    Vue CLI 是一个用于构建 Vue.js 项目的命令行工具。首先需要全局安装 Vue CLI。

    npm install -g @vue/cli

    然后,通过以下命令创建新的 Vue 项目。

    vue create my-vue-project

    在创建项目时,可以选择 Vue 3 版本。

  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 使用组件化开发,便于代码维护和复用。组件通常由标签、模板、脚本和样式部分组成。

  1. 创建组件
    通过创建一个新的 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>
  2. 复用组件
    可以将组件引入到其它文件中复用。

    <script type="module" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./components/MyComponent.vue"></script>
  3. 局部注册组件
    除了在全局注册组件,也可以在局部注册。

    <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

  1. 安装Vue Router
    npm install vue-router@next
  2. 定义路由
    配置路由信息,包括路径和对应的组件。

    <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>

路由参数及导航守卫

  1. 路由参数
    在定义路由时,可以使用动态参数。
    <script>
     const routes: Array<RouteRecordRaw> = [
       {
         path: '/user/:id',
         name: 'User',
         component: () => import('./components/User.vue'),
       },
     ];
    </script>
  2. 导航守卫
    通过导航守卫来控制路由跳转的条件。
    <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

  1. 安装Vuex
    npm install vuex@next
  2. 配置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/
这篇关于Vue3项目实战:新手入门与初级技巧教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!