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文件是在其他目录下的,原理一样。

  以上均为博主自己的学习过程,希望能给大家带来一定的指导作用,有用的还望大家点个支持,如果对你没用也望包含,有错误烦请指出,谢谢!

版权声明:本文为博主原创文章,未经博主允许不得转载。  

  

vue-cli完整地引入element-ui的更多相关文章

  1. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  2. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  3. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  4. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

  5. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  6. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  7. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  8. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  9. 在vue项目中快速使用element UI

    推荐使用npm安装 1.安装:npm install element-ui -S 2.整体引入: 在你项目的main.js中写入: import ElementUI from 'element-ui' ...

  10. 怎么样在vue-cli的项目里面引入element ui

    第一步:先进入到项目里面 npm i element-ui -S 第二步: import Vue from 'vue'; import ElementUI from 'element-ui'; //这 ...

随机推荐

  1. JavaScript闭包基本概念

    闭包的概念 维基百科中是这么解释闭包的: 计算机科学中,闭包(也称为词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起.这个函数环境是一个存储该函数每个非局部变量(也叫自由变量)的 ...

  2. NFV、DPDK以及部分用户态协议研究

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 对我而言,这是一个新的领域,很有意思. 一.解释名词: NFV(Network Functio ...

  3. windos10安装mongodb并配置

    想了想还是把这个写上吧,毕竟网上的教程有不少坑的. 首先下载mongodb,如果你嫌官网慢,那么你可以去我的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX 密码:v3 ...

  4. 前端模块化:RequireJS(转)

    前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果 ...

  5. boost::algorithm(字符串算法库)

    没什么说的,需要 #include<boost/algorithm/string.hpp> 1.大小写转换 std::string s("test string"); ...

  6. ArcGIS 网络分析[2.4] OD成本矩阵

    什么是OD成本矩阵? 先不说这个东西是什么,我们还是举一个实际的例子: 现在存在3个城市北京.上海.武汉,请分析他们两两之间的通行时间. 很简单嘛!北京到上海,北京到武汉,上海到武汉都来一次最短路径分 ...

  7. vi 和vim 的区别

    它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面.vim的这些优势主要体现在以下几个方面:1.多级撤消我们知道在vi里,按 u只能撤消上次命 ...

  8. 解决 mysql 中文乱码

    mysql版本:5.6.38 虽然创建实例时选择的是utf-8的utf8_general_ci,但是用其他程序保存中文时依旧出现乱码的情况. 记录一种可行的解决方案,即修改数据库的字符集. 由于该环境 ...

  9. Q:javax.comm 2.0 windows下Eclipse的配置

    @转自http://blog.csdn.net/zhuanghe_xing/article/details/7523744处 要在Windows下,对计算机的串口或并口等进行编程,可以选择使用Java ...

  10. [总结]-2018 w1

    不想总结 2017,过去的就过去吧,不过自己在 2017 年还是收获了很多,最重要的就是赚钱.赚钱还是需要两把刷子,所以,2018 的小目标就是学习数据分析和机器学习.希望自己在这两个领域能搞点事情. ...