iview自定義配置
阿新 • • 發佈:2017-11-20
文件 rip emp val pla 體積 ast runtime ()
說明
iview是一套基於 Vue.js 的高質量 UI 組件庫。主要用戶PC端頁面設計。
官網:https://www.iviewui.com/
1、在vue-cli項目中,添加該框架
第一步,安裝
npm install iview --save
第二步 配置 在main.js中,配置如下
import iView from ‘iview‘; import ‘iview/dist/styles/iview.css‘; Vue.use(iView);
第三步 按需引用 安裝插件
npm install babel-plugin-import --save-dev
- 第四步 按需引用 配置.babel文件(好處不用我說,可以實現按需加載組件,減少文件體積)
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }
2、在項目中使用這個框架 然後重啟項目
<template> <div class="userIndex"> 這是首頁 <v-button>Default</v-button> <v-button type="primary">Primary</v-button> <v-button type="ghost">Ghost</v-button> <v-button type="dashed">Dashed</v-button> <v-button type="text">Text</v-button> <Slider v-model="value4" :step="10"></Slider> <Slider v-model="value5" :step="10" range></Slider> </div> </template> <script type="text/javascript"> import { Button ,Slider } from ‘iview‘; export default { data(){ return { value4:70, value5:10 } }, components:{ "v-button":Button,Slider } } </script>
iview自定義配置