学习各种引入，导入
首先在main.js中做好配置
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' //引入vue 4 import ElementUI from 'element-ui' //引入ui组件 5 import 'element-ui/lib/theme-chalk/index.css' //引入ui组件css 6 import App from './App' //引入app.vue 7 import router from './router' //引入vue-router配置 8 import Music from './components/Music' //引入自定义组件music 9 Vue.use(ElementUI) //使用ui组件 10 Vue.use(Music) //使用自定义组件 11 Vue.config.productionTip = false 12 13 /* eslint-disable no-new 实例化vue*/ 14 new Vue({ 15 el: '#app', 16 router, 17 components: { App }, 18 template: '<App/>' 19 })
配置好以上信息后，配置router
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 // 配置所有页面路由路径 4 5 Vue.use(Router) //使用router 6 Vue.use(require('vue-wechat-title')); //实例化参数动态改变页面title 用法1：可以在各模块页面单独引入 用法2：也可以在app.vue统一引用。效果一样<div v-wechat-title="$route.meta.title"></div> 7 export default new Router({ 8 routes: [ 9 // 默认首路径即是首页的页面 10 { 11 path: '/', 12 name: 'Index', 13 meta: { title: '首页' }, 14 component: resolve => require(['@/pages/Index'], resolve)//异步加载组件好处按需加载不需要用户一次性加载各模块 15 }, 16 // 分类 17 { 18 path: '/list', 19 name: 'List', 20 meta: { title: '分类' }, 21 component: resolve => require(['@/pages/List'], resolve) 22 }, 23 //个人中心 24 { 25 path: '/my', 26 name: 'My', 27 meta: { title: '我的' }, 28 component: resolve => require(['@/pages/My'], resolve) 29 }, 30 { 31 path: '/journalList', 32 name: 'JournalList', 33 meta: { title: '日志列表' }, 34 component: resolve => require(['@/pages/JournalList'], resolve) 35 } 36 ] 37 })
配置好这些以后，接下来就是模块信息
1 <template> 2 <div> 3 <div v-wechat-title="$route.meta.title"></div> 4 <Head></Head> 5 <el-main> 6 <el-carousel :interval="4000" type="card" height="200px"> 7 <el-carousel-item v-for="item in 6" :key="item"> 8 <h3>{{ item }}</h3> 9 </el-carousel-item> 10 </el-carousel> 11 <div style="height:1000px"> 12 </div> 13 </el-main> 14 <Foot></Foot> 15 </div> 16 17 </template> 18 19 <script> 20 // 引入头部和底部 21 import Head from '../components/Header' //引入组件header 22 import Foot from '../components/Footer' //引入组件footer 23 import Img from '../assets/img/bg.jpg' //引入背景图 24 export default { 25 name: 'Index', //命名和router名字一致 26 data () { 27 return { 28 msg: '' 29 } 30 }, 31 components: { Head , Foot} //定义所需要引入的组件，名字和引入时赋值名字一致 32 } 33 </script> 34 35 <style> //样式 36 .el-main { 37 100%; 38 position:absolute; 39 top:40px; 40 bottom:40px; 41 overflow:scroll; 42 left:0; 43 padding:0; 44 background-repeat:no-repeat; 45 background-image:url('../assets/img/bg.jpg'); 46 background-size:cover; 47 } 48 .el-carousel__item h3 { 49 color: #475669; 50 font-size: 14px; 51 opacity: 0.75; 52 line-height: 200px; 53 margin: 0; 54 } 55 56 .el-carousel__item:nth-child(2n) { 57 background-color: #99a9bf; 58 } 59 60 .el-carousel__item:nth-child(2n+1) { 61 background-color: #d3dce6; 62 } 63 </style>