06：（h5*）Vue第六天

正文

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

});