航空前端1

1.导入依赖 vuex buefy element

若无vuex则导入依赖 

在终端写入npm install vuex --save

再导入npm install buefy --save

获得buefy和bulma两个UI框架

再导入npm install element-ui --save

获得element框架

 

2.在main.js中加入

//Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

//ElementUI
import ElementUI from 'element-ui'
import'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(Buefy)
Vue.use(ElementUI)

4.创建对应文件夹

3.创建home.vue

<template>
  <div>
    <div class="box">{{billboard}}</div>  
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      billboard:'版本更新'
    }
  }
}
</script>

4.修改home.vue的路由router里得index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//动态读取路由
const routes=[
  {
    path:'/',
    name:'Home',
    //@表示根目录
    component:()=>import('@/views/Home')
  }
]

const router=new VueRouter({routes}) //遍历routes都放在router里
export default router; //执行router

 

5.app.vue

// 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'
//Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

//ElementUI
import ElementUI from 'element-ui'
import'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(Buefy)
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})