Vue多個單文件組件使用/Element-ui

1.多個單文件組件使用

在project目錄下創建components文件夾，然后將所有子組件放入components文件夾下

 

 

1、多組件嵌套使用

Child1.vue

 

<template>
    <div>子組件1</div>
</template>

<script>
// export default {

// }
</script>

<style></style>

 

Child2.vue

 

<template>
    <div>子組件2</div>
</template>

<script>
// export default {

// }
</script>

<style></style>

 

App.vue

<template>
    <div>
        單文件組件
        <!-- 調用子組件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //導入components目錄下的子文件 Child1為指定的組件名，可以任意命名，不一定按照文件名
import Child1 from './components/Child1.vue' import Child2 from './components/Child2.vue' export default { // 將子組件添加到App.vue中  components:{ Child1, Child2, } } </script> <style></style>

 

2、多組件路由使用

使用路由形式將多個單文件組件組合在一起

1. 定義路由目錄和路由文件

   mkdir router
   touch router.js

2. 編寫路由文件router.js

　　　　　　

import Vue from 'vue'
// 導入路由插件
import Router from 'vue-router'
import Child1 from '../components/Child1.vue' import Child2 from '../components/Child2.vue' // 在vue中使用插件 Vue.use(Router) export default new Router({ // 定義匹配規則 routes:[ { path:'/', // 匹配根路徑／，加載Chiled1中的內容 component:Child1 }, { path:'/child2', component:Child2 } ] })

 

1. 在main.js中使用路由

　　　　　　

import Vue from 'vue'
import App from './App.vue'
//導入定義好的路由
import router from './router/router.js'

new Vue({ el:'#app', router, //使用路由 render:function(creater){ return creater(App) } })

 

1. 在App.vue中指定路由標簽

   1. <template>
          <div>
              單文件組件
               <!-- 記載路由標簽 -->
              <router-view></router-view>
          </div>
      
      </template>
      
      <script></script>
      
      <style></style>

2.Element-ui

單文件組件就像是一個個封裝好的頁面樣板，我們可一把這些樣板組合在一起形成一個完整的頁面。就像QQ空間裝扮一樣，將個個樣板放入QQ空間頁面中組成自己風格的頁面。而Element-ui就將我們需要的樣式封裝成單文件組件，我們可以直接集成到我們的項目中。

1. 在main.js中將emelent-ui引入到項目中

   1.  

      import Vue from 'vue'
      import App from './App.vue' import router from './router/router.js' // 引入ElementUI import ElementUI from 'element-ui' // 引入css import 'element-ui/lib/theme-chalk/index.css' // 使用ElementUI Vue.use(ElementUI) new Vue({ el:'#app', router, render:function(creater){ return creater(App) } })

       

2. 在子組件中使用element-ui的代碼,

   1. <template>
      <div>
        <div class="block">
          <span class="demonstration">默認</span>
          <el-slider v-model="value1"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">自定義初始值</span>
          <el-slider v-model="value2"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">隱藏 Tooltip</span>
          <el-slider v-model="value3" :show-tooltip="false"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">格式化 Tooltip</span>
          <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">禁用</span>
          <el-slider v-model="value5" disabled></el-slider>
        </div>
      </div>
      </template>
      
      <script>
        export default { data() { return { value1: 0, value2: 50, value3: 36, value4: 48, value5: 42 } }, methods: { formatTooltip(val) { return val / 100; } } } </script>

       

Emelent的其他效果樣式可以參考官方網站：

http://element-cn.eleme.io/#/zh-CN/component/progress