VUE框架CLI组件化VueX模块化拆分模块一个模块一个配置文件------VUE框架

已于 2023-12-17 17:43:10 修改
阅读量881 收藏 17
点赞数 20
分类专栏： # VUE框架 前端 文章标签： vue.js javascript 前端 ecmascript 前端框架 vue json
于 2023-12-15 16:23:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135020150
版权 
// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
// 导入混入
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';
// 导入插件
import {p1} from './plugins';
import VueResource from 'vue-resource';
import store from "./vuex/store";

//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前
// 插上插件
Vue.use(p1,1,2,3,4);
// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性
Vue.use(VueResource);

// 这是关闭生产提示信息
Vue.config.productionTip = false

// 创建一个共享的VueComponent构造函数
// const VueComponentConstructor = Vue.extend({});
// 创建一个共享的VC对象
// const globalvc = new VueComponentConstructor();


// 创建VUE实例对象VM
const vm = new Vue({
  // 增加了一个全新的配置项,store
  store : store,
  // 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store
  // 以后vm和vc的$store都可以获取到这个store对象
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App),
  // 利用生命周期机制,在对象创建时把我们的vm作为这个对象
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的

console.log(vm);

// 这句话就等同于我们写的<script src="vue.js">

// 这就是在引入vue

import Vue from 'vue';

// 然后下一步是导入我们的根组件

import App from './App.vue';

// 导入混入

import {mix1} from './mixin.js';

import {mix2} from './mixin.js';

import {mix3} from './mixin.js';

// 导入插件

import {p1} from './plugins';

import VueResource from 'vue-resource';

import store from "./vuex/store";

//全局混入

Vue.mixin(mix1);

Vue.mixin(mix2);

Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前

// 插上插件

Vue.use(p1,1,2,3,4);

// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性

Vue.use(VueResource);

// 这是关闭生产提示信息

Vue.config.productionTip = false

// 创建一个共享的VueComponent构造函数

// const VueComponentConstructor = Vue.extend({});

// 创建一个共享的VC对象

// const globalvc = new VueComponentConstructor();


 

// 创建VUE实例对象VM

const vm = new Vue({

  // 增加了一个全新的配置项,store

  store : store,

  // 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store

  // 以后vm和vc的$store都可以获取到这个store对象

  // 删除render函数就会导致报错

  // 因为没有可用的模板翻译器

  // 使用完整的vue.js或使用render函数才能解决这个问题

  // 为什么采用模板编译器的Vue.js放到脚手架呢?

  // 目的是减小体积,VUE.js包括两类,核心和模板编译器

  // 模板编译器可能占用vue.js体积的三分之一

  // 将来打包的时候,模板编译器没有存在的必要了

  // 体积大就会影响速度

  // render函数被自动调用,且会自动传过来一个参数

  // 这个参数是一个函数,createElement是一个函数

  // 这个函数可以用来创建元素

  // 用这个来创建元素就可以省掉我们的vue模板编译器了

  // render(createElement)

  // {

  //   return createElement(App);

  // }

  // 简写就是这个箭头函数

  render: h => h(App),

  // 利用生命周期机制,在对象创建时把我们的vm作为这个对象

  beforeCreate(){

    Vue.prototype.$bus = this;

  }

}).$mount('#app');

// 这里用的是$mount的方式绑定和el的方式是一样的

console.log(vm);

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 怎么拆分模块,VUEX建议一个功能一个模块
// 拆分成两个模块
// 两个模块一人一个对象

import a from "./a.js";
import b from "./b.js";
import c from "./c.js";

export default new Vuex.Store({
    // 模块配置
    modules : {
        // 模块名 : 模块
        ModuleA : a,
        ModuleB : b,
        ModuleC : c
    }
});

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

// 怎么拆分模块,VUEX建议一个功能一个模块

// 拆分成两个模块

// 两个模块一人一个对象

import a from "./a.js";

import b from "./b.js";

import c from "./c.js";

export default new Vuex.Store({

    // 模块配置

    modules : {

        // 模块名 : 模块

        ModuleA : a,

        ModuleB : b,

        ModuleC : c

    }

});

// A业务和B业务
// a模块
export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("action A1");
        }
    },
    mutations : {
        doA2(){
            console.log("mutation A2");
        }
    },
    state : {
        A : 1
    },
    getters : {
        computedA(){
            return 1;
        }
    }
};

// A业务和B业务

// a模块

export default {

    // 开启命名空间

    namespaced : true,

    actions : {

        doA1(){

            console.log("action A1");

        }

    },

    mutations : {

        doA2(){

            console.log("mutation A2");

        }

    },

    state : {

        A : 1

    },

    getters : {

        computedA(){

            return 1;

        }

    }

};

export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doB1(){
            console.log("action B1");
        }
    },
    mutations : {
        doB2(){
            console.log("mutation B2");
        }
    },
    state : {
        B : 1
    },
    getters : {
        computedB(){
            return 1;
        }
    }
};

