目录

1:iView

2:  element

3:  vuex

正文

1:i-view

1:装包

npm install view-design --save

2:导包

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
 

3: 导入具体的iview组件

import {
  Button,
  Table,
  Input,
  InputNumber,
  Modal,
  Card,
  Message,
  Form,
  FormItem,
  Row,
  Col,
  Icon,
  DatePicker,
  Page,
  Select,
  Option,
  Tabs,
  TabPane,
  Timeline,
  TimelineItem,
  Upload,
  Menu,
  MenuItem,
  Submenu,
  MenuGroup,
  Breadcrumb,
  BreadcrumbItem,
  DropdownMenu,
  DropdownItem,
  Dropdown,
  Notice,
  Checkbox,
  ColorPicker,
  RadioGroup,
  Radio,
  Avatar,
  Switch,
  Spin,
  Cascader,
} from 'view-design';

4:Vue注册iview组件

Vue.component('Button', Button);
Vue.component('Card', Card);
Vue.component('Table', Table);
Vue.component('Input', Input);
Vue.component('InputNumber', InputNumber);
Vue.component('Form', Form);
Vue.component('FormItem', FormItem);
Vue.component('Row', Row);
Vue.component('Col', Col);
Vue.component('Icon', Icon);
Vue.component('DatePicker', DatePicker);
Vue.component('Page', Page);
Vue.component('Select', Select);
Vue.component('Option', Option);
Vue.component('Timeline', Timeline);
Vue.component('TimelineItem', TimelineItem);
Vue.component('Upload', Upload);
Vue.component('Menu', Menu);
Vue.component('MenuItem', MenuItem);
Vue.component('Submenu', Submenu);
Vue.component('MenuGroup', MenuGroup);
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('BreadcrumbItem', BreadcrumbItem);
Vue.component('Modal', Modal);
Vue.component('Dropdown', Dropdown);
Vue.component('DropdownMenu', DropdownMenu);
Vue.component('DropdownItem', DropdownItem);
Vue.component('Checkbox', Checkbox);
Vue.component('ColorPicker', ColorPicker);
Vue.component('RadioGroup', RadioGroup);
Vue.component('Radio', Radio);
Vue.component('Avatar', Avatar);
Vue.component('Tabs', Tabs);
Vue.component('TabPane', TabPane);
Vue.component('ISwitch', Switch);
Vue.component('Spin', Spin);
Vue.component('Cascader', Cascader);
 
Vue.prototype.$Modal = Modal
Vue.prototype.$Message = Message
Vue.prototype.$Notice = Notice
Vue.prototype.$Spin = Spin
 

2:element

1:  安装

npm i element-ui -S

2:导包

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

3:导入具体组件

import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

4:注册组件

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

3:  vuex

1:  安装

npm install vuex --save

npm install es6-promise --save

2: 导包

import Vuex from 'vuex'
 
3:注册到Vue中
Vue.use(Vuex)
 
4:创建store
const store = new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: { },
modules: { }
});

5:  挂在到Vue中

Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)):

var vm = new Vue({
el : '#app', render: c => c(app),
store,
router
});
 
 
 

06:(h5*)Vue第六天的更多相关文章

  1. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  2. 【06】Vue 之 组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  3. 04 (H5*) Vue第四天

    目录: 1:父组件向子组件传值,通过属性绑定的方式. 2:父组件向子组件传方法,通过事件绑定的方式 . 3:通过ref来获取Dom元素 1:父组件向子组件传值,通过属性绑定的方式 1.1:父组件声明数 ...

  4. 03 (H5*) Vue第三天

    目录: 1:Vue-resource中的全局配置. 2:Vue动画2部曲 3:animate动画 4:钩子函数动画 5:组件三部曲,推荐使用template标签来创建组件模板 1:Vue-resour ...

  5. 02 (H5*) Vue第二天

    目录: 1:全局过滤器的使用 2:局部过滤器 3:自定义键盘码 4:自定义指令 5:自定义私有指令 6:Vue生命周期. 7:网络请求 1:全局过滤器的使用 Vue.filter("msgF ...

  6. 01 (H5*) Vue第一天

    目录 1:什么是Vue.js 2:MVC和MVVM. 3:为什么要学习前段框架 4:框架和库的区别 5:怎么使用Vue. 6:常见的Vue指令 7:  五大事件修饰符 8:在vue中使用class样式 ...

  7. vue学习过程总结(06) - vue的数据存储store

    这个不知道能怎么叫不?现在对这块很迷.以下为个人理解 store是状态管理,是一个对象,有其属性和方法. 常见的值有:state/mutations/actions/getters, 这几个值的意思: ...

  8. 移动端h5+vue失焦搜索,ios和android兼容问题

    html部分: <input type="search" :placeholder="placeholder" v-model="searchN ...

  9. mpvue中的平台状态判断(H5网页 or 小程序)

    在开发微信小程序或者微信网页H5的时候,有时我们利用外部组件可能不兼容这两者,需要区分开来,可以在对应的mainjs中配置如下 let platform: try{ if(wx){ platform= ...

随机推荐

  1. SCUT - 77 - 哈利波特与他的魔法杖

    https://scut.online/p/77 METO说是单点更新线段树.要记录哪些点不用再更新,不太清楚具体是要怎么实现? 一个类似的想法是把n个点建一棵平衡树,每次节点变成0之后从树上移除,至 ...

  2. bzoj3188 [Coci 2011]Upit(分块)

    Time Limit: 10 Sec  Memory Limit: 128 MB Description 你需要维护一个序列,支持以下4种操作.一,将区间(u,v)的数覆盖为C:二,将区间(u,v)的 ...

  3. wikioi 2144 分步二进制枚举+map记录

    题目描写叙述 Description 有n个砝码,如今要称一个质量为m的物体,请问最少须要挑出几个砝码来称? 注意一个砝码最多仅仅能挑一次 输入描写叙述 Input Description 第一行两个 ...

  4. MVC框架与MTC框架

    3.WEB框架 MVC Model View Controller 数据库 模板文件 业务处理 MTV Model Template View 数据库 模板文件 业务处理 ############## ...

  5. wxpython中列表框(ListBox类)、复选列表框(CheckListBox)、下拉选项(Choice)、进度条(Gauge)、滑块(Slider)使用实例源码分享

    #coding=utf-8 import wx import time class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(s ...

  6. 时间选择器moment格式化存在时差问题

    时间选择器moment格式化存在时差问题解决方法: return moment(date).utc().zone(+6).format('YYYY-MM-DD')解决IE9时间选择器不能回显数据解决方 ...

  7. linux加大服务器文件描述符

    最简单的说,在 unix/liux 里面,你的服务只要开启一个进程,就要占用文件描述符的.liunx 默认 是 1024,如果描述符少了,你的访问量多了,你的服务器支撑不了,所以要把描述符加大. #e ...

  8. javaweb各种框架组合案例(八):springboot+mybatis-plus+restful

    一.介绍 1. springboot是spring项目的总结+整合 当我们搭smm,ssh,ssjdbc等组合框架时,各种配置不胜其烦,不仅是配置问题,在添加各种依赖时也是让人头疼,关键有些jar包之 ...

  9. springboot通过继承OncePerRequestFilter,在拦截器中@Autowired 为null问题

    springboot2版本以上环境 通过继承OncePerRequestFilter类,在重写doFilterInternal方法实现拦截的具体业务逻辑, 在实现的过程中,需要注入service方法, ...

  10. 查看ubuntu系统信息

    root@k8s001:~/go/src/k8s.io/kubernetes# cat /etc/*release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=16.04 DI ...