VUE 起步

前后端分离，VUE项目入手推荐https://github.com/ElementUI/element-starter，不用重头配置。

1. 克隆到本地

 git clone https://github.com/ElementUI/element-starter.git

2. 安装依赖包

yarn   # 或者 npm install

3. 本地调试

npm run dev

4. build

npm run build

• 部署成功后截图
  
• 工程目录
  
• 配置文件 webpack.config.js
• vue项目入口

  entry: {
    vendor: './src/vendor',
    index: './src/main.js'
  },

• 项目build输出路径

  output: {
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]',
    publicPath: options.dev ? '/assets/' : publicPath
  },

• 服务端口配置

  devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

• main.js文件

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)
})

• App.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>