vue 分类

npm

1. 清理缓存

npm cache clean --force

2. 禁用SSL验证

npm config set strict-ssl false

3. 配置镜像源

npm config set registry https://registry.npmjs.org/

刘欢原创2025/8/13小于 1 分钟

基础应用

1. 使用 async/await

将方法封装为 Promise

methods: {
  asyncMethod1() {
    return new Promise((resolve, reject) => {
      // 异步操作（如 API 请求）
      setTimeout(() => {
        resolve('方法1的结果');
      }, 1000);
    });
  },

  asyncMethod2() {
    return new Promise((resolve, reject) => {
      // 另一个异步操作
      setTimeout(() => {
        resolve('方法2的结果');
      }, 1500);
    });
  }
}

刘欢原创2025/7/3大约 2 分钟

基础页面操作

加载外网页面

<template>
    <div>
        <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;"></iframe>
    </div>
</template>
 
 
<script>
    export default {
        data () {
            return {
            }
        },
        mounted(){
            /**
            * iframe-宽高自适应显示   
            */
            function changeMobsfIframe(){
                const mobsf = document.getElementById('mobsf');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                mobsf.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
                mobsf.style.height = (Number(deviceHeight)-64) + 'px'; //数字是页面布局高度差
            }

            changeMobsfIframe()

            window.onresize = function(){
                changeMobsfIframe()
            }
        }
    }
</script>

刘欢原创2025/7/3大约 3 分钟

子组件调用父组件的方法

总结

1、子组件中通过“this.$parent.event”来调用父组件的方法。

2、子组件用“$emit”向父组件触发一个事件，父组件监听这个事件即可。

3、父组件把方法传入子组件中，在子组件里直接调用这个方法即可。

1. 通过“this.$parent.event”来调用父组件的方法

1.1. 父组件

<template>
  <p>
    <child></child>
  </p>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

刘欢原创2025/2/10大约 1 分钟

项目打包

vue项目分包部署

1. Vue 大型项目之分模块运行 / 打包

1.1. 创建 projects 目录

分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，需要在一个新的脚手架 src 目录下新建了一个 projects 目录：

如上图，可以看到 Bproject、mcHd 两个项目。可以在每个小项目中创建 assets（包括 img 和 css）、common（放公共组件或者方法）、views（放页面）的文件夹和 mApp.vue、main.js、router.js、store.js（小项目中的路由之类）如果还需要文件夹专门用来放组件可以建一个 components 文件夹。（本项目比较小暂时不需要）视图目录结构大概就是上面的样子，我们可以打包这个 mcHd 模块这个小项目下的页面，就像打包一个完整 vue 的项目一样

刘欢原创2024/11/25大约 3 分钟

基础

修改配置

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
const additionalData = { myKey: 'myValue' }
let myWindow = null
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true, //完全使用nodeapi
      contextIsolation: false
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

const gotTheLock = app.requestSingleInstanceLock(additionalData)
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
    if (myWindow) {
      if (myWindow.isMinimized()) myWindow.restore()
      myWindow.focus()
    }
  })

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
      // Install Vue Devtools
      try {
        await installExtension(VUEJS_DEVTOOLS)
      } catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
      }
    }
    createWindow()
  })

  // Exit cleanly on request from parent process in development mode.
  if (isDevelopment) {
    if (process.platform === 'win32') {
      process.on('message', (data) => {
        if (data === 'graceful-exit') {
          app.quit()
        }
      })
    } else {
      process.on('SIGTERM', () => {
        app.quit()
      })
    }
  }
}