当前位置：首页 > article >正文

Vue.js 快速实战入门

article 2025/1/25 4:44:41

Vue.js 是一个用于构建用户界面的渐进式框架。与其它大型框架不同，Vue.js 从一开始就设计为可逐步采用的，既可以作为简单的库集成到现有项目中，也可以作为完整的单页应用程序（SPA）框架使用。本文将带你快速入门 Vue.js，从安装到创建一个简单的项目。

1. 安装 Vue.js

1.1 通过 CDN 引入

最简单的方式是通过 CDN 引入 Vue.js，适合于快速原型开发或简单的项目。

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 快速入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
  </script>
</body>
</html>

1.2 通过 npm 安装

对于更复杂的项目，推荐使用 npm 安装 Vue.js，并结合 Vue CLI 工具进行项目管理。

首先，确保你已经安装了 Node.js 和 npm。然后，全局安装 Vue CLI：

npm install -g @vue/cli

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

vue create my-project
cd my-project
npm run serve

2. 项目结构

创建项目后，你会看到如下目录结构：

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

2.1 主要文件说明

public/index.html：项目的入口 HTML 文件。
src/main.js：Vue 应用的入口文件，负责启动应用。
src/App.vue：根组件，包含整个应用的结构。
src/components/：存放各个组件的目录。

3. 组件化开发

Vue.js 的核心特性之一是组件化。组件是可复用的 Vue 实例，具有自己的模板、数据和方法。

3.1 创建组件

在 src/components/ 目录下创建一个名为 HelloWorld.vue 的组件：

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

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

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

3.2 使用组件

在 src/App.vue 中使用 HelloWorld 组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

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

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

4. 常见用法

4.1 数据绑定

Vue.js 提供了多种数据绑定方式，包括插值表达式和指令。

<template>
  <div>
    <p>{{ message }}</p>
    <p v-text="message"></p>
  </div>
</template>

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

4.2 条件渲染

使用 v-if 和 v-show 进行条件渲染。

<template>
  <div>
    <p v-if="isVisible">This is visible</p>
    <p v-show="isVisible">This is also visible</p>
  </div>
</template>

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

4.3 列表渲染

使用 v-for 渲染列表。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  }
}
</script>

4.4 事件处理

使用 v-on 绑定事件处理器。

<template>
  <button v-on:click="increment">Count: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

4.5 表单输入绑定

使用 v-model 进行双向数据绑定。

<template>
  <div>
    <input v-model="message" placeholder="Enter a message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

5. 路由和状态管理

5.1 Vue Router

Vue Router 是官方的路由管理器，用于实现单页面应用的导航。

安装 Vue Router：

npm install vue-router

在 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({
  mode: 'history',
  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';

Vue.config.productionTip = false;

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

5.2 Vuex

Vuex 是官方的状态管理库，用于管理应用的共享状态。

安装 Vuex：

npm install vuex

在 src/store/index.js 中配置 Vuex：

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');
    }
  },
  getters: {
    count: state => state.count
  }
});

在 src/main.js 中引入 Vuex 配置：

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

Vue.config.productionTip = false;

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

在组件中使用 Vuex：

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

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

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