vue学习

新建vue项目vue init webpack test

进入项目文件夹cd test

安装项目扩展npm install

启动项目npm run dev

编译项目,复制编译后的dist文件夹到tomcat目录下就可以运行 npm run build

在开发过程中使用vue-router在页面或控件中跳转,vuex保存全局变量,axios获取后台数据,element-ui做界面

安装npm install vue-router vuex axios element-ui -s

使用:

1,main.js

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 vuex from 'vuex'
import axios from 'axios'
import store from './store'

Vue.use(ElementUI)
Vue.use(vuex)
Vue.config.productionTip = false
Vue.prototype.axios=axios

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

2,router->index.js 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyComp from '@/components/MyComp'
import Login from '../views/Login'
import Main from '../views/Main'
import NoFound from '../views/NoFound'



Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Main',
      name: 'Main',
      component: Main,
      children:[
        {
          path: '/HelloWorld',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/MyComp',
          name: 'MyComp',
          component: MyComp
        }
      ]
    },
    {
      path: '*',
      component: NoFound
    },
  ]
})

3,store->index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        name:''
    },
    mutations:{
        changeName:(state,params)=>{
            state.name=params
        }
    }
})

4,views->login.vue

<template>
    <div class="login">
        请输入登录信息
        <el-form ref="form" :model="form">
            <el-form-item label="帐号"><el-input v-model="form.name"></el-input></el-form-item>
            <el-form-item label="密码"><el-input v-model="form.password" type="password"></el-input></el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          name: '',
          password: ''
        }
      }
    },
    methods: {
      onSubmit() {
        this.$store.commit("changeName", this.form.name);
        this.$router.push("/Main");
      }
    }
  }

  </script>
  
  <style>
    .login{
        width: 300px;
        margin: 150px auto;
        border: 1px solid #ddd;
        padding: 10px;
        box-shadow:2px cadetblue;
    }

  </style>
  

5,views->main.vue

<template>
    <div class="main">
        <el-container>
            <el-header>头</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu >
                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1"><router-link to="/MyComp">首页</router-link></el-menu-item>
                            <el-menu-item index="1-2"><router-link to="/HelloWorld">系统</router-link></el-menu-item>
                        </el-menu-item-group>
                    </el-menu>
                </el-aside>
            
                <el-main>
                    <el-header style="text-align: right; font-size: 12px;height: 15px;">
                        <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                        <span>{{$store.state.name}}</span>
                    </el-header>
                    <router-view/>
              </el-main>
            </el-container>
            <el-footer>脚</el-footer>
          </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          name: '',
          password: ''
        }
      }
    },
    methods: {
      onSubmit() {
        alert(this.form.name);
      }
    }
  }

  </script>
  
  <style>

  </style>