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. Python 项目实践二(生成数据)第一篇

    上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...

  2. springboot 入门七-静态资源处理

    Spring Boot 默认配置的/**映射到/static(或/public ,/META-INF/resources),/webjars/**会映射到classpath:/META-INF/res ...

  3. sqlserver 存储过程 分页搜索查询

    具体调用实例见代码最后一行注释区域 --if exists(select * from sysobjects where id = object_id(N'page_search') and type ...

  4. 迷宫问题 Maze 4X4 (sloved by backtrack)

    Description 给定一个N*N的迷宫中,(0,0)为起始点,(N-1,N-1)为目的地,求可通往目的地的多个解 思路 这道题其实就是简单的DFS,一路探索到底,没路就回溯到交叉口. #incl ...

  5. http中的get和post(一)

    GET和POST有什么区别?及为什么网上的多数答案都是错的. 如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用 ...

  6. [array] leetcode - 53. Maximum Subarray - Easy

    leetcode - 53. Maximum Subarray - Easy descrition Find the contiguous subarray within an array (cont ...

  7. Find the Maximum sum

    Given an array of n elements.Find the maximum sum when the array elements will be arranged in such w ...

  8. bzoj 3142: [Hnoi2013]数列

    Description 小T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察到:除第一天外每天的股价都比前 ...

  9. Locust no-web 模式与参数详解

    读前参考:<性能测试工具Locust > 熟悉 Apache ab 工具的同学都知道,它是没有界面的,通过命令行执行. Locust 同样也提供的命令行运行,好处就是更节省客户端资源. 命 ...

  10. CSS3媒体查询(Media Queries)介绍

    媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) ...