首页手记 Vue项目实战：新手教程与实战技巧

Vue项目实战：新手教程与实战技巧

标签：

前端工具 Vue.js

概述

本文详细介绍了如何从零开始搭建Vue项目，并通过实际案例演示了Vue项目实战，包括组件使用、路由配置和状态管理等关键环节。此外，文章还提供了项目部署和性能优化的实用技巧，帮助开发者构建高效稳定的Vue应用。

Vue项目搭建入门

安装Node.js和Vue CLI

在开始使用Vue进行开发之前，首先需要安装Node.js和Vue CLI。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而Vue CLI则是Vue项目的脚手架工具，可以帮助我们快速搭建一个Vue项目。

安装Node.js

访问Node.js官网（https://nodejs.org/），下载并安装适合你操作系统的最新版本。
安装完成后，打开命令行工具（如Windows的cmd或macOS的Terminal），输入node -v来检查是否安装成功。如果输出Node.js版本号，表示安装成功。

安装Vue CLI

打开命令行工具。
输入以下命令来全局安装Vue CLI：
```
npm install -g @vue/cli
```
安装完成后，输入vue --version来检查是否安装成功。如果输出Vue CLI版本号，表示安装成功。

创建Vue项目

安装好Vue CLI后，可以使用它来创建一个新的Vue项目。

打开命令行工具。
输入以下命令来创建一个新的Vue项目：
```
vue create my-vue-app
```
按照提示选择项目的预设配置或自定义配置。
进入项目目录：
```
cd my-vue-app
```
启动开发服务器：
```
npm run serve
```

此时，你的Vue项目就已经搭建成功了，并且开发服务器已经在本地运行了。你可以在浏览器中访问http://localhost:8080来查看项目。

项目结构解析

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

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

目录解析

node_modules/: 存储项目依赖的第三方库。
public/: 存储静态资源，如HTML文件和图标文件。
src/: 存储源代码，包括组件、样式、路由等。
assets/: 存储静态资源文件，如图片。
components/: 存储Vue组件。
App.vue: 主组件文件，是整个应用的入口。
main.js: 应用的入口文件，负责引入Vue实例和App组件。
router/: 存储路由相关的配置文件。
.gitignore: Git版本控制系统需要忽略的文件和目录。
babel.config.js: Babel配置文件，用于转换ES6+代码。
package.json: 存储项目依赖和脚本信息。
README.md: 项目文档。
vue.config.js: Vue CLI配置文件，可以自定义一些构建选项。

示例代码 - 主组件（App.vue）

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

示例代码 - 主入口文件（main.js）

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Vue组件基础

组件的定义与使用

Vue组件是可复用的Vue实例，可以看作自定义的HTML标签。组件的定义主要有两种方式：全局组件和局部组件。

全局组件定义

全局组件定义在Vue实例创建之前，可以被任何Vue实例使用。

Vue.component('my-component', {
  // 组件选项
});

局部组件定义

局部组件定义在父组件内部，只能在定义它的父组件中使用。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: {
      // 组件选项
    }
  }
};
</script>

Props和事件传递

Props传递数据

Props是父组件向子组件传递数据的一种方式。在子组件中定义接受的props，然后由父组件传递数据。

子组件定义props

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

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

父组件传递props

<template>
  <div>
    <child-component message="Hello, World!"></child-component>
  </div>
</template>

事件传递数据

子组件可以通过事件将数据传递给父组件。在子组件中定义事件，然后由父组件监听。

子组件定义事件

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('data-sent', 'Data from child');
    }
  }
};
</script>

父组件监听事件

<template>
  <div>
    <child-component @data-sent="handleDataSent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataSent(data) {
      console.log(data);
    }
  }
};
</script>

生命周期钩子

Vue组件的生命周期包括创建、挂载、更新和销毁等几个阶段。每个阶段都提供了一些生命周期钩子，可以在适当的时机执行自定义的逻辑。

生命周期钩子列表

beforeCreate: 在实例初始化之前，数据观测 (data observer) 和事件配置配置 (event configuration) 之前调用。
created: 在实例初始化完成后被调用。此时数据观测 (data observer) 已经完成，但是$el和$mounted还不存在。
beforeMount: 在挂载开始之前被调用。此时$el已存在，但是还没有挂载到DOM中。
mounted: 选项el被附加到实例上后调用，此时$el已经挂载到DOM中。
beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用。
beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed: 实例销毁后调用。调用该钩子时，组件的事件监听器和子组件也被销毁。

