Vue-——UI组件库使用

本是古典 何须时尚 2024-04-06 12:04 174阅读 0赞

目录

一、常用组件库

1.移动端常用UI组件库

2.PC端常用UI组件库

二、以Element UI （饿了么为例）

三、Element-UI 按需引入 （关心引入组件、注册组件，比较推荐）

3.1安装

3.2修改babel.comfig.js

3.3按需引入组件

3.4注册组件

3.5引入样式

一、常用组件库

1.移动端常用UI组件库

  1. Vant https://youzan.github.io/vant

2.Cube UI https://didi.github.io/cube-ui

3.Mint UI http://mint-ui.github.io

2.PC端常用UI组件库

1.Element UI https://element.eleme.cn

2.IView UI https://www.iviewui.com

二、以Element UI （饿了么为例）

安装

  1. npm i element-ui

在main.js文件中添加下面三行代码

  1. //引入ElementUI组件库
  2. import ElementUI from 'element-ui';
  3. //引入ElementUI全部样式
  4. import 'element-ui/lib/theme-chalk/index.css';
  5. //应用ElementUI
  6. Vue.use(ElementUI);

使用

将下面的代码复制

33a0073b5a544de99fd7f786bc8fc667.png

  1. <template>
  2.  <div>
  3.   <button>原生按钮</button>
  4.   <input type="text">
  5.   <el-row>
  6.       <el-button >默认按钮</el-button>
  7.       <el-button type="primary" >主要按钮</el-button>
  8.       <el-button type="success" >成功按钮</el-button>
  9.       <el-button type="info" >信息按钮</el-button>
  10.       <el-button type="warning" >警告按钮</el-button>
  11.       <el-button type="danger" >危险按钮</el-button>
  12.     </el-row>
  14.     <el-date-picker
  15.       v-model="value1"
  16.       type="datetime"
  17.       placeholder="选择日期时间">
  18.     </el-date-picker>
  19.  </div>
  20. </template>
  22. <script>0
  26.     export default{
  27.     name: "App",
  29. }
  30. </script>
  33. <style>
  35. </style>

ff4e35d00f94438e8043944b8f3441da.png

#

三、Element-UI 按需引入 （关心引入组件、注册组件，比较推荐）

在我们上面引入组件的时候，是将组件全部引入，但是这些组件我们不会全部使用，所以上面的做法还是有一些坏处的，下面我们就来改进一下

下面的这几段代码直接删除！！！不留！！！

38ca052310d74c5faaf65e1d9020afca.png

" class="reference-link">3.1安装798de51a96fc461f8eea221c5ad77b23.png

3.2修改babel.comfig.js

  1. module.exports = {
  2.   // 预设
  3.   presets: [
  4.     // 解析vue相关js的
  5.     '@vue/cli-plugin-babel/preset',
  6.     ["@babel/preset-env", { "modules": false }],
  8.   ],
  9.   "plugins": [
  10.     [
  11.       "component",
  12.       {
  13.         "libraryName": "element-ui",
  14.         "styleLibraryName": "theme-chalk"
  15.       }
  16.     ]
  17.   ]
  18. }

3.3按需引入组件

  1. import { Button,DatePicker} from 'element-ui';

3.4注册组件

  1. Vue.component(el-button , Button);
  2. Vue.component(el-date-picker, DatePicker);

3.5引入样式

如果babel.comfig.js文件按照他们的要求写了，样式他们会自己分析，我们不用担心

d8630d3fc2044dd09a3b66c15d84a293.png

发表评论

表情：
评论列表 （有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读