vue+elementUI+router+source安装到发布

vue个人感觉，带来的方便如下3点：路由，数据绑定，组件化界面
详细移步官网：https://cn.vuejs.org/v2/guide/index.html

开发前，先引入vue，并在vue中加入elementUI
具体如下：

1.安装并且会使用node.js 和 npm
用淘宝镜像代替npm，下载资源更方便

2。npm install -g cnpm –registry= https://registry.npm.taobao.org
后面 则可以用cnpm 代替npm

3.安装webpack
cnpm install webpack -g

4.安装脚手架
npm install vue-cli -g

5.随便找个文件夹作为工程存放目录，cmd打开

6.建立文档，按着提示操作即可
vue init webpack-simple

7.安装项目依赖
cnpm install

8.安装vue-vouter和vue-resource，路由和网络请求得依赖
cnpm install vue-router vue-resource –save

9配置elementUI，官网有具体安装流程
cnpm i element-ui -S
然后在main.js中引入，router和source也一起引入，如果element引用失败，注意下lib后面的子路径名称
import ‘element-ui/lib/theme-chalk/index.css’;并进行相应替换

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

10运行项目：
cnpm run dev
11打包,项目readme.md有指出具体命令

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

主类转发即可得到相应页面

@RestController
public class MainController {

    @RequestMapping("/")
    public void main(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.sendRedirect(request.getServletContext().getContextPath()+"/module/index.html");
    }

}

1.使用elementUI

<template>
  <div class="demo-input-size">
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      input6: '',
      input7: '',
      input8: '',
      input9: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

使用router：首先加入路由：

App.Vue:

<template>
  <div id="app">
    <div class="nav-list">
      <router-link class="nav-item" to="/">首页</router-link>
      <router-link class="nav-item" to="/1">页面一</router-link>
      <router-link class="nav-item" to="/2">页面二</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'zzzzzzH',
      options: [
        {text: 'One', value: 'A'},
        {text: 'Two', value: 'B'},
        {text: 'Three', value: 'C'}
      ],
      newTodoText: '',
      url: 'https://www.baidu.com/',
      total: 0,
      messages: []
    }
  },
  computed: {
    now: function () {
      return Date.now()
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    msg: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      console.log(this.msg)
    }
  },
  methods: {
    gg () {
      this.msg = this.msg.split('').reverse().join('')
    }
  }

}
</script>

点击即可看到相应的跳转，也支持带参数传递。子组件使用方法类似。

3.网络请求：由于前后台分离，端口不一样，要用proxy进行相应配置，解决跨域问题
新建一个config文件进行配置目的接口域名，随后在index.js中引用，完成proxyTable的配置

点击跳转按钮即可完成跳转

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
    <el-button @click="clickText">click me</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    clickText () {
      console.log('haha')
      this.$http.get('/module/modules')
        .then(function (res) {
          console.log('haha1')
          console.log(res.data)
        })
    }
  }
}
</script>

访问后在chrom调试模式即可看到访问成功的输出：

自己跟着vue官网教程代码敲了一些：

<template>
  <div  v-bind:style="styleObject">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>

      <div id="app">
        <img src="./assets/logo.png"/>

        <div class="hello">
          <h1>{{ msg }}</h1>
          <h2>Essential Links</h2>
          <el-button>默认按钮</el-button>
          <el-button type="primary">主要按钮</el-button>
          <el-button type="text">文字按钮</el-button>
        </div>

        <el-button v-bind:title="msg">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </el-button>
        <el-botton v-if="seen">现在你看到我了</el-botton>
      </div>
    </el-row>

    <el-row>
      <el-button v-model="msg" @click="gg">hahah</el-button>

    </el-row>
    <el-input v-model="msg" size="medium" clearable>enter</el-input>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
    <!-- 完整语法 -->
    <a v-bind:href="url">现在你看到我了GGGG</a>

    <!-- 缩写 -->

    <!-- 完整语法 -->
    <a v-on:click="doSomething">..hghahahh.</a>

    <!-- 缩写 -->
    <a @click="doSomething">.ahahfhfgfahah..</a>

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    <div v-if="msg === 'A'">
      AAAAAAAA
    </div>
    <div v-else-if="msg === 'B'">
      BBBBBBBB
    </div>
    <div v-else-if="msg === 'C'">
      CCCCCCCC
    </div>
    <div v-else>
      Not A/B/C
    </div>
    <el-ol>
      <el-table-column v-for="(items,index) in list">
        {{items.text}}--{{index}}
      </el-table-column>
    </el-ol>
    <el-table-column v-for="(valueq) in list">
      <div v-for="(value, key) in valueq">
        {{ key }}: {{ value }}
      </div>
    </el-table-column>

    <div >
      <input
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
      >
      <ul>
        <li
          is="todo-itema"
          v-for="(todo, index) in todoss"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todoss.splice(index, 1)"
        ></li>
      </ul>
    </div>
    <child message="hello!">dfafaf</child>
    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>

    <el-select v-model="selected">
      <el-option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </el-option>
    </el-select>
    <span>Selected: {{ selected }}</span>

    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    <div id="message-event-example" class="demo">
      <p v-for="msg in messages">{{ msg }}</p>
      <button-message v-on:message="handleMessage"></button-message>
    </div>

    <input v-model="input" placeholder="请输入内容" width="10"></input>
    <hehe1></hehe1>

    <div class="nav-list">
      <router-link class="nav-item" to="/">首页</router-link>
      <router-link class="nav-item" to="/first">页面一</router-link>
      <router-link class="nav-item" to="/second">页面二</router-link>
    </div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>

    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>

    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>

    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>//引入外部vue
