[聚合文章] vue+elementUI部分引入组件

因为最近公司开发一个很小的后台项目，所以考虑部分引入element的组件，因为第一次单独引入没有经验，网上看了很多都有这样那样的问题，个人感觉官网也没把我说明白（也许自己水平太低了），所以自己研究了一下亲测有效，如有错误欢迎指出。

1. 安装vue-cli
   npm install -g vue-cli

2. 创建项目projectName是你项目的名字
   npm install webpack projectName

3. 进入项目目录
   cd projectName

4. 初始化项目安装依赖
   npm install

5. 安装elementui
   npm install element-ui --save -dev

6. 首先确定项目是否有style-loader和babel-plugin-component 若没有npm一个
   npm install xxx --save -dev

7. 简单粗暴点，找到.babelrc 把原文件内容全部删除，粘贴下面代码

      { "presets": [["env", {
                    "modules": false,
                    "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
                  }],
                  "stage-2"],
        "plugins": [
                    "transform-runtime",
                    ["component",[
                    {
                      "libraryName":"element-ui",
                      "styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
                    }
                    ]]
                    ],
        "comments":false,            
        "env": {
          "test": {
            "presets": ["env", "stage-2"],
            "plugins": ["istanbul"]
          }
        }
      }
      

   8.在webpack.base.conf.js加入下面一句

   {
      test: /\.css$/,
      loader: 'style-loader'
   },
   

   9.在mian.js中引入

      import { Button,Input } from 'element-ui'
      Vue.use(Button)
      Vue.use(Input)

   10.然后就可以使用Button和Input了

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。