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，不懂的地方很多，如果表达有错误，请大家在评论指出。