Creating a basic webpack and import elementUI

Simple to use

First install vue environment, please see my other blog node.js installation and installation nrm module
vue Getting Started
with vscode open compressed folder
input npm run dev, you can start the service
of this project have hot update configuration, start the service time modify the code, as long as you can hold real-time updates to the page

will automatically open the page, button assembly is only one of elementUI

Getting hungry it's UI

What hungry UI official documents
such as selection box example on the official document you want to test in the project

can modify src / App.vue generals online file Copy the code corresponding to the template and a script
and then save (you need not start the service input in the terminal npm run dev)

code is modified App.vue
modifying only part of the template 2 and select the script data

<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
    <el-select v-model="value5" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-select
      v-model="value11"
      multiple
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value5: [],
        value11: []
      }
  }
}
</script>

<style>

</style>

How to install the frame (from 0 to start building the project)

Scaffolding installation vue cli

nrm use cnpm // 使用国内cnpm镜像
npm i vue-cli –g //安装vue-cli脚手架

Creating vue-cli project

vue init webpack-simple element-ui-form
// 会让你输入项目基础信息，可以直接回车取默认值

cd element-ui-form //进入新建的项目路径
npm I  // 安装依赖

After the installation is complete

npm run dev  // 运行项目

When this page description vue-cli installed successfully
Ctrl + c end of service

Installation element-ui

npm i element-ui –save 安装饿了么UI

Css-loader to install compatible css file

npm install style-loader css-loader --save-dev

In webpack.config.js configuration 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: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },    
      // {  
      //   test: /\.css$/,  
      //   loader: 'style-loader!css-loader'  
      // },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  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
    })
  ])
}

src / main.js introduced elementUI

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Modify src / app.vue
you can delete the unwanted code

<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

Enter npm run dev open the service in the terminal
appeared hungry UI Button component it is successfully installed