element-ui按需引入
{
"name": "vue-test2",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.4.4"
},
"devDependencies": {
"axios": "^0.17.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-component": "^0.10.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^4.2.0",
"cross-env": "^5.0.5",
"crypto-js": "^3.1.9-1",
"css-loader": "^0.28.7",
"element-ui": "^2.0.2",
"file-loader": "^1.1.4",
"jquery": "^3.2.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"qs": "^6.5.1",
"style-loader": "^0.19.0",
"vue-awesome-swiper": "^2.6.7",
"vue-axios": "^2.0.2",
"vue-loader": "^13.0.5",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
用的vue-cli(webpack-simple)生成的项目,在引入element-ui(饿了么的vue UI框架)的时候,第一次用的完整引入,没有问题。
第二次尝试用按需引入,结果发现了问题:
vue-cli(webpack-simple)生成的项目没有.babelrc文件。按照官网的例子,是在.babelrc写入配置。那么,,我们是不是需要建立一个这样的文件呢?
其实是没必要的,babel是可以单独运行的,当我们在结合webpack用的时候,babel就是webpack里的一个loader:babel-loader,在webpack.config.js里找到处理js的babel-loader,然后这么写:
{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:[
'syntax-dynamic-import',
["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]
]
},
exclude: /node_modules/
},
注意,最新的webpack支持的是options,以前好像是query.'syntax-dynamic-import'是vue-router按需加载的,具体参见上篇博客,如果你没用到vue-router按需加载,可以不写。
因为我们用到了babel-loader的插件,我们这里要安装babel-plugin-component:
npm install babel-plugin-component --save-dev
好了,至此,按需引入element-ui就没问题了,而且我们没有再创建个.babelrc。
element-ui目前的版本是2.0.3。如果你翻开1.4.9的版本,他的配置中styleLibraryName是 "theme-default",如果配成这样,会报错:
Can't resolve 'element-ui/lib/theme-default/base.css'
很可惜,网上能搜到的大部分的博客代码还是以前的版本配置,所以,还是以官网为准啊
最后,用vue-cli(webpack-simple)生成项目是为了避免我们自己去搞一些麻烦的配置,但事实上,我们在做项目的过程中,不断引入新的东西(主要是新框架,新特性),发现有即使用了vue的脚手架工具,还是免不了配置,这也是没有办法的事情,希望多看看webpack的配置吧。
我目前用的的vue-cli(webpack-simple)webpack.config.js配置,贴出来给大家分享:
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './build/dist/js/'),//PRD
publicPath: 'dist/js/',//DEV
filename: 'build.js',
//filename:'[name].js',
chunkFilename:'chunkjs/[name].js'//拼接publicPath
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
use:[{
loader: 'babel-loader',
options:{
// presets:['es2015'],//生产环境需要用webpack.optimize.UglifyJsPlugin,写在这里不起作用,必须在.babelrc
plugins:[
'syntax-dynamic-import',
["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]
]
},
}],
exclude: /node_modules/
},
{
// test: /\.(png|jpg|gif|svg|TTF|ttf|woff)$/,
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
port: '8083',
disableHostCheck: true,
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
// devtool: '#eval-source-map'
devtool:'inline-source-map'
}; if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new CleanWebpackPlugin(['build']),
new webpack.DefinePlugin({
'process.env': '"prd"'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),//为vue做的变量,其实应该和上面的合并。
//由于webpack3.0以上把插件集合在webpack上,有点问题
new webpack.optimize.UglifyJsPlugin({
// sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),//webpock3 Scope Hoisting:作用域提升
//兼容老的loader
new webpack.LoaderOptionsPlugin({
minimize: true
}),
// new CopyWebpackPlugin([{
// from: './index.html',
// to:path.resolve(__dirname, './build/')//这样就可以不用修改任何东西,prd直接发build的东西了
// }]),
//废弃CopyWebpackPlugin的方式,用HtmlWebpackPlugin这个插件
new HtmlWebpackPlugin({
title:'rd平台',
template: './index.html', // 源模板文件
filename: '../../index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
showErrors: true,
inject: false,//不插入生成的 js 文件,只是单纯的生成一个 html 文件
hash: true
})
])
}else{
//开发环境
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': '"dev"'
})
])
}
最后还是没逃过.babelrc,因为webpack3把UglifyJs这个插件集成在webpack里了,不需要额外引入,但这样的话,在webpack.config.js里配置es6转码就没用了,就需要.babelrc文件了。
{
"presets": ["es2015"]
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小小英语版权所有 18621661956</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="小小英语版权所有 18621661956">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="./dist/js/build.js"></script>
</body>
</html>
跟他相配的package.json
{
"name": "vue-test2",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.4.4"
},
"devDependencies": {
"axios": "^0.17.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-component": "^0.10.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.2.0",
"cross-env": "^5.0.5",
"crypto-js": "^3.1.9-1",
"css-loader": "^0.28.7",
"element-ui": "^2.0.2",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.2.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"qs": "^6.5.1",
"style-loader": "^0.19.0",
"vue-awesome-swiper": "^2.6.7",
"vue-axios": "^2.0.2",
"vue-loader": "^13.0.5",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
主要是修改了5个地方:
1.vue-router按需加载(链接)
2.element-ui按需引入(本文)
3.加入process.env的全局变量,里面存了当前的开发环境(dev,prd.并没有test)
4.dev和prd的时候,index.html不变,打包都确保能访问
5.dev环境下webpack-dev-server在safari报错的情况(链接)
element-ui按需引入的更多相关文章
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- 针对elementUI 中InfiniteScroll按需引入的一点注意事项
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- UI组件--element-ui--全部引入和按需引入
主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样(我这是废话, 大家都知道...) 完整引入 在 main.js 中写入以 ...
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
随机推荐
- 清北学堂模拟赛d5t4 套路
分析:题目非常短,看起来非常难,其实把图一画就明白了.有向图,每个点的出度都是1,那么整个图肯定是环上套链,链上的边无论怎样反向都不会形成环,环上的边也可以随便反向,但是最终不能反为同向的,总方案数减 ...
- UVa - 11452 - Dancing the Cheeky-Cheeky
先上题目: F. Dancing the Cheeky-Cheeky Context The Cheeky-Cheeky is a new song. They dance it in Mula, ...
- 小记——GTMD校园网
前言 学校一年前开通了校园网,然鹅信号未覆盖我们住的公寓,又多忍受了一年的小破宽带(10M带宽,100块300个小时) 上个星期,架设了一年的校园网终于通了,然后我们发现——校园网69元一个月,一个用 ...
- 2015 测试赛 大神和小伙伴 hihoCoder
立方和公式和平方和公式.表示从来不记得这些公式... 每库礼物不同数量相同,总数=1+2+...+n=(n+1)*n/2 选取礼物的可能性的最大值为[(n+1)*n/2]^3 选取礼物价值重复两次的总 ...
- 一起talk C栗子吧(第七十七回:C语言实例--DIY ls命令续)
各位看官们,大家好.上一回中咱们说的是DIY cat命令的样例.这一回咱们说的样例是:DIY ls命令续. 闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前面的章回中DIY过ls命令.时间 ...
- CentOS出错You don't have permission to access on this server
检查http.conf发现没错之后.查找资料后发现时selinux的问题,所以须要关闭这个服务: 1 vi /etc/sysconfig/selinux 2 SELINUX=enforcing 改为 ...
- Java 获取随机日期
/** * 获取随机日期 * @param beginDate 起始日期 * @param endDate 结束日期 * @return */ public static Date randomDat ...
- luogu2331 [SCOI2005]最大子矩阵
题目大意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠.1≤n≤100,1≤m≤2,1≤k≤10. 思路 #include < ...
- 复习--最小生成树&&并查集
我个人比较喜欢Kruskal算法,所以就把这个方法写了一下,但过不了洛谷,70分. 思路是先全读入,再排序,一条一条加边.运用并查集. #include<iostream> #includ ...
- IJ-Error:常见错误
ylbtech-IJ-Error:常见错误 1.返回顶部 1. This application has no explicit mapping for /error, so you are seei ...