示例代码

<template>
  <div>
    <h1>{{ message }}</hutorial>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
};
</script>

Vue路由基础

安装和配置Vue Router

Vue Router是Vue官方的路由管理器，用于实现单页面应用（SPA）的功能。首先需要安装Vue Router。

安装Vue Router

打开命令行工具。
输入以下命令来安装Vue Router：
```
npm install vue-router
```

配置Vue Router

在项目中配置Vue Router，需要创建路由实例并注册到Vue应用中。

创建路由实例

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

注册路由实例

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

路由基本使用方法

使用Vue Router时，通常会在组件中通过<router-link>标签实现页面跳转，通过<router-view>标签显示当前路由对应的组件。

页面跳转

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

显示组件

<router-view></router-view>

动态路由和嵌套路由

动态路由

动态路由允许通过参数来匹配路由，例如用户ID。

动态路由定义

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '../views/User.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});

动态路由使用

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

嵌套路由

嵌套路由允许在一个组件内部定义子路由。

路由定义

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import Users from '../views/Users.vue';
import User from '../views/User.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: 'users',
          name: 'Users',
          component: Users,
          children: [
            {
              path: ':id',
              name: 'User',
              component: User
            }
          ]
        }
      ]
    }
  ]
});

路由使用

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

Vue状态管理

Vuex简介及其安装

Vuex是Vue官方的状态管理库，用于统一管理应用的状态。首先需要安装Vuex。

安装Vuex

打开命令行工具。
输入以下命令来安装Vuex：
```
npm install vuex
```

配置Vuex

在项目中配置Vuex，需要创建Store实例并注册到Vue应用中。

创建Store实例

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

注册Store实例

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

定义和使用Store

在Vuex中，可以通过state定义状态，通过mutations定义状态的变化。

示例代码

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

通过`state`访问状态

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

通过`mutations`修改状态

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

Getter和Mutation的使用

Getter

Getter用于从Store中获取状态，可以实现复杂的计算逻辑。

定义Getter

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

使用Getter

<template>
  <div>
    {{ doubleCount }}
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};
</script>

Mutation

Mutation是唯一用于修改状态的方法，所有的状态变更都必须通过Mutation完成。

示例代码

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

通过Mutation修改状态

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>

Actions和Mutation的区别

Actions用于异步操作，而Mutations用于同步操作。Actions可以触发Mutations。

示例代码 - 使用Action

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

Usage

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};
</script>

Vue项目实战案例

创建一个简单的Todo应用

项目结构

创建一个简单的Todo应用，涉及以下文件：

src/views/TodoList.vue: Todo列表组件。
src/views/TodoItem.vue: Todo项组件。
src/store/index.js: Vuex Store，管理Todo列表的状态。
src/router/index.js: 路由配置。
src/App.vue: 主组件，包含路由视图。

Todo列表组件

<!-- src/views/TodoList.vue -->
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo..." />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <TodoItem :todo="todo" @remove="removeTodo" />
      </li>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
import { mapState, mapMutations } from 'vuex';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapMutations(['addTodo', 'removeTodo']),
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.$store.commit('addTodo', this.newTodo);
      this.newTodo = '';
    },
    removeTodo(id) {
      this.$store.commit('removeTodo', id);
    }
  }
};
</script>

Todo项组件

<!-- src/views/TodoItem.vue -->
<template>
  <div>
    <span>{{ todo.text }}</span>
    <button @click="remove">Remove</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    remove() {
      this.$emit('remove', this.todo.id);
    }
  }
};
</script>

Vuex Store

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push({ id: Date.now(), text: todo });
    },
    removeTodo(state, id) {
      const index = state.todos.findIndex(todo => todo.id === id);
      state.todos.splice(index, 1);
    }
  }
});

路由配置

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import TodoList from '../views/TodoList.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

主组件

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

使用Vue Router进行页面跳转

在Todo应用中，可以使用Vue Router进行页面跳转。

路由配置

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import TodoList from '../views/TodoList.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

