真实高质量低代码shang业项目，前端/后端/运维/管理系统

阅读本书更多章节>>>>

真实高质量低代码商业项目，前端/后端/运维/管理系统
扌并讠果∪RL：Ukoou点ㄷㅁΜ

前端低代码开发介绍
前端低代码开发是一种通过可视化界面和少量编码来快速构建前端应用程序的方法。它的目的是让非专业开发人员也能够参与到应用程序的开发过程中，减少开发成本和时间。

使用前端低代码开发工具，用户可以通过拖拽组件、设置属性、配置逻辑等操作来创建应用程序的用户界面和交互逻辑，而无需深入学习复杂的编程语言和技术。这使得开发人员可以更专注于业务逻辑和用户体验，而不是编写重复的代码。

前端低代码开发工具通常提供了丰富的组件库、预设模板、自动化功能等，让用户可以快速构建出功能丰富、响应式的前端应用。一些流行的前端低代码开发工具包括Microsoft Power Apps、Salesforce Lightning、OutSystems等。

真实高质量低代码商业项目，前端/后端/运维/管理系统 - 前端工具链Vue CLI

Vue CLI（Vue Command Line Interface）是一个基于Vue.js框架的标准化脚手架工具，它为开发者提供了一个强大且灵活的工具链，用于快速搭建和开发Vue.js应用程序。Vue CLI 通过提供以下功能和特性，简化了前端开发的流程：

项目脚手架：Vue CLI 可以快速生成项目的基础结构，包括配置文件、目录结构和基础代码，使得开发者能够从零开始迅速启动一个新项目。

官方预设配置：Vue CLI 提供了一系列官方预设配置，包括Babel、ESLint、Webpack等，这些配置帮助开发者遵循最佳实践，同时减少了手动配置的需要。

插件系统：Vue CLI 拥有一个丰富的插件生态系统，允许开发者通过安装插件来扩展项目的功能，如添加路由（vue-router）、状态管理（Vuex）等。

开发服务器：内置的开发服务器支持热重载（Hot Reload），这意味着开发者在编辑代码时，浏览器可以自动更新变更，无需手动刷新页面。

构建和部署：Vue CLI 提供了构建命令，可以将项目打包成生产环境的代码，同时支持多种构建配置，以优化性能和资源管理。

单元测试和端到端测试：Vue CLI 集成了测试工具，如Jest和Nightwatch，使得开发者可以编写和运行单元测试和端到端测试，确保代码质量。

Vue UI：Vue CLI 提供了一个图形化界面，允许开发者通过可视化的方式管理项目配置和插件，使得项目设置更加直观和用户友好。

TypeScript 支持：Vue CLI 支持TypeScript，使得开发者可以使用静态类型检查来提高代码的可维护性和可读性。

PWA 支持：Vue CLI 可以生成渐进式Web应用程序（PWA），这些应用程序可以提供类似原生应用的体验，包括离线支持和添加到主屏幕等功能。

自定义和扩展性：Vue CLI 允许开发者自定义配置和扩展，以满足特定的项目需求，这提供了高度的灵活性和控制力。

真实高质量低代码商业项目，前端/后端/运维/管理系统 - Vuex 添加 mutations 和 getters

1.state:定义公共数据并在组件中使用

代码如下（示例）：

c复制代码 export defaule new Vuex.store({    state:{       num:100    } }) 

如:在Vuex实例中创建state对象,并定义一个num属性,值为100。当在组件中需要使用时 (1).通过 $store.state.属性名 的方法进行使用

代码如下（示例）：

c复制代码<template>  <div>    <p>num : {{ $store.state.num }}</p>  // num:100  </div></template>

注意:在代码中直接进行使用时,需要在前面添加this。

c复制代码<javascript> export default {  methods: {    get() {      thi.$store.state.num+=1      console.log(this.$store.state.num)    },  },};</javascript>

(2).通过Vuex-map函数进行使用 通过引入Vuex-map函数将state中的属性映射到组件的computeds属性中进行直接使用 代码如下（示例）：

c复制代码<template>  <div>    <p>num : {{ state名 }}</p>  // num:100  </div></template><javascript>import { mapState } from '@/store/index.js' export default {  computed: {    ...mapState(['state名1','state名2'...])    },  },};</javascript>

**注意:**当组件的data中的属性名与state名重复时,会优先显示组件的data属性的值, 此时可以通过修改mapState中的state名解决这个问题 代码如下（示例）：

c复制代码<javascript>import { mapState } from '@/store/index.js' export default {  computed: {    ...mapState({新名字:'state名'})    },  },};</javascript>

小结: 1.state属性用于定义和管理公共数据,只要是需要通过vuex进行传递的数据,都必须在vuex中进行定义 2.state的作用是：保存公共数据（多组件中共用的数据） 3.state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

