首页手记 Vue入门教程：从零开始搭建第一个Vue项目

Vue入门教程：从零开始搭建第一个Vue项目

标签：

Vue.js

概述

本文详细介绍了Vue框架的环境搭建，包括Node.js和Vue CLI的安装，以及使用Vue CLI创建项目的全过程。接着，文章深入讲解了Vue项目的基本结构和主要文件的作用，并进一步探讨了Vue组件的创建与使用，包括属性与事件的传递。文中还涵盖了Vue的模板语法、事件处理和表单响应等内容。

Vue简介与环境搭建

Vue是什么

Vue.js 是一个用于构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，代码量小，学习曲线平缓，易于与其它库或既有的项目整合。Vue 也提供了完全按需的代码分割机制，此外，它还支持状态管理及路由，从而更好地构建大型应用。

安装Node.js和Vue CLI

在开始使用 Vue 之前，首先需要确保你的开发环境已经安装了 Node.js。你可以访问 Node.js 官方网站 https://nodejs.org/download/ 并下载最新版的 Node.js。安装 Node.js 的同时会安装 npm（Node.js 的包管理器），这将允许我们安装和管理项目依赖。

安装完成后，我们可以通过命令行工具检查 Node.js 和 npm 是否已正确安装：

node -v
npm -v

这两个命令会返回版本号，证明安装成功。

安装Vue CLI

Vue CLI 是 Vue.js 的官方脚手架，用于快速搭建 Vue 项目。可以通过 npm 安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用命令 vue --version 来检查 Vue CLI 版本，确保其安装无误。

使用Vue CLI创建项目

使用 Vue CLI 创建项目非常简单。在命令行工具中，切换到你希望创建项目的目录，然后运行以下命令：

vue create my-vue-project

该命令会引导你完成一些配置选择，例如是否使用预设配置或自定义配置。选择你希望的配置后，Vue CLI 会自动下载所需的依赖并初始化项目结构。

解析创建命令

vue create my-vue-project

vue 是调用 Vue CLI。
create 是命令，用于创建项目。
my-vue-project 是项目名称，你可以根据自己的需求更改。

启动项目

在项目的根目录中，运行以下命令以启动开发服务器：

cd my-vue-project
npm run serve

运行完成之后，会打开浏览器并访问 http://localhost:8080，此时可以看到一个简单的 Vue 应用程序，显示了欢迎信息。

通过以上步骤，我们已经完成了 Vue 的环境搭建，接下来可以开始探索项目的结构和基本使用。

Vue项目的基本结构

项目目录结构介绍

当你使用 Vue CLI 创建一个新的 Vue 项目时，它会生成一个基本的项目结构。下面是一个典型的目录结构示例：

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

node_modules/：存放所有项目依赖的文件。
public/：存放静态文件，如 favicon 和 index.html。
src/：存放项目的源代码。
assets/：存放静态资源，如图片、字体等。
components/：存放 Vue 组件。
App.vue：程序的主组件。
main.js：程序的入口文件。
.gitignore：Git 版本控制配置文件。
babel.config.js：Babel 配置文件。
package.json：项目配置文件。
README.md：项目说明文件。

main.js和App.vue文件详解

main.js

main.js 文件是整个项目的入口点，它负责引入并调用 Vue 实例，将 App 组件实例化并挂载到 HTML 的根节点上。

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

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

import Vue from 'vue'：从 Vue 包中导入 Vue。
import App from './App.vue'：从 App.vue 文件中导入 App 组件。
new Vue({})：创建一个新的 Vue 实例。
render: h => h(App)：定义 Vue 实例的渲染函数，将 App 组件挂载到页面上。
).$mount('#app')：将 Vue 实例挂载到 id 为 app 的 DOM 节点上。

App.vue

App.vue 文件是一个 Vue 单文件组件，包括 Vue 组件的模板、样式和逻辑代码。组件的结构如下：

<template>
  <div id="app">
    <h1>My Vue App</h1>
    <p>Welcome to my Vue application!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<style>
#app {
  background-color: #f0f0f0;
}
</style>

模板部分是 HTML 代码，用于定义组件的外观。这里的 <template> 标签是 Vue 的独有标签，用于包裹组件的模板代码。例如，以下是一个简单的 App 组件模板：

<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <p>{{ message }}</p>
  </div>
</template>

在 <script> 标签内定义组件的 JavaScript 代码。例如，以下代码定义了一个数据对象 message：

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

在 <style> 标签内定义组件的 CSS 代码。例如，以下代码设置了 #app 元素的背景颜色：

<style>
#app {
  background-color: #f0f0f0;
}
</style>

通过以上配置，我们已经理解了 Vue 项目的基本结构和主要文件的作用，接下来可以深入学习组件的创建与使用。

Vue组件的创建与使用

创建Vue组件