页面跳转

<!-- src/views/TodoList.vue -->
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo..." />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <TodoItem :todo="todo" @remove="removeTodo" />
      </li>
    </ul>
    <router-link to="/about">About</router-link>
  </div>
</template>

用Vuex管理Todo应用的状态

Vuex Store

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push({ id: Date.now(), text: todo });
    },
    removeTodo(state, id) {
      const index = state.todos.findIndex(todo => todo.id === id);
      state.todos.splice(index, 1);
    }
  }
});

Todo列表组件

<!-- src/views/TodoList.vue -->
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo..." />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <TodoItem :todo="todo" @remove="removeTodo" />
      </li>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
import { mapState, mapMutations } from 'vuex';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapMutations(['addTodo', 'removeTodo']),
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.$store.commit('addTodo', this.newTodo);
      this.newTodo = '';
    },
    removeTodo(id) {
      this.$store.commit('removeTodo', id);
    }
  }
};
</script>

Vue项目部署与优化

项目打包与部署

打包项目

在项目根目录下运行以下命令来打包项目：

npm run build

打包完成后，会在dist目录生成静态文件，可以将其部署到任何静态文件服务器上。

部署到服务器

将打包生成的dist目录上传到服务器。
配置Nginx或Apache等静态服务器，使其能够提供静态资源。
测试部署是否成功。

配置Nginx

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

性能优化技巧

代码分割

代码分割可以将代码拆分成多个小块，按需加载，减少初始加载时间。

示例代码

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('../views/About.vue')
    }
  ]
});

export default router;

使用懒加载

懒加载可以延迟加载组件，只在需要时加载。

示例代码

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('../views/About.vue')
    }
  ]
});

export default router;

使用CDN

使用CDN加载Vue和相关库，可以减少服务器的带宽消耗。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/vue/dist/vue.css">
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
</script>
</body>
</html>

常见错误排查和解决方法

404错误

404错误通常是因为服务器找不到资源文件。检查服务器配置，确保静态文件路径正确。

示例代码

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

500错误

500错误通常是因为服务器内部错误。检查服务器日志，找到具体的错误原因。

示例代码

tail -f /var/log/nginx/error.log

Vue警告

Vue警告通常是因为代码中的潜在问题。根据警告信息，修正代码。

示例代码

console.warn("Avoid mutating a prop directly since the value will be overwritten whenever the parent component updates. Instead, use a data or computed property.");

性能问题

性能问题可以通过Chrome DevTools等工具进行性能分析，找出瓶颈。

示例代码

chrome://devtools

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

SMILET

手记
篇

粉丝

80

获赞与收藏

441

关注作者，订阅最新文章

相关文章推荐

2年vue项目实战经验汇总

Github点赞接近 70k 的Spring Cloud学习教程+实战项目推荐！牛批！

SpringCloud+Vue微服务教程与实战(1)--全新的开始

Github 上热门的 Spring Boot 项目实战推荐

vue学习笔记---饿了么仿写实战项目

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue项目实战：新手教程与实战技巧

安装Node.js

安装Vue CLI

目录解析

全局组件定义

局部组件定义

Props传递数据

子组件定义props

父组件传递props

事件传递数据

子组件定义事件

父组件监听事件

生命周期钩子列表

示例代码

安装Vue Router

配置Vue Router

创建路由实例

注册路由实例

页面跳转

显示组件

动态路由

动态路由定义

动态路由使用

嵌套路由

路由定义

路由使用

安装Vuex

配置Vuex

创建Store实例

注册Store实例

示例代码

通过state访问状态

通过mutations修改状态

Getter

定义Getter

使用Getter

Mutation

示例代码

通过Mutation修改状态

示例代码 - 使用Action

Usage

项目结构

Todo列表组件

Todo项组件

Vuex Store

路由配置

主组件

路由配置

页面跳转

Vuex Store

Todo列表组件

打包项目

部署到服务器

配置Nginx

代码分割

示例代码

使用懒加载

示例代码

使用CDN

示例代码

404错误

示例代码

500错误

示例代码

Vue警告

示例代码

性能问题

示例代码

相关文章推荐

阅读免费教程

通过`state`访问状态

通过`mutations`修改状态