2.mutations:修改公共数据

通过调用mutations来修改定义在state中的公共数据。

在实例中定义mutations属性

代码如下（示例）：

c复制代码new Vue.store({  // 省略其他...  mutations：{    // 每一项都是一个函数，可以声明两个形参  mutation名1：function(state [, 载荷]) {      },    mutation名2：function(state [, 载荷]) {      },}})

每一项都是一个函数，可以声明两个形参：

第一个参数是必须的，表示当前的state。在使用时不需要传入 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据 (1).通过 this.$store.commit.属性名 的方法进行使用

代码如下（示例）：

c复制代码this.$store.commit('mutation名', 需要传入的实参)

注意:这里的commit是固定的方法。

(2).通过Vuex-map函数进行调用 通过引入Vuex-map函数将mutations中的属性映射到组件的methods属性中进行直接使用 代码如下（示例）：

c复制代码<javascript>import { mapMutations } from '@/store/index.js' export default {  mutations: {    ...mapMutations(['mutations名1','mutations名2'...])    },  },};</javascript>

注意: mutations是映射到methods中,使用时需要按照methods中的方法形式进行使用 碰到重名时,与state的方法一致

代码如下（示例）：

c复制代码<template>  <div>    <button @click="mutations名()">点击使用vuex中的方法</button>  // num:100  </div></template>

小结: mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

3.getters:在state中的数据的基础上，进一步对数据进行加工得到新数据。

其作用与组件中computed一样,对vuex中state中的现有属性进行计算。

在实例中定义getters属性

代码如下（示例）：

c复制代码new Vuex.store({  // 省略其他...  getters: {    // state 就是上边定义的公共数据state    getter的名字1: function(state) {      return 要返回的值    }  }})

在组件中通过：$store.getters.getter的名字 来访问,直接展示return出来的值

代码如下（示例）：

c复制代码$store.getters.getter的名字1

(2).通过Vuex-map函数进行调用 通过引入Vuex-map函数将getters中的属性映射到组件的computed属性中进行直接使用 代码如下（示例）：

c复制代码<javascript>import { mapGetters} from '@/store/index.js' export default {  computed: {    ...mapGetters(['getters名1','getters名2'...])    },  },};</javascript>

注意: getters遇到重名时,与state的解决方法一致

4.actions:发异步请求。

我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

perl复制代码 action中可以通过调用 mutation来修改state，而不是直接变更状态。 action 可以包含任意异步(例如ajax请求)操作。

在实例中定义getters属性

代码如下（示例）：

c复制代码new Vuex.store({  // 省略其他...  actions: {    // context对象会自动传入，它与store实例具有相同的方法和属性    action的名字: function(context, 载荷) {      // 1. 发异步请求, 请求数据            // 2. commit调用mutation来修改/保存数据            // context.commit('mutation名', 载荷)    }  }})

在组件中通过this.$store.dispatch(‘actions的名字’, 参数)来调用action

代码如下（示例）：

c复制代码$store.getters.getter的名字1

(2).通过Vuex-map函数进行调用 通过引入Vuex-map函数将actions中的属性映射到组件的computed属性中进行直接使用 代码如下（示例）：

c复制代码<javascript>import { mapActions} from '@/store/index.js' export default {  methods: {    ...mapActions(['actions名1','actions名2'...])    },  },};</javascript>

小结: mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

5.modules:拆分复杂业务。

随着项目越来越大，需要放在vuex中的数据越来越多，整个store/index.js中代码会越来越长，这个时候就需要拆分模板，把复杂的场景按模块来拆开：

代码如下（示例）：

c复制代码export default new Vuex.Store({  // state: 用来保存所有的公共数据  state: {},  getters: {},  mutations: {},  actions: {},  modules: {  模块名1： {    // namespaced为true，则在使用mutations时，就必须要加上模块名      namespaced: true,     state: {},  getters: {},  mutations: {},  actions: {},  modules: {}  }，    模块名2： {        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名    state: {},  getters: {},  mutations: {},  actions: {},         modules: {}  }    }})

也可以更进一步对文件进行拆分。

代码如下（示例）：

c复制代码|--store /|------- index.js # 引入模块|------- modules|-------------- / mod1.js # 模块1|-------------- / mod2.js # 模块2

访问数据和修改数据的调整 访问模块中的数据，要加上模块名

c复制代码    获取数据项：  {{$store.state.模块名.数据项名}}    获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

arduino复制代码      如果namespaced为true，则需要额外去补充模块名      如果namespaced为false，则不需要额外补充模块名

c复制代码$store.commit('mutations名')        // namespaced为false$store.commit('模块名/mutations名')  // namespaced为true

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-05/154466.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！