import he from './components/hehe'
  export default {
    data () {
      return {
        msg: 'zzzzzzH',
        seen: false,
        answer: '',
        selected: '',
        routeUrl: '/jumpUrl',
        list: [
          {id: 0, text: '蔬dg菜'},
          {id: 1, text: '奶ggg酪'},
          {id: 2, text: '随便其它什么人吃的东西'}
        ],
        styleObject: {
          color: 'blue',
          fontSize: '13px'
        },
        todos: [
          {text: '学习 JavaScript'},
          {text: '学习 Vue'},
          {text: '整个牛项目'}
        ],
        groceryList: [
          {id: 0, text: '蔬菜'},
          {id: 1, text: '奶酪'},
          {id: 2, text: '随便其它什么人吃的东西'}
        ],
        todoss: [
          {
            id: 1,
            title: 'Do the dishes'
          },
          {
            id: 2,
            title: 'Take out the trash'
          },
          {
            id: 3,
            title: 'Mow the lawn'
          }
        ],
        options: [
          {text: 'One', value: 'A'},
          {text: 'Two', value: 'B'},
          {text: 'Three', value: 'C'}
        ],
        nextTodoId: 4,
        newTodoText: '',
        url: 'https://www.baidu.com/',
        total: 0,
        messages: []
      }
    },
    computed: {
      now: function () {
        return Date.now()
      },
      addNewTodo: function () {
        this.todoss.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
        return null;
      }
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      msg: function (newQuestion, oldQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        console.log(this.msg)
      }
    },
    methods: {
      gg () {
        this.msg = this.msg.split('').reverse().join('')
      },
      doSomething() {
        console.log('ggegee')
      },
      incrementTotal: function (msg, GG, ggg) {
        this.total += 1
        console.log(msg + GG + ggg + ' RR')
      },
      handleMessage: function (payload) {
        this.messages.push(payload.message)
      }
    },
    components: {
      'hehe1': he,
      'todo-item': {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
      },
      'todo-itema': {
        props: ['title'],
        template: '<li>{{ title }}  <button v-on:click="$emit(\'remove\')">X</button></li>'
      },
      'child': {
        props: ['message'],
        // 就像 data 一样，prop 也可以在模板中使用
        // 同样也可以在 vm 实例中通过 this.message 来使用
        template: '<li>{{ message }}</li>'
      },
      'button-counter': {
        template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
        data: function () {
          return {
            counter: 0
          }
        },
        methods: {
          incrementCounter: function () {
            this.counter += 1
            console.log('s123')
            this.$emit('increment', '123', 'PARAM2', {'ID': 'G', 'id2': 'ggg'})
          }
        }
      },
      'button-message': {template: `<div>
    <el-input type="text" v-model="message" />
    <el-button v-on:click="handleSendMessage">Send</el-button>
  </div>`,
        data: function () {
          return {message: 'test message'
          }
        },
        methods: {handleSendMessage: function () { this.$emit('message', { message: this.message })
          }}}
    },
    router: {
      routes: [
        {
          path: '/jumpUrl',
          component: 'secondcomponent'
        }
      ]
    }
  }
</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;
  }
  .el-row {
    margin-bottom: 20px ;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>