Vue Element Ui+Mint UIフレーム

2103 ワード

お腹が空きましたか?会社はvueで開かれたvueのUiコンポーネントライブラリElement Uiに基づいてvue pc端のUIフレームワークに基づいています。http://element.eleme.io/ MintUiはvue移動端のuiフレームに基づいている。
element UIの使用:1.公式サイトを探しています。http://element.eleme.io/#/zh-CN/component/quickstart 2.cnpm i element-ui-S表示をインストールする--save 3.element UIのcssとプラグインを導入する
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4、*webpack.co nfig.js配置file_loaderhttp://element.eleme.io/1.4/#/zh-CN/component/quickstart
{
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'file-loader'
 }
5.ドキュメントを見てそのまま使う。
element UIコンポーネントの単独使用(第一の方法):1、cnpm install babel-plugin-component-D 2、見つけました。babelrcプロファイル
{
 "presets": [
    ["env", { "modules": false }],
    "stage-3"
    ]
}
注意に変える:
{
    "presets": [["env", { "modules": false }]],
    "plugins": [
       ["component",
        {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
           }
       ]
    ]
}
3、main.jsに導入する
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
element UIコンポーネントの単独使用(第二の方法):1、mian.jsに導入する。
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
2.対応するcssを導入する
import 'element-ui/lib/theme-chalk/index.css';
エラーが発生した場合:webpack.co nfig.js配置file_loader
 {
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'file-loader'
}
MintUi mintUIの使用:1.公式サイトを探しています。http://mint-ui.github.io/#!/n 2.npm install mint-ui-S表示をインストールする--save 3.mint Uiのcssとプラグインを導入する
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
4.ドキュメントを見てそのまま使う。mintUiコンポーネント上でイベントの書き方@click.nativeを実行します。
     action sheet