Element的安装以及基本使用

Element是基于Vue的网站组件库,用于快捷构建网页

Element的安装以及基本使用_第1张图片

像上面这样的样式

官网地址

Element - 网站快速成型工具

安装 

npm i element-ui -S

Element的安装以及基本使用_第2张图片

装包命令

 npm install babel-plugin-component -D

Element的安装以及基本使用_第3张图片

安装好之后会在package.json里面显示版本

Element的安装以及基本使用_第4张图片

在node_modules中会自动初始化一个 element-ui文件夹 ,所有安装的源文件都在这里

Element的安装以及基本使用_第5张图片

引入

Element的安装以及基本使用_第6张图片

然后在官网复制一些样式,运行一下

        默认按钮

        主要按钮

        成功按钮

        信息按钮

        警告按钮

        危险按钮

Element的安装以及基本使用_第7张图片

Element的安装以及基本使用_第8张图片

App.vue


报错

如果出现这个错误

Element的安装以及基本使用_第9张图片

在babel.config.js里面修改代码(直接复制就OK)

module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset',

    ["@babel/preset-env", { "modules": false }]

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

运行 

然后重新运行就好了

Element的安装以及基本使用_第10张图片

Element的安装以及基本使用_第11张图片

你可能感兴趣的:(工具,Vue,vue.js,前端,elementui)