vue組件化學習次日

時間 2019-11-29

標籤 vue 組件學習次日简体版

原文原文鏈接

學習各類引入，導入css

首先在main.js中作好配置vue

 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 })

配置好以上信息後，配置routerwebpack

 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 })

配置好這些之後，接下來就是模塊信息web

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。