在 Vue 中，组件是可复用的代码块，包含自身的 HTML、CSS 和 JavaScript。组件定义的格式与单文件组件（如 App.vue）相同。以下是创建组件的基本步骤：

单组件文件

在 src/components 文件夹中创建一个新的 .vue 文件，如 HelloWorld.vue：

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

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

<style scoped>
.hello {
  color: blue;
}
</style>

这个 HelloWorld.vue 文件定义了一个名为 HelloWorld 的组件。它具有一个可传递的属性 msg。

在父组件中引入并使用子组件

在 App.vue 文件中引用并使用上面创建的 HelloWorld 组件：

<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <HelloWorld msg="Hello from App"/>
  </div>
</template>

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

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

在上面的代码中：

import HelloWorld from './components/HelloWorld.vue'：从 HelloWorld.vue 文件中导入组件。
components: { HelloWorld }：在 App 组件中注册 HelloWorld 组件。
<HelloWorld msg="Hello from App"/>：在模板中使用 HelloWorld 组件，并传递一个属性 msg。

在App.vue中使用组件

在 App.vue 文件中使用 HelloWorld 组件，如上所示，已经完成了组件的引入和使用。

动态属性绑定

组件可以接受动态传递的属性。例如，使用 v-bind 指令来传递属性：

<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <HelloWorld :msg="appMessage"/>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      appMessage: 'Hello from App'
    };
  }
};
</script>

在这个例子中，appMessage 是一个由组件的父组件定义的数据属性。通过 v-bind（简写为 :），可以将父组件的数据属性传递给子组件。

组件的属性与事件

属性

属性（Props）是从父组件传递给子组件的数据。在子组件中定义属性接受的数据类型：

props: {
  msg: String
}

可以在父组件中传递属性：

<HelloWorld msg="Hello from App"/>

事件

通过 v-on（简写为 @）指令，可以监听子组件触发的事件：

<HelloWorld @click="handleClick"/>

在子组件中定义事件触发的方法：

<template>
  <div @click="handleClick">...</div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      this.$emit('click', 'Hello from HelloWorld');
    }
  }
};
</script>

通过事件触发，可以在父组件中处理子组件的事件：

methods: {
  handleClick(msg) {
    console.log(msg);
  }
}

通过以上步骤，我们已经掌握了 Vue 组件的基本创建、使用和传递属性与事件的方法，下一步可以继续学习 Vue 的模板语法。

Vue模板语法

数据绑定

Vue 的模板语法允许直接在 HTML 模板中使用特殊的语法来绑定数据和响应式更新。数据绑定可以分为两种主要形式：插值和指令。

插值

插值语法使用双大括号 {{ }} 包围内容。例如：

<div id="app">
  <p>{{ message }}</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

当 message 的值发生变化时，插值部分会自动更新为新的值，从而实现数据的动态绑定。

指令

指令是带有 v- 前缀的特殊属性。例如，v-bind 可以用来绑定元素的属性：

<img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imagePath" />

或者更简单的语法：

<img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imagePath" />

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    imagePath: 'path/to/image.jpg'
  }
});

在 Vue 中，每个指令都有相应的生命周期，能够在元素插入、更新和移除时触发相应的动作。

条件渲染

Vue 提供了多种方法来实现基于数据的条件渲染。常用的指令包括 v-if、v-else 和 v-else-if。

基本的条件渲染

v-if 指令会根据条件判断是否渲染指定的模板片段：

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    seen: true
  }
});

当 seen 为 true 时，文本 Now you see me 将显示在页面上。

条件分支

多个条件分支可以使用 v-if、v-else-if 和 v-else 实现：

<div id="app">
  <p v-if="type === 'A'">A</p>
  <p v-else-if="type === 'B'">B</p>
  <p v-else>C</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    type: 'B'
  }
});

动态条件渲染

v-if 和 v-else-if 指令都接受一个表达式来动态判断条件。例如：

<div id="app">
  <p v-if="someCondition">If condition</p>
  <p v-else>Else condition</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    someCondition: false
  }
});

通过上述例子，你可以看到如何根据不同的数据条件来动态地显示或隐藏 HTML 元素。

列表渲染

Vue 通过 v-for 指令来循环展示列表数据。v-for 可以作用于数组或对象，用于生成多条数据列表。

数组循环

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
});

对象循环

<div id="app">
  <ul>
    <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Alice',
      age: 25,
      city: 'Beijing'
    }
  }
});

通过这些示例，我们已经熟悉了 Vue 中数据绑定、条件渲染和列表渲染的基本使用方法。接下来，我们将进一步学习事件处理和响应式表单的使用。

Vue事件与表单

响应式表单

Vue 提供了 v-model 指令用于实现双向数据绑定，使得表单元素的值和 Vue 实例的数据状态保持同步。

基本用法

<div id="app">
  <input v-model="message" placeholder="Edit me">
  <p>{{ message }}</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

当用户编辑输入框时，message 数据属性也会相应更新，并显示在 <p> 元素中。

