likes
comments
collection
share

从零搭建 Vue 前端项目的记录

作者站长头像
站长
· 阅读数 51

背景

近期因为接收一个项目本来要画界面原型，但是对于像Axure这样的工具使用的比较少且如果要参与设计界面原型还得去找相关的UI元件，最后还是决定直接通过前端实现界面原型的结果，以便后续开发的时候也可以节省开发时间。所以准备直接使用 Vue 和 ElementUI 来搭建前端项目，本文主要记录自己使用 Vue 过程的一些思考的记录。

项目搭建

首先使用 Vue Cli 创建一个新的项目，整个创建的命令如下

npm install -g @vue/cli  // 1.安装 Vue Cli
vue create project-name // 2.创建项目

npm install element-plus --save // 安装elementUI

注意：如果Vue使用3.X版本，ElementUI 可以使用Element Plus，它是 Element UI 的升级版本，专为 Vue 3.x 开发。当然也可以使用 Element UI 的 2.x 版本，但可能会出现一些特性可能不完全兼容。如果要使用 2.X版本需要安装特定版本：npm install element-ui@2.15.1。

整个项目所依赖的框架都安装完后就开始引入 ElementUI 。在项目的主入口文件（一般是 main.js）中，添加以下代码来引入 Element UI 的样式和组件。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus);
app.mount('#app')

这样一个前端项目就搭建完成了。运行命令 yarn serve / npm run serve 就可以启动项目。

项目目录结构

使用 vue cli 脚手架创建的项目目录结构可以看到，src 文件夹放着项目所需要的资源，页面，JS，CSS，资源等，src 文件外都是一些项目配置，依赖等文件。所以重点就是 src 文件，它其实就是项目代码文件。

对于我对 vue 的初步认识：组件化，页面功能按模块划分成各个组件单独实现，再互相组合成一个系统。每个组件功能职责单一，且可以被重复使用，不仅维护性高而且降低耦合性。

项目目录结果可以参考 Vue 标准项目：github.com/lq782655835…

  • main.js主入口，router.js路由划分
  • plugins 自己或第三方插件,包括但不限于components、directives、filters、third lib
  • pages 所有路由页面。原则：轻page，重component
  • components 所有组件。包括原子组件、业务公用组件、页面独有组件
  • server api引入入口
  • assets sass、图片资源入口，不常修改数据
  • utils 工具文件夹
  • store 标准vuex格式，非必须

在刚开始使用 Vue 框架时没有太多的了解，所以在开发过程中我也是走错一些路，后来不得不花更多的时间将其调整回来。但我觉得不一定完全按照标准目录结构，但一定要按照规范去设计，基于自己场景之上去的产出一定的规范。

问题解析

在开发过程中直接使用 ElementUI 简单方便的完成页面的设计，但是还是会有一些未知的问题需要深究其原理，才能使用的更得心应手。

问题1: 组件之间通信方式

在开发过程中经常会遇到几种组件需要通信的场景：

  • 父子组件之间通信：使用 Props/Attributes，父组件在组件将数据设置为属性，子组件使用 props 接收数据。该方式是单向的，父组件向子组件传递数据。
// 父组件中使用子组件，并增加name 的属性
<Children name="传递值"></Children>

//子组件中使用 props 接收数据
export default {
  name: "headerView",
  props: {
    name: String,
  },
  data() {
    return {};
  },
};

如果需要子组件向父组件传递数据，可以使用 $emit 触发自定义事件。然后在父组件通过 @event-name 监听事件并执行相应的操作。

// 子组件中
this.$emit('add', good)  
// 父组件中
  <Children name="传递值"></Children>
  • 兄弟组件之间的通信

使用一个全局的事件总线（Event Bus）来进行兄弟组件之间的通信。就是创建一个全局的 Vue 实例作为事件中心，实现事件的发布和订阅。这样就可以实现不同组件之间可以进行解耦的通信，方便实现组件间的数据传递和交互。

// 主文件中创建一个 Vue实例作为事件中心
export const eventBus = new Vue();

// 在组件A中发布事件
 eventBus.$emit('event1', 'Hello from Component A')
// 在组件B中订阅事件
 eventBus.$on('event1', (data) => {
      this.message = data
    })
  • 祖孙与后代组件的通信

同样可以使用 props 进行通信，当然还可以使用父组件通过 provide 提供数据，子组件通过 inject 注入该数据时，可以实现祖先组件向后代组件传递数据的功能。

  • 非关系组件之间的通信

非关系的组件可以使用以上说明的 Event Bus 方式。Vue 还提供状态管理 Vuex进行集中式状态管理，就是 store 文件中提供数据共享。还可以通过 LocalStorage 或其他持久化方案将数据存储在本地，然后从不同的组件中读取和修改数据。这种方式适用于需要在不同组件间保持数据同步的场景。

问题2：Vue 的双向绑定原理

众所周知，Vue 是双向绑定数据的框架，Model - View - ViewModel。其中使用 data 对象表示 Model ，View 就是用户界面可见部分，ViewModel 通过双向数据绑定机制将数据的变化反映到 view 上，viewModel 就是 vue 实例扮演，它包含了数据（Model）和与数据相关的方法和逻辑。

记录一切努力而又美好的经历， 我是小雄Ya！！！

参考资料：

转载自:https://juejin.cn/post/7245496105273016379
评论
请登录