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了

    原文作者:谢彪
    原文地址: https://segmentfault.com/a/1190000012080526
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