Vue(5)： APP.vue引入CSS樣式文件和動態切換組件的方法

1.vue文件引入css樣式

剛開始寫的時候代碼量比較小 ，越到後面代碼量越大，這樣css樣式也就會越大，代碼不只不美觀，並且也違背了模塊化的道理。

以APP.vue文件爲例，如何引入css文件。試過不少方法，但感受都沒有成功，偶然發現兩篇博主的文章，結合了一下，發現成功了。下面具體介紹一下如何引入。

首先在終端中安裝

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install stylus-loader --save-dev

安裝完成後，打開項目的build文件夾中的webpack.base.js文件夾，在module中的rules中添加

{
    test: /\.css$/,
    include: [
    /src/, //表示在src目錄下的css須要編譯
    '/node_modules/element-ui/lib/' //增長此項
    ],
    loader: 'style-loader!css-loader',
},

我的測試了一下，不須要這段代碼也能夠運行，但網上不少都說要添加，爲了以防萬一，先添加上，添加完成後保存，打開App.vue(我是以這個vue文件爲例，若是要在其餘文件中引入，道理同樣)，我在src文件夾下面新建了一個css文件夾，導入css文件便可。

<style>
  /* 引入css樣式 */
  @import './css/App.css';
</style>

這樣就能夠成功使用css文件了。

2.vue動態切換組件

在一個項目中，不可避免的須要動態切換組件，用按鈕，p標籤，a標籤等等均可以實現。在這裏主要用的是a標籤動態切換組件。

<template>
  <div>
    <div>
      <!-- href設置爲javascript:void(0)，沒有組件的時候防止自動跳轉到首部，
			經過click屬性來切換，定義一個change函數，用來切換組件
		-->
      <a href="javascript:void(0)" @click="Change(c1)">子組件1</a>
      <a href="javascript:void(0)" @click="Change(c2)">子組件2</a>
      <a href="javascript:void(0)" @click="Change(c3)">子組件3</a>
    </div>
    <!-- 設置默認加載的組件，即咱們想默認展現那個界面 -->
    <div :is="currentItem"></div>
  </div>
</template>

<script>
 // 導入子組件
 import c1 from '@/components/c1';
 import c2 from '@/components/c2';
 import c3 from '@/components/c3';

 export default {
   data () {
     return {
       c1: 'c1',
       c2: 'c2',
       c3: 'c3',
       currentItem: 'c1' // 默認選中第一個組件
     };
   },
   methods: {
     //a標籤調用的時候更改當前組件
     Change(Item) {
       this.currentItem = Item;
     }
   },
   components: { c1, c2, c3 }
 };
</script>

<style>
</style>

這樣就能夠實現動態切換組件了，若是不想用a標籤，也能夠用這個方法那其餘的標籤來完成。

小弟初次學習vue，不懂的地方不少，若是表達有錯誤，請你們在評論指出。