vue文件里在style的样式需要什么loader_全是干货 ! 封装Vue组件的一些技巧 你知道几个? ( 文末有彩蛋！)...

前言

写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。

本文整理了开发Vue组件的一些技巧，包含大量代码示例。

开发环境

vue-cli3提供了非常方便的功能，可以快速编写一些测试demo，是开发组件必备的环境。下面是安装使用步骤

// 全局安装vue-cli3npm install -g @vue/clivue -V // 查看版本是否为3.x// 安装扩展，此后可以快速启动单个vue文件npm install -g @vue/cli-service-global// 快速启动demo文件vue serve demo.vue

如果需要scss，则还需要在目录下安装sass-loader等。

下面是使用vue-cli3可能会遇见的几个问题。

自定义入口文件

如果需要(比如需要开发移动端的组件)，可以在使用vue serve时自定义html入口文件，在根目录下编写index.html，并确保页面包含#app的dom即可。

引入公共混合文件

通过style-resources-loader在每个文件引入公共样式混合等，参考自动化导入

需要访问Vue全局对象

在某些时候需要放问全局Vue对象，如开发全局指令、插件时

import Vue from "vue"import somePlugin from "../src/somePlugin"Vue.use(somePlugin)

上面这种写法并不会生效，这是因为vue serve xxx.vue仅仅只能作为快速原型开发的方案，使用的Vue与 import引入的Vue不是同一个对象。一种解决办法是手动指定vue serve的入口文件

// index.jsimport Vue from "../node_modules/vue/dist/vue.min"import placeholder from "../src/placeholder/placeholder"Vue.use(placeholder)new Vue({ el: "#app