在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

關(guān)于Vue移動(dòng)端框架（Muse-UI）的使用（說明書，針對(duì)不愿看文檔的童鞋）

一、安裝

1、npm安裝

npm i muse-ui -S


或者

CDN安裝

<link rel="stylesheet" >
<script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>



2、字體安裝

<link rel="stylesheet" >



如果你想使用muse內(nèi)置的Roboto字體，這里可以選擇安裝

3、字體圖標(biāo)

<link rel="stylesheet" >



這里必須先引入圖標(biāo)，才可以顯示圖標(biāo)。
二、引入使用

1、完整

import Vue from 'vue';
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

Vue.use(MuseUI);

new Vue({
  el: '#app',
  render (h) {
    return h('mu-button', {}, 'Hello World');
  }
});



2、局部（推薦）

npm i babel-plugin-import less less-loader -D



然后在 在根目錄下找到.babelrc文件，修改如下：

{
  "plugins": [
    ["import", {
      "libraryName": "muse-ui",
      "libraryDirectory": "lib",
      "camel2DashComponentName": false
    }]
  ]
}



比如引入的是 Button 和 Select，接下來我們在main.js文件里加入以下代碼：

import Vue from 'vue';
import 'muse-ui/lib/styles/base.less';
import { Button, Select } from 'muse-ui';
import 'muse-ui/lib/styles/theme.less';

Vue.use(Button);
Vue.use(Select);



這是參考的全部組件表：

 Alert,
  AppBar,
  AutoComplete,
  Avatar,
  Badge,
  BottomNav,
  BottomSheet,
  Breadcrumbs,
  Button,
  Card,
  Checkbox,
  Chip,
  DateInput,
  DataTable,
  Dialog,
  Divider,
  Drawer,
  ExpansionPanel,
  Form,
  Grid,
  GridList,
  Helpers,
  Icon,
  List,
  LoadMore,
  Menu,
  Pagination,
  Paper,
  Picker,
  Popover,
  Progress,
  Radio,
  Select,
  SlidePicker,
  Slider,
  Snackbar,
  Stepper,
  SubHeader,
  Switch,
  Tabs,
  TextField,
  Tooltip,
  theme



這兩步做完你就開始寫你的代碼了

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路