您的位置: 首页  >  文章  >  mint-ui、Vuex基本配置

mint-ui、Vuex基本配置

分类: 文章 • 2024-12-11 10:55:46

他的一个网址（可能打不开的翻墙，多尝试总有打开的时候）：http://mint-ui.github.io/#!/zh-cn

执行命令：
创建Demo：vue create mintuidemo1
到该目录下：cd mintuidemo1
安装mint-ui：cnpm install mint-ui -S
安装按需加载：cnpm install babel-plugin-component -D
安装路由：cnpm install vue-router --save
Hbulider导入mintuidemo1
package.jsop文件中的安装的一些依赖（插件）最终有：
“dependencies”: {
“core-js”: “^3.6.5”,
“mint-ui”: “^2.2.13”,
“vue”: “^2.6.11”,
“vue-router”: “^3.3.4”
}
main.js配置为：（什么项目就必须引入它跟样式下面还得use它）
引入mint-ui：import Mint from ‘mint-ui’
引入样式：import ‘mint-ui/lib/style.css’
引入路由：import router from ‘./router’
使用mint-ui：Vue.use(Mint)
把引入的router,注册到最下面（我们new Vue里只写上面引入的新东西可不包括mint）
即new Vue({
router,
render: h => h(App),
}).$mount(’#app’)
引入router 就得在src下键router文件夹 下面得有个index.js 它的配置为：
1.引入Vue、Router
import Vue from ‘vue’
import Router from ‘vue-router’
2.使用Router
Vue.use(Router)
3.引入页面了
export default new Router({
routes: [{
path: ‘/’,
component: () => import(’…/App.vue’)
}]
})

App.vue这里面注意了
button、header前面都会加个mt-(mt-button、mt-header)
解释：在页面中使用mint-ui的时候
如果你要在HTML自身的HTML标签上使用点击事件可以直接使用
如果要在自定义的组件上面使用原生事件 需要使用.native 也可以mt-button

<button @click=“minttest1”>mint-ui测试3
<mt-button @click=“minttest2”>mint-ui测试2
这两效果一样
<button @click.native=“minttest1”>mint-ui测试1这个直接是错的不生效

Vuex 搭建过程 以及项目结构
概念：Vuex是专为Vue.js应用程序开发的状态管理模式（提供了可公用的参数），主要采用的是集中式存储管理应用的所有组件状态 （响应式）
主要的应用场景
​ 多个视图依赖于同一状态
​ 来自不同视图的行为需要变更同一状态

  • state 数据仓库，驱动应用的数据源
  • mutations 提供修改数据仓库的方法 （同步）
  • getters 提供获取仓库内容的方法
  • actions 提供了异步操作，基于mutations来进行操作
    创建 vuexdemo：
    vue create vuexdemo1
    cd vuexdemo1
    开始装依赖
    cnpm install vuex --save
    cnpm install vue-router --save
    用HBulider导入刚才的项目
    package.jsop文件中的安装的一些依赖（插件）最终有：
    “dependencies”: {
    “core-js”: “^3.6.5”,
    “vue”: “^2.6.11”,
    “vue-router”: “^3.3.4”,
    “vuex”: “^3.4.0”
    },
    我们需要在src下创建pages、store、router包
    先看main.js配置
    1.引入Vuex
    import Vuex from ‘vuex’
    2.引入router、store
    import router from ‘./router’
    import store from ‘./store’
    3.使用vuex
    Vue.use(Vuex)
    4.需要全局守卫的话也在这里配置
    5.把上面引入的router、store注册到下面去 即：
    new Vue({
    router,
    //把上面的store
    store,
    render: h => h(App),
    }).$mount(’#app’)

router文件夹下index.js配置为：
1.引入Vue
import Vue from ‘vue’
2.引入路由
import Router from ‘vue-router’
3.使用路由
Vue.use(Router)
4.引入页面（mode:‘history’去掉路径中的#）
export default new Router({
mode:‘history’,
routes:[
{
path:’/’,
name:‘index’,
component: () => import(’…/pages/index.vue’)
},
{
path:’/login’,
name:‘login’,
component: () => import(’…/pages/login.vue’)
},
{
path:’/userCenter’,
name:‘userCenter’,
component: () => import(’…/pages/userCenter.vue’)
}
]
})

store下面也有个index.js管理store里的其他js文件 都会配置在这个index.js里
这个里面就做这一件事 其配置为
1.引入VUe
import Vue from ‘vue’
2.引入Vuex
import Vuex from ‘vuex’
3.stroe里头的其他js文件
import state from ‘./state.js’
//好像mutations你必须写对 对应的js名字错了问题不大
import mutations from ‘./muations.js’
import getters from ‘./getters.js’
import actions from ‘./actions.js’
store文件夹总结：

  1. index.js 是vuex的核心文件，这里赋值vuex对象的配置
  2. state.js 仓库的配置，当前应用需要共享的数据都可以在这里声明
  3. mutations.js 修改具体仓库数据的方法。
  4. getters.js 在获取数据的基础上，进行进一步的修改
  5. actions.js 这里存放也是方法，主要做的是异步操作
    4.使用Vuex
    Vue.use(Vuex)
    5把上面引入的js文件全部引入到最下面
    export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions

})
pages文件夹里就是写需要的页面
另外：
如果要在页面中需要展示 state 里面值时 {{this.$store.state.【具体变量名】}}
在vuex 项目中，需要通过commit 方法来提交mutations的操作。actions 方法则需要使用dispatch这个方法来进行分发
mint-ui、Vuex基本配置

相关推荐