export default {

    // 开启命名空间

    namespaced : true,

    actions : {

        doB1(){

            console.log("action B1");

        }

    },

    mutations : {

        doB2(){

            console.log("mutation B2");

        }

    },

    state : {

        B : 1

    },

    getters : {

        computedB(){

            return 1;

        }

    }

};

export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("C的doA");
        }
    }
};

export default {

    // 开启命名空间

    namespaced : true,

    actions : {

        doA1(){

            console.log("C的doA");

        }

    }

};

<template>
    <div>
        <A></A>
        <hr>
        <B></B>
    </div>
</template>

<script>
    import A from "./components/A.vue";
    import B from "./components/B.vue";
    export default {
        name : "App",
        components : {A,B}
    }
</script>

<style>

</style>

<template>

    <div>

        <A></A>

        <hr>

        <B></B>

    </div>

</template>

<script>

    import A from "./components/A.vue";

    import B from "./components/B.vue";

    export default {

        name : "App",

        components : {A,B}

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>我是A</h1>
        <button @click="doA1()">actions</button>
        <button @click="doA2()">mutations</button>
        <h3>state : {{ $store.state.ModuleA.A }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleA/computedA"] }}</h3>
    </div>
</template>

<script>
    export default {
        name : "A",
        methods : {
            doA1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleA/doA1");
            },
            doA2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleA/doA2");
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是A</h1>

        <button @click="doA1()">actions</button>

        <button @click="doA2()">mutations</button>

        <h3>state : {{ $store.state.ModuleA.A }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ $store.getters["ModuleA/computedA"] }}</h3>

    </div>

</template>

<script>

    export default {

        name : "A",

        methods : {

            doA1(){

                // 开启命名空间之后需要指明

                this.$store.dispatch("ModuleA/doA1");

            },

            doA2(){

                // 开启命名空间之后需要指明

                this.$store.commit("ModuleA/doA2");

            }

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>我是B</h1>
        <button @click="doB1()">actions</button>
        <button @click="doB2()">mutations</button>
        <h3>state : {{ $store.state.ModuleB.B }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleB/computedB"] }}</h3>
    </div>
</template>

<script>
    export default {
        name : "B",
        methods : {
            doB1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleB/doB1");
            },
            doB2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleB/doB2");
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是B</h1>

        <button @click="doB1()">actions</button>

        <button @click="doB2()">mutations</button>

        <h3>state : {{ $store.state.ModuleB.B }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ $store.getters["ModuleB/computedB"] }}</h3>

    </div>

</template>

<script>

    export default {

        name : "B",

        methods : {

            doB1(){

                // 开启命名空间之后需要指明

                this.$store.dispatch("ModuleB/doB1");

            },

            doB2(){

                // 开启命名空间之后需要指明

                this.$store.commit("ModuleB/doB2");

            }

        }

    }

</script>

<style>

</style>

旧约Alatus
关注
  • 20
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-CLI与Vuex使用方法实例分析
10-15
Vue-CLI是一个强大的脚手架工具，用于快速搭建Vue.js项目。它自动化处理了很多繁琐的配置，使得开发者能够更专注于应用的核心逻辑。Vue-CLI通过简单的命令行接口，可以生成预配置的项目模板，比如使用webpack作为...
关于Vuex的拆分和分模块组织管理
qq_50950033的博客
07-23 1429
VueX的拆分和分模块组织管理
vuex在vue项目中如何使用
weixin_45290022的博客
12-04 828
在vue项目开发过程中都会使用到状态管理即为‘vuex’,现在抽了时间系统的将vuex系统的汇总了一下，希望对您有用。本文章只针对vuex使用，其他的不会太详细。接下来一起学习一下如何使用vuex状态管理： 在使用vuex之前需要创建一个vue的项目，当然前提是电脑里面必须有vue环境（使用webpack创建一个项目名称为vue-project项目） vue init webpack vue-pr...
Vue全家桶系列之Vuex(一)
热门推荐
10-24 1万+
文章目录1.前言2.Vuex是什么？3.什么是集中式状态管理模式？4.什么情况下使用Vuex？它能帮我们解决什么问题？5.简单的例子 1.前言 Vuex是一个很棒的状态管理库，它很简单并且非常好的与Vue集成，下面我们来开始学习Vuex! 2.Vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，状态分两种，一种是组件内部的状态，其实就是一个组件内使用的状态（data数据），另外一种是应用
Vuex的了解
weixin_57750091的博客
05-23 177
1.vuex的用途和概念 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。里面的数据可以被所有组件使用，也就是共享资源。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。 2.vuex里面的都有什么方面 1.state： vuex的基本数据,用来储存变量的。 2.getters： vuex里面的计算属性，getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。 3...
vuex的拆分使用（详细）模块化处理
@baby张~的博客
04-03 8164
你还不知道 vuex 如何使用？ vuex快速上上手链接：https://blog.csdn.net/weixin_43648947/article/details/88977281 当我们对vuex有了一定的了解之后发现随着项目越来越大， 将所有的store单一的存在一个js里显然维护和使用起来都不太方便， 这时候我们最好是将store拆分开，使state、getters、mutations、...
基于vue-cli搭建的仿TIM纯前端页面.zip
11-03
在本文中，我们将深入探讨如何使用Vue CLI搭建一个仿TIM的纯前端页面。Vue CLI是Vue.js官方提供的一个脚手架工具，它极大地简化了Vue项目的初始化和构建过程，允许开发者快速地设置开发环境，专注于编写核心业务逻辑...
vue-cli3单页构建大型项目方案
11-20
你可以在这个界面上选择预设、模板或自定义配置来初始化项目。 接下来，关注路由配置。在 `src/router/index.js` 文件中，你需要根据项目需求选择路由模式。默认情况下，Vue Router 使用 `hash` 模式，它通过 URL ...
vue入门到熟练（vue/vue-cli/vue-webpack）
12-30
**Webpack打包**: Webpack 是一个现代的模块打包器，常用于处理Vue项目中的依赖和资源。它将项目拆分为多个模块，然后根据配置进行编译和打包，生成优化过的静态资源。Vue项目中通常会结合使用`vue-loader`，专门...
脚手架vue-cli工程webpack的作用和特点
12-09
3. **资源模块化**：Webpack 认为每个静态资源都可以是一个模块，可以被引用和打包。这使得资源管理和组织更加灵活。 4. **第三方库集成**：Webpack 可以轻松地将外部库或框架集成到项目中，作为一个模块进行管理，...
关于vux 进阶模块拆分详解
社会人
10-22 626
关于vux 进阶模块拆分详解 如果我们是使用脚手架搭建地vue项目，默认目录下都有一个store文件夹，下面只有一个index.js,如果是小项目，我们不需要拆分模块，直接在里面写就完事 2。 如果是稍微大一点地项目，我们帮vux按模块拆分开来，便于后期维护 直接上代码，简洁明了。 在store下面建立modules文件夹， modules文件夹下面放的就是你需要拆分出来的模块，这里我例举一个user模块，用户登录的模块，根据自己的业务建立需要的js 在store下面建立getters.js
如何在vue中合理拆分Vuex的store并配置全局getter
yzwlogo的博客
07-11 233
和store/modules统计创建geeters.js文件。store/modules/user.js文件。2、创建store/modules文件夹，分模块创建js文件。1、创建index.js文件，引入各个模块。
Vue大型项目之分模块运行/打包
温柔雨哥的博客
02-21 7819
多系统集成下的分模块打包。分模块打包方式多种多样，可以适用于多系统之间互不干扰，主系统可集成各子系统，各子系统又可单独运行的业务场景。
vuex的拆分
反正你猜不到我是谁
07-25 362
说明 vuex主要用来进行统一状态管理。随着项目的增大，vuex中的js文件会变得越来越大，越来越冗余，代码的可维护性自然也就变得很差。 所以这个时候就需要进行vuex的分层。 store拆分 可以在项目创建的初期，在store目录中分别创建state.js、actions.js、mutations.js、getters.js文件。 然后在store目录下的index.js中将其他js文件引入。 如下： // store/index.js import state from './state' impor
Vuex +拆分模块 + 数据持久化(防止页面刷新数据丢失)
温小鹿的博客
10-25 1287
一、什么是vuex？ 是为vue.js设计的集中式状态管理框架，vuex应用的核心就是store(仓库)。"store"本来就是一个仓库，它包含应用中大部分的状态(state),简单来说就是组件共享data中需要共同的属性。store本身就是一个对象，vue有且只有这一个对象。 vuex和单纯的全局对象有以下两点不同: 1.vuex的状态存储是响应式的。 2.不能直接改变store中的状态，改变store中的状态的唯一途径就是显示的提交((commit)mutation。 二、vuex五个核心属性： s
前端组件拆分思路及通信设计（vue2.0）-组件拆分原则-vue组件-vue组件拆分原则
默的博客
05-19 661
因为本文冗长，有一些是考虑对于小白上手所需技能，需要直接考虑组件拆分思路，建议直接进入 三、1） 组件拆分原则 六、一般的组件化内容 因为组件的知识点过多，本文是用于闲（摸 ）暇（鱼 ）时间写的，具体某个功能的用法，强烈建议翻阅其他文章或官网...
vue大型项目拆分 Vue 项目重构
weixin_65478269的博客
03-31 907
vue大型项目拆分
基于 vue-cli 2 实现，vue 支持多模块项目
大猩猩X
01-22 6603
基于 vue-cli 2 实现，vue 多模块、vue多项目集成工程 业务场景 1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如不同两套UI的界面可能功能显示及样式都有差别，那就不得不单独拆成一个项目，但是这样又会造成每个项目很多冗余代码。 2.如果项目有多个子模块(同时子模块...
Vuex按模块分割
xvzhengyang的博客
03-21 170
Vuex按模块分割 如何使用
vue 组件化,模块化
最新发布
06-25
Vue.js 是一个流行的前端JavaScript框架，它的核心理念之一就是组件化和模块化开发。这两个概念在 Vue 中是相辅相成的： 1. **组件化**：Vue 提倡将界面拆分成可重用的、独立的组件。每个组件都有自己的模板、数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值