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とプラグインを導入する
element UIコンポーネントの単独使用(第一の方法):1、cnpm install babel-plugin-component-D 2、見つけました。babelrcプロファイル
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