vue 抽离js

本文介绍了如何在Vue项目中进行JS模块的抽离,通过创建idcard.js文件并将其在main.js中引入,实现了代码的组织优化,便于复用和维护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、项目结构
在这里插入图片描述
idcard.js

export default{
    install(Vue) {
        Vue.prototype.$scaleimg = function (img) {
            let height=img.currentTarget.height;
            let width=img.currentTarget.width;
            let base64data='';
            let can=document.createElement("canvas");
            can.height=height;
            can.width=width;
            let casimg=can.getContext('2d');
            casimg.clearRect(0, 0,width,height);
            casimg.drawImage(img.currentTarget,0,0,width,height);
            base64data=can.toDataURL('image/*');
            let size=Math.round( this.$dataURLtoBlob(base64data).size/1024);
            let maxsize=800;
            if(size>maxsize){
                if(size<1300){
                    img.currentTarget.height=Math.round(height*(3/4));
           
### 提取并复用公共 SCSS 样式文件的方法 在 Vue 项目中,可以通过多种方式实现公共 SCSS 文件的提取和复用。以下是具体方法: #### 方法一:通过 `@import` 导入公共 SCSS 文件 可以在组件的 `<style>` 部分使用 `@import` 来加载公共 SCSS 文件。这种方式适用于局部引入。 ```html <template> <div class="box"> <div class="childBox">子孙盒子样式</div> </div> </template> <script> export default { data() { return {}; }, }; </script> <style lang="scss" scoped> @import "@/assets/css/styles.scss"; .box { font-size: 16px; @include publicCss(200px, 200px); } </style> ``` 这种方法简单易懂,但在大型项目中可能会导致重复编译问题[^2]。 --- #### 方法二:配置全局 SCSS 变量和混合器 为了减少重复工作,可以将常用的变量、函数或混合器集中在一个全局 SCSS 文件中,并通过 Webpack 的 `sass-resources-loader` 插件将其自动注入到每个组件中。 ##### 步骤说明: 1. 安装必要的依赖项: ```bash npm install sass-resources-loader --save-dev ``` 2. 修改 Webpack 配置(通常位于 `vue.config.js` 或类似的构建工具配置文件中): ```javascript const path = require('path'); module.exports = { css: { loaderOptions: { scss: { additionalData: ` @import "${path.resolve(__dirname, './src/style/common.scss')}"; // 自动注入全局样式 `, }, }, }, }; ``` 3. 创建全局 SCSS 文件(如 `common.scss`),并将通用样式写入其中: ```scss $primary-color: #42b983; @mixin publicCss($width, $height) { width: $width; height: $height; background-color: $primary-color; } ``` 这样,在任何组件中都可以直接调用这些变量或混合器,无需手动导入[^3]。 --- #### 方法三:通过 CSS Modules 实现模块化管理 如果希望进一步提升样式的独立性和可维护性,可以选择启用 CSS Modules 并结合 SCSS 使用。CSS Modules 能够为类名自动生成唯一的哈希值,从而避免命名冲突。 示例代码如下: ```html <template> <div :class="$style.container"> <div :class="$style.child">子元素</div> </div> </template> <script> export default { data() { return {}; }, }; </script> <style module lang="scss"> @import '@/assets/css/variables.scss'; .container { color: $primary-color; } .child { padding: 10px; border: 1px solid black; } </style> ``` 此方法适合复杂的多团队协作场景,但可能增加一定的学习成本[^5]。 --- #### 方法四:利用 Mixins 抽离逻辑 虽然 Mixins 主要用于 JavaScript 逻辑共享,但它也可以间接帮助我们更好地组织样式资源。例如,通过定义一个专门负责样式初始化的 Mixin,统一处理某些特定需求。 示例代码: ```javascript // mixins/globalStyleMixin.js export default { mounted() { import('@/assets/css/init.css'); // 动态加载全局 CSS }, }; ``` 然后在需要的地方引入该 Mixin 即可[^1]。 --- ### 总结 以上四种方法各有优劣,实际应用时需根据项目规模和个人偏好选择合适的方式。推荐优先考虑 **方法二**,因为它既方便又高效;而对于更复杂的需求,则可以尝试结合其他技术手段来优化开发体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值