Vue(5)： APP.vue引入CSS样式文件和动态切换组件的方法

1.vue文件引入css样式

刚开始写的时候代码量比较小，越到后面代码量越大，这样css样式也就会越大，代码不仅不美观，而且也违背了模块化的道理。

以APP.vue文件为例，如何引入css文件。试过很多方法，但感觉都没有成功，偶然发现两篇博主的文章，结合了一下，发现成功了。下面具体介绍一下如何引入。

首先在终端中安装

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

1.vue文件引入css样式

2.vue动态切换组件

更多相关文章

随机推荐