1.1 element ui 基本使用
参考网址: http://element.eleme.io/#/zh-CN/component/button
1、初始一个vue项目并安装element ui
vue init webpack-simple element-demo
cd element-demo
npm install
cnpm install element-ui -S
npm run dev
2、编辑main.js引入element ui (引入后就可以使用element中的样式了)
import Vue from 'vue' import ElementUI from 'element-ui'; // 引入element-ui import 'element-ui/lib/theme-chalk/index.css'; // element-ui的css样式要单独引入 import App from './App.vue' Vue.use(ElementUI); // 这种方式引入了ElementUI中所有的组件 new Vue({ el: '#app', render: h => h(App) })
3、在webpack.config.js中添加loader
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, // 添加加载字体字库的loader { test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/, loader: 'file-loader' }, ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-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 webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
4、在App.vue中使用element-ui
<template> <div id="app"> {{msg}} <!--图标--> <div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> <el-button type="primary" icon="el-icon-search">搜索</el-button> </el-row> </div> <!-- 日期选择器 --> <DatePicker></DatePicker> <!-- 文件上传 --> <Upload></Upload> </div> </template> <script> // 导入组件 import DatePicker from './components/DatePicker.vue' import Upload from './components/Upload.vue' export default { name: 'app', data () { return { msg: '测试msg' } }, components:{ DatePicker, Upload } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
5、在src中创建 components/DatePicker.vue 和 components/Upload.vue 两个组件
<template> <el-date-picker v-model="value" type="date" placeholder="选择日期" size="small" :picker-options="options"> </el-date-picker> </template> <script> export default { data(){ return { value:'', options:{ disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; }, firstDayOfWeek:1 } } } } </script>
<template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> <script> export default { data(){ return { fileList: [ { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' } ] } }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); } } } </script>