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

Vue3项目实战：新手入门与初级技巧详解

标签：

前端工具 Vue.js

概述

本文将详细介绍Vue3项目实战，从基础入门到组件化开发、路由与导航、状态管理等核心概念，帮助新手快速上手，并提供一些实用的技巧和最佳实践。文章还涵盖了Vue3项目的创建与运行流程，以及项目部署与上线的指导方法。

Vue3项目实战：新手入门与初级技巧详解

Vue3基础入门

Vue3简介与安装

Vue.js 是一个用于构建用户界面的渐进式框架。与其它框架不同的是，Vue.js 采用自底向上增量开发的设计，其核心库只关注视图层，易于与其它库或已存在的项目整合。Vue 3 是 Vue 的最新版本，提供了更好的性能、TypeScript 支持以及更强大的工具链。

安装Vue3

要开始使用 Vue 3，首先需要安装 Vue CLI，这是一个 Vue.js 的命令行工具，可以用来初始化、构建和运行 Vue 项目。Vue CLI 提供了多种配置选项，可以根据项目的具体需求进行选择。

安装 Vue CLI
```
npm install -g @vue/cli
```
创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：
```
vue create my-vue-app
```
选择默认配置或手动配置，然后等待项目创建完成。
启动项目

进入项目目录并启动开发服务器：
```
cd my-vue-app
npm run serve
```
开发服务器将在本地主机的 http://localhost:8080 上运行。

Vue3核心概念讲解

响应式数据

Vue 3 通过 ref 和 reactive 提供响应式数据绑定。ref 用于创建一个可变的引用，而 reactive 用于创建一个响应式对象。

import { ref, reactive } from 'vue';

const count = ref(0); // 创建一个 ref 对象，初始值为 0
const state = reactive({ count: 0 }); // 创建一个响应式对象

在组件中使用 ref：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

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

模板语法

Vue 使用模板语法将 DOM 结构与 Vue 应用的数据绑定起来。模板语法包含插值、指令、条件渲染、列表渲染等。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">Increment</button>
  </div>
</template>

计算属性与方法

计算属性是基于其依赖的数据自动计算的属性。它们只有在相关依赖发生变化时才会重新计算。

computed: {
  doubleCount() {
    return this.count * 2;
  }
}

方法则是普通函数，可以访问 this 上的数据。

methods: {
  increment() {
    this.count++;
    console.log(this.doubleCount); // 调用计算属性
  }
}

生命周期钩子

Vue 提供了一组生命周期钩子，允许我们在 Vue 实例的不同生命周期阶段进行操作。

created() {
  console.log('Component is created');
},
mounted() {
  console.log('Component is mounted');
},

Vue3项目创建与运行

创建项目

使用 Vue CLI 创建一个简单的 Vue 项目：

vue create my-vue-app

项目结构

一个典型的 Vue 项目结构如下：

my-vue-app/
│
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

运行项目

npm run serve

开发服务器将在 http://localhost:8080 上运行。

Vue3组件化开发

组件的定义与使用

Vue 组件是可重用的 Vue 实例，每个组件都有自己的模板、样式和逻辑。

组件定义

// Button.vue
<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  props: ['label'],
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

带复杂属性和事件的组件：

// MyComponent.vue
<template>
  <div>
    <button @click="handleClick" :disabled="isDisabled">Click Me</button>
    <span>{{ message }}</span>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    isDisabled: Boolean
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>

组件注册与使用

// App.vue
<template>
  <div>
    <Button label="Click Me" @click="increment" />
    <MyComponent message="Hello" :is-disabled="isDisabled" />
  </div>
</template>

<script>
import Button from './components/Button.vue';
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    Button,
    MyComponent
  },
  setup() {
    const count = ref(0);
    const isDisabled = ref(false);
    const increment = () => {
      count.value++;
    };
    return { count, increment, isDisabled };
  }
}
</script>

组件间通信与数据传递

父组件向子组件传递数据

// Parent.vue
<template>
  <div>
    <Child :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  setup() {
    const parentMessage = ref('Hello from Parent');
    return { parentMessage };
  }
}
</script>

// Child.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

子组件向父组件传递数据

// Child.vue
<template>
  <div>
    <button @click="sendMessageToParent">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('message-from-child', 'Hello from Child');
    }
  }
}
</script>

// Parent.vue
<template>
  <div>
    <Child @message-from-child="handleMessageFromChild" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  setup() {
    const handleMessageFromChild = (message) => {
      console.log(message); // 输出 "Hello from Child"
    };
    return { handleMessageFromChild };
  }
}
</script>

组件样式与样式的隔离

CSS Modules

CSS Modules 是一种局部作用域的 CSS，可以帮助解决 CSS 代码的全局污染问题。

