vue-cli完整地引入element-ui

vue

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 的全部内容, 来源链接: utcz.com/z/374962.html

回到顶部