【Vue】快速入门：构建你的第一个Vue 3应用

文章目录

- 一、Vue简介
- 二、环境搭建
- - 1. 安装Node.js和npm
  - 2. 安装Vue CLI
- 三、创建Vue项目
- 四、项目结构介绍
- 五、组件基础
- - 创建一个组件
  - 使用组件
- 六、模板语法
- - 插值
  - 指令
  - - v-bind
    - v-if
    - v-for
- 七、事件处理
- 八、状态管理
- - 安装Vuex
  - 创建Store
  - 使用Store
- 九、路由基础
- - 安装Vue Router
  - 配置路由
  - 使用路由
- 十、部署与发布
- - 构建项目
  - 部署到Netlify

在前端开发领域，Vue.js 是一个非常流行的框架。它以其简单易用、灵活性强以及高性能等特点，赢得了众多开发者的青睐。如果你是Vue的新手，这篇文章将帮助你快速上手，构建你的第一个Vue 3应用。

一、Vue简介

Vue.js 是一个渐进式JavaScript框架，主要用于构建用户界面。与其他大型框架不同，Vue 被设计为可以逐步采用的。其核心库只关注视图层，非常容易学习，并且可以与其他库或现有项目集成。

主要特点：

响应式数据绑定：使用双向数据绑定，使开发者能够轻松管理数据和视图的同步。
组件化开发：通过组件化开发方式，提高代码的复用性和维护性。
渐进式框架：可以根据项目需求，逐步引入Vue生态系统的其他功能。

二、环境搭建

在开始使用Vue之前，我们需要先搭建开发环境。

1. 安装Node.js和npm

Vue依赖于Node.js和npm（Node包管理器）。首先，需要在系统中安装它们。可以从Node.js官网下载并安装最新版本的Node.js，npm会自动随Node.js一起安装。

2. 安装Vue CLI

Vue CLI 是一个官方提供的标准化工具，可以快速搭建Vue项目。打开命令行，执行以下命令全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用 vue --version 命令查看安装是否成功。

三、创建Vue项目

安装好Vue CLI后，我们可以创建一个新的Vue项目。执行以下命令：

vue create my-vue-app

在执行命令时，CLI会提示你选择一些配置选项。你可以选择默认配置，或者根据需求进行自定义配置。选择完成后，CLI会自动创建项目并安装依赖。

进入项目目录：

cd my-vue-app

启动开发服务器：

npm run serve

此时，打开浏览器并访问 http://localhost:8080，你将看到Vue项目的默认欢迎页面。

四、项目结构介绍

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

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

主要目录及文件：

public：静态文件目录，index.html 是项目入口文件。
src：源码目录，所有开发内容都在这里面。
- assets：资源目录，可以放置图片等静态资源。
- components：组件目录，所有的Vue组件都在这里面。
- App.vue：根组件。
- main.js：项目入口文件，初始化Vue实例。

五、组件基础

Vue的核心思想是通过组件化开发，每个组件可以看作是一个独立的模块。

创建一个组件

在 src/components 目录下新建一个 MyComponent.vue 文件，内容如下：

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

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

使用组件

在 App.vue 文件中引入并使用这个组件：

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

六、模板语法

Vue.js 使用一种基于HTML增强的模板语法，允许开发者声明式地将DOM绑定至底层数据。

插值

插值使用 {{}} 语法，可以将变量绑定到视图中：

<template>
  <p>{{ message }}</p>
</template>

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

指令

Vue提供了一系列指令（Directives），用于在模板中执行常见的DOM操作。

v-bind

用于绑定HTML属性：

<template>
  <img v-bind:src="imageSrc" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg'
    }
  }
}
</script>

v-if

用于条件渲染：

<template>
  <p v-if="isVisible">这是一段可见的文字</p>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

v-for

用于列表渲染：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

七、事件处理

Vue 允许在DOM元素上使用 v-on 指令来监听事件：

<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
}
</script>

还可以使用 @ 符号来缩写 v-on 指令：

<template>
  <button @click="handleClick">点击我</button>
</template>

八、状态管理

在复杂的应用中，组件之间的数据共享和状态管理变得尤为重要。Vue 提供了 Vuex 作为其官方的状态管理模式。

安装Vuex

npm install vuex@next --save

创建Store

在 src 目录下创建 store/index.js 文件：

import { createStore } from 'vuex'

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

使用Store

在 main.js 文件中引入并使用Store：

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

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

在组件中访问和修改状态：

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

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

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

九、路由基础

Vue Router 是Vue.js官方的路由管理器，适用于构建单页应用。

安装Vue Router

npm install vue-router@next

配置路由

在 src 目录下创建 router/index.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
})

export default router

使用路由

在 main.js 文件中引入并使用Router：

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

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

创建视图组件 src/views/Home.vue 和 src/views/About.vue：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>欢迎来到首页</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>关于我们</p>
  </div>
</template>

在 App.vue 中使用路由视图：

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