标签：Vue APP loader c3 vue 组件 c1 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，不懂的地方很多，如果表达有错误，请大家在评论指出。
标签：Vue,APP,loader,c3,vue,组件,c1,css 来源： https://blog.51cto.com/u_15163444/2704516
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。