【springboot&vue 音乐网站 0】代码汇总

【springboot&vue 音乐网站2(07-08)】

1 Vue页面结构介绍

1.1 mian.js

//1.main.js 逻辑入口  2.router内.js 路由文件  3.App.vue 渲染路由组件
/* 1.该文件是逻辑入口，主要用来初始化Vue实例并加载需要的插件及各种公共组件，如vue- router、mui、App.vue等 */

import Vue from 'vue'     //引入vue.js
import App from './App'     //引入App.vue组件，该组件将在后面实现
import router from './router/index.js'   //导人外部router内的.js文件
import './assets/css/main.css'
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui'        
Vue.use(ElementUI)
/* import VCharts from 'v-charts'
Vue.use(VCharts)  */

Vue.config.productionTip = false

new Vue({
  el: '#app',            //将el挂载到index.html文件的<div id="App">
  render: c => c(App),   //使用render函数渲染App.vue组件
  router                  //将routeris 文件中导出的router 对象注册到Vue实例上，来监听URL地址变化，然后展示对应组件
})

1.2 router/index.js

//1.main.js 逻辑入口  2.router内.js 路由文件  3.App.vue 渲染路由组件
/* 2.该文件是一一个单独的路由文件。在后面的步骤中将会创建Login.vue(登录)和Register.vue(注册)两个组件，所以需要在路由文件中导人这两个组件，并配置相应的路由规则 */


import Vue from 'vue'
import Router from 'vue-router'  //导人vue- router.js路由包
Vue.use(Router)                  //安装vue -router 路由模块



//异步加载

export default new Router({
  routes: [
        {
      path: '/',
      //异步模块获取，打包的时候每次访问这个路由的时候会单调单个文件，按需加载
      component: resolve => require(['../pages/Login.vue'], resolve)
      
    }
  ]
})


//import方式加载路由组件，初次加载就读取全部

/* 

import Login from '@/pages/Login'
export default new Router({//创建路由对象
  routes: [                   //配置一组路由规则(可有多个[{}{}])
    {
      path: '/',              //设置path路由链接
      name: 'Login',          //设置对应组件
      component: Login        
    }
      
  ]
})
 */

1.3 App.vue

<!--1.main.js 逻辑入口  2.router内.js 路由文件  3.App.vue 渲染路由-->
<!--3.该文件是项目的根组件(或者叫作主组件),所有页面都是在App.vue下进行切换的。例如，可以定义公共的样式或者动画等。-->

<template>
  <div id="app">
    <router-view/>    <!--用于防止路由匹配成功的组件，在此渲染-->
  </div>
</template>

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

<style>
</style>