第7章：Element UI及Vuex

　　Elment UI

　　1.简介

　　Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率

　　ElementUI PC端

　　MintUI 移动端

　　官网

　　2.快速上手

　　初始化

D:\vue.js\code\day04>vue init webpack-simple element-demo
　　2.1 安装element-ui　　

　　注意：本次使用版本安装因为学习视频版本的v1版本，不使用版本安装会安装v2版本，在配置样式不一样

cd element-demo
cnpm install
cnpm install element-ui@1.4.13 -S
　　2.2 在main.js中引入并使用组件
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'  // 样式文件需要单独引入，v2版本名字为theme-chalk
import App from './App.vue'
// 引入后使用
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

　　这种引入方式引入所有组件，这样引入的模块较多，还可以按需引入

　　2.3 在webpack.config.js中添加loader

　　CSS样式和字体图标都需要相应的loader来加载所以需要style-loader ，css-loader

　　默认并没有style-loader模块，所以需要单独安装

cnpm install style-loader -D

　　修改webpack.config.js增加css文件及字体等文件的解析loader，增加以下代码

{
        test:/\.css$/,
        loader:'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },

 　　2.4使用组件

　　使用按钮，编辑App.vue增加按钮

 

    
    我的按钮
    我的按钮
    我的按钮
    我的按钮
    我的按钮

　　分别增加了不同类型的按钮，在页面查看

 　　图标按钮

编辑
搜索
上传

　　页面显示

 　　图标

　　页面显示

　　布局


    
      welcome
      to
      itany
      网博
    
    
      welcome
      to

　　页面显示

 　　日期选择器

　　日期选择器组件

　　DatePicker.vue

　　页面显示

 　　上传组件

　　Upload.vue

　　App.vue

　　页面显示

 　　自定义全局组件

　　全局组件（插件）：就是可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就可以使用了，如vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter)　　　　

　　普通组件（插件）：每次使用都要引入，如axios

import axiso from 'axios'

　　自定义组件

　　初始化项目

vue init webpack-simple component-demo

　　在文件夹src下插件组件目录components在该目录下再新建目录user

　　插件组件文件src/components/user/Login.vue

　　创建src\components\user\index.js引入，需要有install方法

import Login from './Login.vue'

export default {    
    install:function(Vue){
        Vue.component('Login',Login)
    }
}

　　在main.js中引入使用

import Vue from 'vue'
import App from './App.vue'

import Login from './components/user'

Vue.use(Login);

new Vue({
  el: '#app',
  render: h => h(App)
})

　　修改App.vue引用组件

　　启动

cnpm run dev

　　页面显示

 　　Vuex

　　1.简介

　　Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态，以一种可预测的方式发生改变。

　　简单来说，用来集中管理数据。 基于Flux的前端状态管理框架。

　　官网                                                                 

　　2.基本用法                                               

　　初始化

D:\vue.js\code\day04>vue init webpack-simple vuex-demo
　　2.1 安装vuex
cd vuex-demo
cnpm install vuex -S

　　启动

cnpm install 
cnpm run dev
　　2.2 创建store.js文件，在main.js文件中导入并配置store选项
import Vue from 'vue'
import App from './App.vue'

import store from './store.js'   // 导入store对象
new Vue({
  store:store, // 配置store选项，指定为store对象，会自动将store对象注入到所有子组件中，在子组件中通过this.$store访问该store对象
  el: '#app',
  render: h => h(App)
})
　　2.3编辑store.js文件

　　Vuex的核心是Store（仓库），相当于一个容器，一个store实例中可以包含以下的属性和方法

　　　　state　　定义属性（状态，数据）

　　　　getters   用来获取属性

　　　　actions  定义方法（动作）

　　　　commit 提交变化，修改数据的唯一方式就是显示提交mutations

　　　　mutations 

　　　　store.js

// vue的配置 import Vue from 'vue' import Vuex from 'vuex'
// 定义属性，数据 Vue.use(Vuex); var state={     count:6 }
// 创建store对象 const store=new Vuex.Store({     state })
// 导出store对象 export default store;
　　2.4编辑App.vue

　　在子组件中访问store对象的两种方式

　　　　方式1：通过this.$store访问

　　　　方式2：通过mapGetters，mapActions访问，vuex提供了两个方法

　　　　　　mapGetters 获取属性（数据）

　　　　　　mapActions 获取方法（动作）

　　使用方式2的代码store.js

// vue的配置
import Vue from 'vue'
import Vuex from 'vuex'

// 定义属性，数据
Vue.use(Vuex);
var state={
    count:6
}

// 定义getters
var getters={
    count(state){
        return state.count
    }
}
// 创建store对象
const store=new Vuex.Store({
    state,
    getters
})

// 导出store对象
export default store;

　　App.vue

　　页面显示

 　　下面定义方法改变这个值

　　修改代码store.js

// vue的配置
import Vue from 'vue'
import Vuex from 'vuex'

// 定义属性，数据
Vue.use(Vuex);
var state={
    count:6
}

// 定义getters
var getters={
    count(state){
        return state.count
    }
}

// 定义actions，要执行的操作，如流程的判断，异步请求
const actions = {
    // increment(context){  // 包含commit,dispaych,state
    //     console.log(context)
    // }
    increment({commit,state}){
        commit('increment');  // 提交一个名为increment的变化，这个名称可以自定义，可认为是类型名
    }
}
// d定义mutations，处理状态（数据）的改变
const mutations={
    increment(state){
        state.count++;
    }
}
// 创建store对象
const store=new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

// 导出store对象
export default store;

　　App.vue

　　页面显示

 　　同理可添加减小的方法

　　点击增加或者减小执行了会记录在vue调试工具里面

 　　项目结构

　　

　　Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

  1. 应用层级的状态应该集中到单个 store 对象中。

  2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

  3. 异步逻辑都应该封装到 action 里面。

　　只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

　　对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

　　                                                     

Vue.js学习

相关

标签