/* Button.module.css */
.button {
  color: blue;
}

// Button.vue
<template>
  <button :class="$style.button">{{ label }}</button>
</template>

<script setup>
import { ref } from 'vue';
import './Button.module.css';
</script>

<style module>
.button {
  color: green;
}
</style>

Vue3响应式原理

响应式系统工作原理

Vue 3 的响应式系统基于 Proxy 对象实现。通过 Proxy 对象，Vue 可以追踪数据的变化并触发视图更新。

响应式对象的创建

import { reactive } from 'vue';

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

响应式数据的变化

state.count++;

ref与reactive的使用场景

ref

ref 用于创建一个可变的引用，适用于基本类型值。

import { ref } from 'vue';

const count = ref(0);

reactive

reactive 用于创建一个响应式对象，适用于复杂的数据结构。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue'
});

结合使用

import { ref, reactive } from 'vue';

const count = ref(0); // 基本类型值
const state = reactive({
  count: 0,
  message: 'Hello Vue'
}); // 对象

响应式编程实践案例

简单计数器

// Counter.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

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

更复杂的计数器

// ComplexCounter.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

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

const decrement = () => {
  count.value--;
};
</script>

Vue3路由与导航

Vue Router介绍与安装

Vue Router 是 Vue.js 的官方路由库，用于处理单页面应用的路由。

安装 Vue Router

npm install vue-router@next

基本配置

// main.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
});

import { createApp } from 'vue';
import App from './App.vue';

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

路由配置与页面跳转

路由映射

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

页面跳转

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link>

路由参数与动态路由

动态路由

const routes = [
  { path: '/user/:id', component: User }
];

传递动态参数

<router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link>

Vue3状态管理

Vuex基础使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

安装 Vuex

npm install vuex@next

基本配置

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

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

使用 Vuex

// main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import store from './store';

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

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

// Home.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const store = useStore();
const count = computed(() => store.state.count);
const increment = () => store.dispatch('increment');
</script>

状态管理的最佳实践

模块化管理

// store/modules/user.js
export default {
  state: {
    name: 'John Doe'
  },
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    setName({ commit }, name) {
      commit('setName', name);
    }
  },
  getters: {
    name(state) {
      return state.name;
    }
  }
};

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

export default createStore({
  modules: {
    user: userModule
  }
});

高级状态管理技巧

异步操作

// store/modules/user.js
export default {
  state: {
    name: 'John Doe'
  },
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    async setName({ commit }) {
      const name = await fetchName();
      commit('setName', name);
    }
  },
  getters: {
    name(state) {
      return state.name;
    }
  }
};

Vue3项目实战

小项目开发流程与规划

需求分析
项目规划
组件设计
开发实现
测试与调试
部署与上线

常见问题与解决方法

问题：组件间通信复杂

解决方法：使用 Vuex 状态管理库。

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

export default createStore({
  modules: {
    user: userModule
  }
});

问题：路由跳转不生效

解决方法：确保路由配置正确。

// main.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
});

项目部署与上线指导

部署到 GitHub Pages

安装 GitHub Pages CLI
```
npm install -g github-pages
```

配置 package.json

"scripts": {
 "deploy": "gh-pages -d dist"
}

构建项目
```
npm run build
```
部署
```
npm run deploy
```

部署到 Vercel

安装 Vercel CLI
```
npm install -g vercel
```
部署项目
```
vercel
```

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕丝7291255

手记
篇

粉丝

15

获赞与收藏

70

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3项目实战：新手入门与初级技巧详解

Vue3简介与安装

安装Vue3

Vue3核心概念讲解

响应式数据

模板语法

计算属性与方法

生命周期钩子

Vue3项目创建与运行

创建项目

项目结构

运行项目

组件的定义与使用

组件定义

组件注册与使用

组件间通信与数据传递

父组件向子组件传递数据

子组件向父组件传递数据

组件样式与样式的隔离

CSS Modules

响应式系统工作原理

响应式对象的创建

响应式数据的变化

ref与reactive的使用场景

ref

reactive

结合使用

响应式编程实践案例

简单计数器

更复杂的计数器

Vue Router介绍与安装

安装 Vue Router

基本配置

路由配置与页面跳转

路由映射

页面跳转

路由参数与动态路由

动态路由

传递动态参数

Vuex基础使用

安装 Vuex

基本配置

使用 Vuex

状态管理的最佳实践

模块化管理

高级状态管理技巧

异步操作

小项目开发流程与规划

常见问题与解决方法

问题：组件间通信复杂

问题：路由跳转不生效

项目部署与上线指导

部署到 GitHub Pages

部署到 Vercel

阅读免费教程