import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
import App from './App.vue'Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
})

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: /\.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]'}},{test:/\.css$/,loader:'style-loader!css-loader'//加载elment ui的style和css},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'},{test:/\.less$/,loader:'less-loader'}]},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}},devServer: {historyApiFallback: true,noInfo: 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.htmlmodule.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})])
}

<template><div id="app">{{msg}}<br><!-- 按钮 --><el-button type="primary">我的按钮</el-button><el-button type="danger">我的按钮</el-button><el-button type="info">我的按钮</el-button><el-button type="warning">我的按钮</el-button><el-button type="success">我的按钮</el-button><br><br><el-button type="success" icon="edit">编辑</el-button><el-button type="success" icon="search">搜索</el-button><el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button><hr><br><!-- 图标 --><i class="el-icon-close"></i><i class="el-icon-delete"></i><i class="el-icon-loading"></i><hr><!-- 布局 --><el-row><el-col :span="6" class="grid">welcome</el-col><el-col :span="6" class="grid">to</el-col><el-col :span="6" class="grid">itany</el-col><el-col :span="6" class="grid">网博</el-col></el-row><el-row><el-col :span="12" class="grid">welcome</el-col><el-col :span="12" class="grid">to</el-col></el-row><hr><!-- 日期选择器 --><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: '欢迎来到南京网博'}},components:{//注册自己引入的组件DatePicker,Upload}
}
</script><style lang="less"> /* 必须要指定lang="less" */.grid{border:1px solid #ccc;font-size:20px;color:@color;.h(50px);}@color:red;.h(@height){height:@height;}
</style>

<template><el-date-pickerv-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-uploadclass="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>

 "plugins": [["component", [{"libraryName": "element-ui","styleLibraryName": "theme-default"}]]]