vue踩坑之旅(1) vue2.0 脚手架cli4.5 element ui 按需引入 没有.babelrc 文件啊

导言：容我吐槽一下，我%#&￥……￥#@（）*&*&……&&￥@#@(人类不曾拥有的情绪波动，像极了羊驼)

言归正传，还是好好总结一下问题，生活得继续，我要放宽心啊！

vue项目搭建我就不赘述了...

问题1，一般写法 引入 vue

import Vue from 'vue';

应该没问题吧，然后...

解决：修改后写法

import Vue from 'vue/dist/vue.min.js';

问题2，接下来按需引入element ui

第一步，执行命令

npm install babel-plugin-component  --save

第二步，根目录添加文件 plugins 里面放 element ui，按官方推荐 找一个叫 .babelrc 文件 添加以下代码 略作修改

{
  "presets": [
    ["env", { "modules": false }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],"transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

嗯，应该就没问题了，然后 我擦 我的 .babelrc 文件呢？ 我的build文件呢？难道我项目搭建错了，接下来我愚蠢的又建了一遍 输入指令时 我草 我用的是 cli4.5 指令时 vue create objectname！ 接下来就是问问度娘怎么办？两千年后....没然后了

大概卡了两个小时 怎么搞？

终于找到了一个叫babel.config.js 的文件 查了下这个文件是干嘛的，哦 ！ 它有编译和配置作用，好了 将原本放.babelrc 文件放在这个里面应该可行！

然后...不出意外，各种报错，排错一小时后，问了下度年的意见，总结了以下办法：

解决方法：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins:[
    [
      "component",
      {
        "libraryName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

应该没问题了，然后 element ui css样式不起作用，oh，my god！

问题三：

错误写法：plugins 文件下 element.js 

import Vue from 'vue';
import {
    Carousel,
    CarouselItem,
    Button
} from 'element-ui';
// 按需引入
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Button);

然后....左瞅瞅 又看看，不报错啊！

这时 我想打开我的脑子...

正确写法：

import Vue from 'vue/dist/vue.min.js';
import {
    Carousel,
    CarouselItem,
    Button
} from 'element-ui';
// 按需引入
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Button);

 

完美了  运行成功！