vue template 代码 <a target="_blank" rel="noopener noreferrer nofollow" href="https:

<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubuserco

/webpack.config.js <div class="highlight highligh

照着 demo 弄不出效果 about element HOT 4 CLOSED

elemefe commented on April 26, 2024

照着 demo 弄不出效果

from element.

Comments (4)

QingWei-Li commented on April 26, 2024

https://codepen.io/QingWei-Li/pen/ozYpNA

你看我复制粘贴的都搞出来了

from element.

15697289437 commented on April 26, 2024

from element.

15697289437 commented on April 26, 2024

/webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
  entry: {
    app: './src/main.js',
    vendors:['vue','vue-router','element-ui']
  },
  output: {
    path: './build',
    publicPath: '/build/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue' },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")   },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png)\w*/,
        loader: 'file'
      },
      { test: /\.less$/, loader: ExtractTextPlugin.extract("css-loader","less-loader") },

    ]
  },
  plugins: [new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new ExtractTextPlugin("styles.css")],
  devtool: '#source-map'
}

/src/main.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
Vue.config.debug = process.env.NODE_ENV !== 'production'
import app from './app.vue'
const App = new Vue({
  el: 'body',
  components: {
    app
  }
})

/src/app.vue

<template>
  <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">立即创建</el-button>
      <el-button @click.native.prevent>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="description" content="title">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="./build/styles.css">
  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <app></app>
    <script src="./build/vendors.js"></script>
    <script src="./build/bundle.js"></script>
  </body>
</html>