创建项目vue3

chanchaw大约 4 分钟languageelectron

概述

electron 默认走开发 html 的传统方式，即一个页面一组文件 html + css + js ，与最新的 vue 的单页面开发方式不同。所以目前比较新的方式是使用开发脚手架open in new window 以 electron-vite 的组合创建项目。下面代码是创建项目并安装依赖并运行项目：

npx degit alex8088/electron-vite-boilerplate project-name
cd project-name
npm install
npm run dev

通过上面代码创建的项目中包含的技术栈是：electron + vue3 + vite + ts 并没有 pinia + vue-router

项目命令：

# 启动项目
npm run dev

api

http://doc.xuexiluxian.cn/web/#item/index
testapi / 123456
登录：/u/loginByJson

安装路由

执行下面命令进行安装：

npm install vue-router -S

然后在项目中手动创建路由目录 src/renderer/src/router 并在其下创建 index.ts，套路和 vue 一样，在该文件中设置路由路径 @views 在项目中路径是 \src\renderer\src\views，组件 Home.vue 在目录 views 下，所以在该路由文件中如下导入

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '@views/Home.vue';

export default createRouter({
  history: createWebHashHistory(),// hash模式
  routes:[{ path: "/", component: Home}]// 路由数组
})

在配置文件 electron.vite.config.ts 中设置路由目录如下面的 @router

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin, bytecodePlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@views': resolve('src/renderer/src/views'),
        '@router': resolve('src/renderer/src/router'),
      }
    },
    plugins: [vue()]
  }
})

然后在 main.ts 中导入该路由

// import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@router'

createApp(App).use(router).mount('#app')

最后记得在 App.vue 中使用路由标签

<script setup lang="ts">
</script>
<template>
<div>
  <router-view />
</div>
</template>

安装store

pinia官网open in new window ，安装步骤如下

npm install pinia -S

导入系统中使用

import { createApp } from 'vue'
import App from './App.vue'
import router from '@router'
import { createPinia } from 'pinia'

createApp(App).use(router).use(createPinia()).mount('#app')

新建仓库文件 src/renderer/src/store/index.ts，其初始化代码如下

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 11,
    }
  },
  getters: {},
  actions: {}
})

在配置文件 electron.vite.config.ts 中新增 store 的路径声明

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin, bytecodePlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@views': resolve('src/renderer/src/views'),
        '@router': resolve('src/renderer/src/router'),
        '@store': resolve('src/renderer/src/store')
      }
    },
    plugins: [vue()]
  }
})

在业务组件中测试 store 是否配置成功

<template>
  <div>
    我是主页
  </div>
</template>
<script setup>
import { useStore } from '@store'
let store = useStore();
console.log(store.$state);
</script>

运行项目后在控制台查看有没有打印出数据

安装 axios

执行命令安装 npm install axios -S ，注意后面的是大写 S
将 axios 封装到请求工具类中 utils/request.ts，并制作请求和响应拦截器

import axios from 'axios';

const instance = axios.create({// 创建实例对象
  baseURL: 'https://xdfznh.club'
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 这里填写请求之前要做的工作
    return config
  },
    err => {
    return Promise.reject(err)
  }
)

instance.interceptors.response.use(
  res => {
    // 2xx 类的状态码都会触发本回调函数
    // 在返回响应数据前做点什么
    return res
  },
  err => {
    return Promise.reject(err)
  }
)

export default instance;

在制作开发环境下的http代理之前要先注释掉 index.html 中的一个 meta

环境变量

在配置文件 electron.vite.config.ts 中配置的请求代理在编译后并没有效果，在开发阶段执行 http 请求时候是将代理的地址+request.ts中的uri + 业务请求的uri，如下图的拼接方式

但是在编译后是没有代理功能的，那么最终的完整 url 是 /api/u/loginByJson，就会导致报错 404，要解决这个问题就要配置环境变量。按照下面步骤制作环境变量：

在项目根目录下的文件夹 build 分别创建文件 .env.development 和 .env.production 作为开发环境和生产环境，环境变量文件中的内容见上图，默认的环境变量前缀是 VITE_，本案例在 electron.vite.config.ts 中重命名了前缀为 RENDERER_ 见上图。在业务组件中通过下面方法打印出来
```
console.log(`环境变量：${JSON.stringify(import.meta.env)}`);
// 上图的代码打印结果如下：
{
"RENDERER_NODE_ENV":"development",
"RENDERER_VUE_APP_PROXY":"true",
"RENDERER_VUE_APP_API_BASEURL":"http://uat.crm.xuexiluxian.cn",
"BASE_URL":"/",
"MODE":"development",
"DEV":true,
"PROD":false,
"SSR":false
}
```

element-plus

安装组件

# 安装
npm install element-plus --save
# 按需引入
npm install -D unplugin-vue-components unplugin-auto-import

# 在配置文件 electron.vite.config.ts 中导入 element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

# 应用自动导入的插件，原本只有 vue() 一个插件
export default defineConfig({
	renderer: {
	    plugins: [
          vue(),
          // element-plus 自动导入依赖
          AutoImport({
            resolvers: [ElementPlusResolver()]
          }),
          Components({
            resolvers: [ElementPlusResolver()]
          })
        ]
	}
})

# 在业务组件中使用下面代码测试是否安装导入成功
<el-button type="primary">Primary</el-button>

安装图标

npm install @element-plus/icons-vue

创建项目vue3

# 概述

# api

# 安装路由

# 安装store

# 安装 axios

# 环境变量

# element-plus

# 安装组件

# 安装图标

概述

api