vue-cli完整地引入element-ui
2018-03-26 10:22
736 查看
这一批博文是博主由博客园搬移过来的,所以时间上可能存在混乱,希望大家见谅!
1. 因为该组件会依赖于jQuery,所以先安装jQuery所需依赖:
进入npm控制台,输入指令:
2. 安装element-ui的依赖:
进入npm控制台,输入指令:
在build文件下的webpack.base.conf.js中加上下面的代码即可
以上就是博主为大家介绍的这一板块的主要内容,这都是博主自己的学习过程,希望能给大家带来一定的指导作用,有用的还望大家点个支持,如果对你没用也望包涵,有错误烦请指出。如有期待可关注博主以第一时间获取更新哦,谢谢!
版权声明:本文为博主原创文章,未经博主允许不得转载。
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-dev3. 配置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
- vue-cli快速构建工程 ElementUI axios router 引入使用
- 使用 vue-cli + element-ui 快速搭建项目
- vue全家桶+element-UI搭建后台管理系统(1)“:构建项目并引入element-ui”
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
- vue引入element-ui 2.0 后报错问题解决措施
- vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table,treeTable
- vue 2.0项目中如何引入element-ui详解
- 【vue】vue项目引入 Element-UI
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- vue-cli中引入element
- 在vue中如何引入element-ui
- vue踩坑_cli_环境搭建,jquery,$http请求配置以及element组件引入
- vue-cli 引入element(饿了吗)组件库
- vue全家桶+element-UI搭建后台管理系统(2)“:引入基本样式和图标库”
- vue中Element-ui引入
- EasyDSS高性能流媒体服务器前端重构(三): webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 利用vue+elementUI实现部分引入组件的方法详解
- 解决vue-cli element-ui打包报错Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js