首页手记 Vue入门：快速搭建你的第一个Vue项目

Vue入门：快速搭建你的第一个Vue项目

标签：

杂七杂八

Vue 是一个高效且易用的前端框架，专为构建用户界面设计，以其简洁的 API、轻量级特性、易维护的组件化开发方式和优化的性能而备受青睐。适用于各种应用场景，从小型到大型项目，Vue 提供了强大而灵活的解决方案，包括通过 Vue CLI 快速安装和创建项目，支持数据绑定、模板语法、组件化开发，以及集成 Vue Router 和 Vuex 进行更复杂的路由管理和状态管理。此外，通过一个简单的待办事项 App 实战案例展示了 Vue 的快速开发和实现过程，体现了其在实际项目中的高效应用。

安装Vue与创建项目

使用 NPM 或 Yarn 安装 Vue CLI

Vue CLI 是 Vue 的官方命令行工具，用于管理 Vue 项目的构建和开发环境。首先，确保已安装 Node.js。然后，通过以下命令安装 Vue CLI：

npm install -g @vue/cli

或使用 Yarn：

yarn global add @vue/cli

创建 Vue 项目

创建 Vue 项目的步骤如下：

使用 Vue CLI 创建新项目：

vue create my-project

选择项目类型，根据需要勾选功能选项后，使用 Create project 完成项目创建。
进入项目目录并启动开发服务器：

cd my-project
npm run serve

或使用 Yarn：

cd my-project
yarn serve

项目启动后，浏览器会自动打开项目首页。

Vue 基础语法与特性

Vue 的 HTML 绑定

Vue 的双花括号语法用于数据绑定，可以将 Vue 实例的属性或计算属性渲染到 HTML 元素中：

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

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

Vue 的模板语法

除了基本的数据绑定外，Vue 还支持更复杂的操作，如条件渲染、循环遍历、事件处理等：

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

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

Vue 的组件化开发

Vue 的核心概念之一是组件化。组件允许将 UI 逻辑和数据封装到可重用的模块中。以下是一个简单的按钮组件示例：

<!-- Button.vue -->
<template>
  <button @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: String,
    onClick: Function
  }
};
</script>

在父组件中使用此按钮组件：

<template>
  <div>
    <button-component text="点击我" @onClick="handleClick" />
  </div>
</template>

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

export default {
  components: {
    'button-component': ButtonComponent
  },
  methods: {
    handleClick() {
      alert('按钮被点击！');
    }
  }
};
</script>

组件开发实践

创建自定义组件

自定义组件通常使用 <template>、<script> 和 <style> 标签来定义组件的结构、数据和样式：

<!-- MyComponent.vue -->
<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String
  }
};
</script>

<style>
.my-component {
  background-color: #f8f8f8;
  padding: 20px;
}
</style>

组件间的数据传递

在 Vue 中，组件间的通信可以通过属性、事件或 props、自定义事件等方式实现：

<!-- Parent.vue -->
<template>
  <div>
    <my-component :title="parentTitle" @onChildClick="onChildClick" />
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  },
  data() {
    return {
      parentTitle: '主标题',
      childClickCount: 0
    };
  },
  methods: {
    onChildClick() {
      this.childClickCount++;
    }
  }
};
</script>

使用生命周期方法

生命周期方法允许开发者在组件的不同阶段执行特定的逻辑。例如，beforeCreate、created、beforeMount、mounted 等：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '组件已加载'
    };
  },
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('组件已挂载');
  }
};
</script>

Vue 路由与状态管理

Vue Router 的安装与使用

Vue Router 是 Vue 的官方路由管理器。安装 Vue Router：

vue add router

在项目的 router 目录中配置路由：

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../components/About.vue') }
];

const router = new VueRouter({
  routes
});

export default router;

状态管理工具 Vuex 的引入与实例

Vuex 是 Vue 的状态管理库，用于在 Vue 应用中集中存储和管理状态。安装 Vuex：

vue add vuex

配置 Vuex：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

export default store;

Vue 项目部署

本地环境开发与调试

Vue 项目通常使用本地开发服务器进行调试。Vue CLI 已内置了开发服务器功能。在项目根目录下运行：

npm run serve

或使用 Yarn：

yarn serve

运行后，浏览器会自动打开项目的开发服务器。

Vue 项目部署到服务器或在线平台

部署 Vue 项目到生产环境通常涉及以下步骤：

构建生产版本：通过运行 npm run build 或 yarn build 生成生产环境可部署的文件。
托管到静态服务器：将生成的文件部署到支持静态文件托管的服务器，如 Netlify、Vercel 或者自建的 Nginx 服务器。
使用CDN：将静态文件托管到 CDN（如 Cloudflare）以提高全球访问速度。

Vue 简易项目实战

实战案例：创建一个简单的待办事项 App

项目结构：

my-todo-app/
├── package.json
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── components/
│   │   ├── TodoList.vue
│   │   ├── TodoItem.vue
│   ├── main.js
│   ├── router.js
│   └── store/
│       └── index.js
│   └── App.vue
└── .gitignore

组件代码：

<!-- TodoItem.vue -->
<template>
  <li :class="{ completed: isCompleted }">
    <span>{{ text }}</span>
    <button @click="toggleCompletion">完成</button>
  </li>
</template>

<script>
export default {
  props: {
    text: String,
    isCompleted: Boolean
  },
  methods: {
    toggleCompletion() {
      this.$emit('completed', !this.isCompleted);
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

<!-- TodoList.vue -->
<template>
  <ul>
    <todo-item v-for="item in items" :key="item.id" :text="item.text" :isCompleted="item.completed" />
    <button @click="addItem">添加</button>
  </ul>
</template>

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

export default {
  components: {
    'todo-item': TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '学习 Vue', completed: false },
        { id: 2, text: '构建项目', completed: false }
      ],
      inputText: ''
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1, text: this.inputText, completed: false });
      this.inputText = '';
    }
  }
};
</script>

Main.js：

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

Vue.config.productionTip = false;

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

App.vue：

<template>
  <div id="app">
    <todo-list />
  </div>
</template>

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

export default {
  components: {
    'todo-list': TodoList
  }
};
</script>

执行步骤：

创建项目结构和文件。
在 TodoList 组件中实现待办事项的展示和添加功能。
在 TodoItem 组件中实现单个待办事项的展示和完成操作。
配置 router 和 store 以实现更复杂的逻辑和状态管理。
运行项目，验证待办事项的添加和完成功能。

通过以上步骤，你可以快速搭建并运行一个简单的待办事项应用，体验 Vue 的灵活性和易用性。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

缥缈止盈

手记
篇

粉丝

34

获赞与收藏

152

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30948 346

网络编程入门教程

20个小节 12735 240

Pandas 入门教程

25个小节 18632 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue入门：快速搭建你的第一个Vue项目

使用 NPM 或 Yarn 安装 Vue CLI

创建 Vue 项目

Vue 的 HTML 绑定

Vue 的模板语法

Vue 的组件化开发

创建自定义组件

组件间的数据传递

使用生命周期方法

Vue Router 的安装与使用

状态管理工具 Vuex 的引入与实例

本地环境开发与调试

Vue 项目部署到服务器或在线平台

实战案例：创建一个简单的待办事项 App

阅读免费教程