Vue + element-ui

在Vue-cli生成的項目中使用 element-ui，按照官方的指導

npm i element-ui -D

執行以後，查看package.json，element-ui 加在了 "devDependencies"中，好像感受那裏不對，也跟官方的項目模板的package.json不一致，就刪了重來

npm uninstall element-ui
npm install element-ui --save

要想使用element-ui,按照官方的文檔，須要在main.js中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

在 webpack.base.conf.js 中的 module->loaders 塊中加入配置：

  module: {
    loaders: [
　　　　...
       {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
      },
　　　　...
    ]
  },

運行 npm run dev  發現沒有style-loader,須要安裝

npm install style-loader -save-dev

安裝好以後，運行npm run dev,報錯：

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/element-ui/lib/theme-default/index.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./../../../css-loader/index.js!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});
  8 | if(content.locals) module.exports = content.locals;

 @ ./~/element-ui/lib/theme-default/index.css 4:14-133 13:2-17:4 14:20-139

折騰了半天，搞不定，就不瞎折騰了，老老實實的在index.html加樣式和腳本引用

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

先使用CDN上的文件，等熟了以後再使用本地庫！

搞上面的這些東西，瞎折騰了半天時間！

 

2016年11月23日19:52:09 更新

悲催，使用腳本方式，Vue也須要用腳本方式使用

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

 

2016年11月24日17:30:47 更新

臨時解決方案，樣式文件直接在index.html引入：

<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-default/index.css">

腳本在main.js中導入：

import Element from 'element-ui';
Vue.use(Element);

暫時解決了問題。