vue-cli完整地引入element-ui

1. 因為該組件會依賴於jQuery，所以先安裝jQuery所需依賴：

　　進入npm控制台，輸入指令：

　　cnpm install jquery --save-dev

 

　　然后在入口文件main.js中引入：

　import jquery from 'jquery'

 

　　最后配置build目錄下的webpack.base.config.js文件，在

　module.exports = {

　　　　　　entry: {
　　　　　　app: './src/main.js',
　　　　},

 

　　后面添加以下內容：　　

plugins: [
　　　　　　new webpack.ProvidePlugin({
　　　　　　$: "jquery",
　　　　　　jQuery: "jquery",
　　　　　　"windows.jQuery": "jquery"
　　　　　　})
　　　　]

 

　　注意前后用逗號分隔。

2. 安裝element-ui的依賴：

　　進入npm控制台，輸入指令：

 

cnpm install element-ui --save-dev

 

3. 配置build目錄下的webpack.base.config.js文件，向文件中加入以下內容：

　var webpack = require('webpack')　

　　resolve: {
　　　　extensions: ['.js', '.vue', '.json'],

　　　　alias: {
　　　　　　'vue$': 'vue/dist/vue.esm.js',
　　　　　　'@': resolve('src'),
　　　　　　'assets': path.resolve(__dirname, '../src/assets'),
　　　　　　'scss_vars':'@/styles/vars.scss',
　　　　　　jquery: "jquery/src/jquery"

　　　　}

　　}

 

4. 在入口文件main.js中引入element-ui：

import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)

 

到此，基本完成了所有配置工作。但是，部分人可能還是會存在模板無法找到的問題（我安裝時就遇到了），在花了整整一天時間嘗試后找到了解決辦法：

　　在build文件下的webpack.base.conf.js中加上下面的代碼即可

　{ 　　　　　　test: /\.css$/, 　　　　　　include: [ 　　　　　　　　 /src/,//表示在src目錄下的css需要編譯 

　　　　　　　　'/node_modules/element-ui/lib/'   //增加此項 
 　　　　　　 ], 　　　　　　 loader: 'style-loader!css-loader' 　　　　}, 

　　另外說明下假如你的css文件是在src目錄下的話就添加src的路徑，如上圖，element-ui或者mint-ui(minit-ui的我沒試過，個人認為也要加上去webpack才能查找到)，假如你的css文件是在其他目錄下的，原理一樣。

 

　　以上就是博主為大家介紹的這一板塊的主要內容，這都是博主自己的學習過程，希望能給大家帶來一定的指導作用，有用的還望大家點個支持，如果對你沒用也望包涵，有錯誤煩請指出。如有期待可關注博主以第一時間獲取更新哦，謝謝！

 

版權聲明：本文為博主原創文章，未經博主允許不得轉載。