vue组件化学习第二天

学习各种引入，导入

首先在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     width: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>

 

posted @ 2018-03-23 15:12  BlueSky1024  阅读(195)  评论(0)  编辑  收藏  举报