vue安装 element-ui

本文主要是介绍vue安装 element-ui，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

// 1.安装 @vue/cli-init
npm i -g @vue/cli-init

// 2. 创建vue项目
vue init webpack app2

// 3.安装element-ui
npm i elmentui -S

// 4. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。安装 babel-plugin-component
npm install babel-plugin-component -D

// 5.将 .babelrc 修改为
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// 6.安装es支持
npm install babel-preset-es2015 --save-dev

// 7.安装syntax-dynamic-import 插件

npm install babel-plugin-syntax-dynamic-import --save-dev

// 8.修改 webpack.base.conf.js 文件

   {
     test: /\.js$/,
     loader: 'babel-loader',
     options:{
          plugins:['syntax-dynamic-import']
     },
     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
   },

// 9. 在main.js引用

   import {Message} from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(Message);

这篇关于vue安装 element-ui的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！