书接上回,上次介绍了Vue通用后台管理项目实战的前期准备工作,包括创建项目技术展示,包管理工具介绍以及vue-cli脚手架初始化项目,今天将element-ui框架在网页中的使用,以及element-ui结合脚手架全部导入和按需导入
1、element-ui在网页中使用
element-ui是饿了么旗下推出的一个ui框架
官方网址:Element - The world's most popular Vue UI framework
ui框架主要是能够快速生成界面样式和布局
在element官网有一个hello world示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
可以尝试运行这个element基本示例,将上述复制到index.html中
运行发现没有出现hello world并且报错了,通过报错可以知道是脚本中引入的资源有问题
下面介绍一个工具网站cdnjs,这个网站能够快速找到vue依赖的正确网址
官网地址:https://cdnjs.com/
https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js
替换后运行成功:
注意:也可以将在浏览器查找上述链接,然后将内容复制到本地创建的vue.js文件中
到这里element-ui的第一个实例就运行成功了
element-ui中提供的其他样式,都可以复制代码,快速实现:
2、element-ui结合脚手架全部引入
执行下面命令进行element-ui安装
npm i element-ui -S
安装后:
下面介绍如何在项目中引入element-ui
import Vue from 'vue';
// 关键是下面两行代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
// 全局注入 写了这个就可以在项目中写element中的标签
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
在项目的main.js中进行import和use
在App.vue文件中可以随便从element官网中提供的组件代码进行复制:
效果:
3、element-ui结合脚手架按需引入
按需引入,需要借助插件 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc (在cli构建的项目中是babel.config.js)添加:
{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
从上面可以看到实际上按需导入的方式相较于全局导入的方式更加,麻烦,那么我们为什么还要按需导入呢?
因为按需导入能够使得我们最后打包的项目体积更小
使用npm run build 命令能够对项目进行打包,执行命令之后,在我们的项目中会出现dist文件夹,最后部署在线上的项目实际上是我们打包之后的项目
今天的内容就到这里,明天将继续更新本次的Vue通用后台管理项目实战的笔记