复杂表单数据绑定

在处理复杂表单时，可以将表单数据定义为对象：

<div id="app">
  <input v-model="user.name" placeholder="Enter your name">
  <input v-model="user.age" placeholder="Enter your age">
  <p>{{ user.name }} is {{ user.age }} years old.</p>
</div>

在 JavaScript 代码中定义数据：

new Vue({
  el: '#app',
  data: {
    user: {
      name: '',
      age: ''
    }
  }
});

通过 v-model 绑定表单输入，可以直接操作数据对象的属性。

验证与错误处理

Vue 本身没有内置表单验证功能，但可以通过自定义指令或第三方库（如 VeeValidate）来进行表单验证。

<div id="app">
  <input v-model="username" placeholder="Username">
  <span v-if="!isValid" class="error">Username must be at least 3 characters.</span>
  <button @click="validate">Validate</button>
</div>

在 JavaScript 代码中定义数据和方法：

new Vue({
  el: '#app',
  data: {
    username: '',
    isValid: true
  },
  methods: {
    validate() {
      this.isValid = this.username.length >= 3;
    }
  }
});

通过验证逻辑，可以动态显示或隐藏错误信息。

事件处理

Vue 使用 v-on 指令来监听 DOM 事件。常见的事件包括点击、输入等。

简单事件绑定

<div id="app">
  <button v-on:click="increment">Click me</button>
  <p>{{ count }}</p>
</div>

在 JavaScript 代码中定义数据和方法：

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

事件修饰符

Vue 提供了事件修饰符，可以修饰 v-on 指令，使事件处理更便捷。例如，.prevent 可以取消事件的默认行为：

<form v-on:submit.prevent="handleSubmit">
  <input type="text" v-model="inputValue">
  <button type="submit">Submit</button>
</form>
<p>{{ inputValue }}</p>

在 JavaScript 代码中定义数据和方法：

new Vue({
  el: '#app',
  data: {
    inputValue: ''
  },
  methods: {
    handleSubmit() {
      console.log(`Input value is: ${this.inputValue}`);
    }
  }
});
``

通过以上示例，我们可以看到如何使用 `v-model` 实现响应式表单，以及如何通过 `v-on` 指令来处理各种事件。接下来，我们将介绍 Vue 的路由和状态管理功能。

# 路由与状态管理简介

## 使用Vue Router进行页面导航

Vue Router 是 Vue.js 官方的路由管理器，能够实现单页面应用（SPA）中的页面导航和路由切换。

### 安装Vue Router

首先，通过 npm 安装 Vue Router：

```bash
npm install vue-router

基本配置

在项目的 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件，定义路由配置：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

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

在 main.js 中引入并使用路由配置：

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

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

路由链接与动态路由

使用 <router-link> 组件实现页面跳转：

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

动态路由

定义动态路由规则：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

在组件中通过 this.$route.params.id 获取动态参数：

<script>
export default {
  name: 'User',
  mounted() {
    console.log(`User ID: ${this.$route.params.id}`);
  }
};
</script>

编程式导航

通过 this.$router.push 进行编程式导航：

methods: {
  gotoUser(id) {
    this.$router.push({ name: 'user', params: { id: id }});
  }
}

Vuex状态管理入门

Vuex 是 Vue.js 的状态管理库，用于集中管理应用中所有的组件状态，从而实现状态的规范化管理。

安装Vuex

通过 npm 安装 Vuex：

npm install vuex

基本配置

创建一个 Vuex 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++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

在 main.js 中引入并使用 store：

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

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

在组件中使用Vuex

在组件中通过 mapState 和 mapActions 高阶函数来映射状态和动作：

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: mapState(['count']),
  methods: mapActions(['increment'])
};
</script>

通过以上步骤，我们已经掌握了使用 Vue Router 进行页面导航和 Vuex 进行状态管理的基本方法。至此，你已经具备了基础的 Vue 项目开发能力。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

喵喔喔

手记
篇

粉丝

103

获赞与收藏

606

关注作者，订阅最新文章

相关文章推荐

简单入门，搭建一个vue项目

基于Idea从零搭建一个最简单的vue项目

Vue笔记——搭建脚手架并快速创建Vue项目

vue入门（安装环境与搭建项目）

从零到一教你基于vue开发一个组件系统

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue入门教程：从零开始搭建第一个Vue项目

安装Vue CLI

解析创建命令

启动项目

main.js

App.vue

单组件文件

在父组件中引入并使用子组件

动态属性绑定

组件的属性与事件

属性

事件

插值

指令

基本的条件渲染

条件分支

动态条件渲染

数组循环

对象循环

基本用法

复杂表单数据绑定

验证与错误处理

简单事件绑定

事件修饰符

基本配置

路由链接与动态路由

动态路由

编程式导航

安装Vuex

基本配置

在组件中使用Vuex

相关文章推荐

阅读免费教程