文章目录

  • 一、提前准备
  • 二、创建项目
  • 1、初始化项目：
  • 2、安装开发需要使用的npm包
  • 3、基础配置
  • 4、项目多余代码删除



这是一个vue开发的摄像头软件教程，基于Electron和vue进行开发

一、提前准备
二、创建项目
1、初始化项目：
pnpm create @quick-start/electron camera --template vue-ts

执行命令过程中会提示选择是否添加软件自动更新插件，以及下载镜像代理，可以先选择No，后续有需求再加上

✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

执行完代码之后，会创建一个快速开始的electron app项目。

这个时候进入文件夹之后，进行npm包的安装

cd camera
pnpm install

安装完成后，执行下面代码就可以启动项目进行预览

pnpm run dev

然后你就可以看到如下的项目启动页面

element 播放摄像头 electron 摄像头_electron

2、安装开发需要使用的npm包
  • element-plus
  • @icon-park/vue-next
  • pinia
  • sass/scss
pnpm install element-plus @icon-park/vue-next pinia sass scss

这个项目使用element-plus作为UI框架库，icon使用的是icon-park，存储库使用的是pinia
个人偏好使用sass，如果不喜欢的话可以用用安装，electron-vite默认使用的是less

最后安装一下css样式库，可以极大的提升页面样式开发效率

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

安装好基础的npm包之后，还需要进行简单的配置。

3、基础配置
  • vue3自动导入
  • 安装unplugin-auto-import包
pnpm install -D unplugin-auto-import
  • 配置vue自动导入脚本
    打开根目录下的electron.vite.config.ts, 添加如下代码
AutoImport({
  imports: ["vue"],
  dts: "auto-imports.d.ts"
})

此时重启项目，就会发现在src/renderer目录下出现了一个auto-imports.d.ts文件，此时该文件已经自动引入了vue的相关API

根据element-plus的官方文档，其需要安装unplugin-vue-components和unplugin-auto-import两款插件，而在vue的自动导入的过程中我们已经安装了unplugin-auto-import插件，这个时候我们安装另一个插件。

pnpm install -D unplugin-vue-components

继续在electron.vite.config.ts中添加代码

Components({
  resolvers: [ElementPlusResolver()],
  dts: true
})

此时如果项目中引入了element组件，那么就会发现在src/renderer已经引入了该组件。
现在来看一下完整的electron.vite.config.ts

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      vue(),
      AutoImport({
        imports: ["vue"],
        dts: "auto-imports.d.ts",
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: true
      })
    ]
  }
})

根据官方文档，此时需要创建配置文件

npx tailwindcss init -p

然后修改tailwind.config.js中代码，可以对未使用的数据进行摇树

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

hint:
也可以在purge属性中加入需要进行摇树的文件

此时需要在项目中引入tailwindcss
在src/renderer/src/assets/css目录下创建index.scss文件,加入以下代码

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在src/renderer/src/main.ts引入index.scss

import "@renderer/assets/css/index.scss"

这个时候就可以在项目中使用tailwindcss了。

4、项目多余代码删除

打开项目之后，其实主要关注的目录是src，而src下面有三个文件夹

src/
├──main      # 主进程代码
├──preload   # 预加载脚本，
└──renderer  # 渲染器，vue页面开发

此时主要关注renderer文件下的内容，如果你之前开发过vue的web项目，会发现该文件夹下的目录结构很熟悉

renderer/
├──src/
├────assets/
├──────css
├────components/
├────App.vue
├────env.d.ts
├────main.ts
└──index.html

此时可以删除掉App.vue的内容以及components下的Version组件
为了进行测试tailwind和element-plus
可以在App.vue中添加如下内容

<template>
  <h3 class="text-center text-red-600">Camera</h3>
  <el-button type="primary" plain>Primary</el-button>
</template>

此时重启项目看到如下如下页面，就说明配置成功了。

element 播放摄像头 electron 摄像头_electron_02