【个人】配置node.js和创建新electron项目 批处理代码

NEED Administrator Privilege!

md "C:\Program Files\nodejs\node_cache"
md "C:\Program Files\nodejs\node_global"
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
npm config set registry https://registry.npmmirror.com

npm create @quick-start/electron@latest

---

温馨提示：记得把global和cache的目录都拉到path环境变量中！

2024/10/9 今天被学长推荐使用element plus来做ui库

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install element-plus --save

之后把main.ts的内容改成

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import App from './App.vue'

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

注意：那个css文件一定要导入！那个css文件一定要导入！那个css文件一定要导入！

---

2024/10/15 安装vue-router库

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install vue-router@4

此时新建一个"router.ts"，并键入下列代码

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';


const routes: Array<RouteRecordRaw> = [
  {
    path: "/StaticInfo/Overview",
    component: import("./components/Views/Overview.vue")
  },
];
 
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router

回到main.ts，内容改为

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

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

此时， vue-router 的安装便完成了

2024/10/17 安装Pinia库

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install pinia

回到main.ts，内容改为

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

import { createPinia } from 'pinia'

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

怎么使用的话，先创建一个文件叫store.ts，代码为以下内容：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useGlobalStore = defineStore('global', () => {
  const count = ref(1);
  function change(newval : number){
    count.value = newval;
  }
  return { count, change }
})

接着在其他组件上添加下列代码，就能用了（可以拿来充当全局变量使用，这样就不需要在父子组件之间重复写prop来把参数传来传去了）

import { useGlobalStore } from '../../store'
const global = useGlobalStore()

global.count = Math.random()*100;

2024/10/17 安装Axios库

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install axios

之后在需要用到Axios的地方上，添加这么一句代码就可以用Axios了

import axios from "axios"

2025/3/7 安装scss库

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install -D sass-embedded

之后在需要用到scss的css代码里，添加lang="scss"即可：

<style lang="scss" scoped>
......
</style>

2025/3/19 安装vue-i18n库

官网地址：https://vue-i18n.intlify.dev/
github仓库链接：https://github.com/intlify/vue-i18n
来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install vue-i18n@10

回到main.ts，内容改为

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

import { createPinia } from 'pinia'
import i18n from '@renderer/locale/index' // 多语言

let inst = createApp(App)
inst.use(ElementPlus)
inst.use(router)
inst.use(createPinia())
inst.use(i18n)
inst.mount('#app')

在renderer->src下创建个目录locale，在该目录下又创建个index.ts和langs文件夹，index.ts的内容如下：

// @renderer/locale/index.ts

import { createI18n } from "vue-i18n";
import zhCn from './langs/zh-cn'
import zhTwhk from './langs/zh-twhk'
import en from './langs/en'
import es from './langs/es'
import fr from './langs/fr'
import de from './langs/de'
import ru from './langs/ru'
import jp from './langs/jp'
import kr from './langs/kr'

const i18n = createI18n({
  legacy: false,
  locale: "zhCn",
  messages: {
    zhCn,
    zhTwhk,
    en,
    es,
    fr,
    de,
    ru,
    jp,
    kr
  },
})

export default i18n

langs 文件夹下创建 XXX.ts（XXX是你自己想创建的语言的名称）

然后在vue文件里用 $t('message.hello') 就能实现语言文字切换啦（以下代码仅供参考）：
如果要切换语言，就去设置 i18n.global.locale 的值

<template>
  <h1>{{ $t('message.hello') }}</h1>
  <el-button @click="jp"></el-button>
  <el-button @click="en"></el-button>
</template>

<script lang="ts" setup>
import { i18n } from './main';

function jp(){
  i18n.global.locale="ja"
}
function en(){
  i18n.global.locale="en"
}
</script>

2025/3/20 安装Vue-JSX库

npm链接：https://www.npmjs.com/package/@vitejs/plugin-vue-jsx
github仓库链接：https://github.com/vitejs/vite-plugin-vue

来到@quick-start/electron创建的项目文件夹中，在npm里边输入

npm install @vitejs/plugin-vue-jsx -D

之后来到electron.vite.config.ts文件里，在renderer->plugins数组里添加jsx()（要先导入'@vitejs/plugin-vue-jsx'）

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

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

之后就可以编写 vue 代码啦（记得lang要从ts转为tsx）

<script lang="tsx" setup>
import { ref } from 'vue';
import { JSX } from 'vue/jsx-runtime';

const log = ref<(() => JSX.Element)[]>([]);
const str = ref<string>("Hello");

const comp = () => <div><b>{str.value}</b></div>;
const comp2 = () => <div>{str.value + " World"}</div>;

log.value.push(comp);
log.value.push(comp2);
log.value.push(() => <div>{"@" + str.value + "@"}</div>);
</script>

<template>
  <el-input v-model="str"></el-input>
  <div>
    <component v-for="(it, index) in log" :key="index" :is="it" />
  </div>
</template>

2025/3/22 安装 json-bigint 库

因为我的项目中有用到 BigInt 这个类型的需求，且有针对包含BigInt类型的对象变量进行JSON序列化的需求，但普通的JSON序列化并不支持BigInt这个类型

let obj = {a: 123n, b: 222, c: "Hello"}
console.log(JSON.stringify(obj))

因此，我找到了一个库json-bigint，该库就能够解决这种问题

npm链接：
https://www.npmjs.com/package/json-bigint
https://www.npmjs.com/package/@types/json-bigint

npm install json-bigint
npm install --save @types/json-bigint

其中，@types/json-bigint是针对 json-bigint 在 TypeScript 下的类型信息

安装完成后就可以用啦

import * as JSONBig from 'json-bigint'

let obj = {a: 123n, b: 222, c: 0xffffffn, d: "Hello"}
console.log(JSONBig.stringify(obj))