银河麒麟v10安装前端环境（Node、vue、Electron+vite）

在如今的前端开发中，Node.js、Vue.js、Electron以及Vite已成为不可或缺的工具。本文将介绍如何在银河麒麟V10操作系统上安装并配置这些前端环境，以便构建现代的桌面应用。

一、准备工作

在开始之前，请确保您的银河麒麟V10系统已连接到互联网，并且您的用户具有管理员权限。

二、安装Node.js

Node.js是JavaScript运行时，它允许你在服务器端运行JavaScript代码。首先，我们需要安装Node.js。

1. 打开终端（Terminal）。

2. 使用以下命令更新系统软件包： bash sudo apt update sudo apt upgrade

3. 接下来，我们可以使用以下命令安装Node.js： bash sudo apt install nodejs sudo apt install npm

4. 安装完成后，检查Node.js和npm的版本以确保安装成功： bash node -v npm -v

三、安装Vue.js

使用Node.js后，可以使用npm来安装Vue.js。我们将创建一个新的Vue项目。

1. 全局安装Vue CLI： bash npm install -g @vue/cli

2. 创建一个新的Vue项目： bash vue create my-vue-app 在创建过程中，会出现一些选项，您可以选择默认配置或自定义配置。

3. 进入项目目录： bash cd my-vue-app

4. 启动开发服务器： bash npm run serve 您可以在浏览器中访问 http://localhost:8080 来查看您的Vue应用。

四、安装Electron

Electron是一个用于构建跨平台桌面应用的框架，接下来我们将其集成到Vue项目中。

1. 首先，进入您的Vue项目目录（如上所示）。

2. 安装Electron： bash npm install electron --save-dev

3. 创建一个主进程文件 electron.js，并添加以下代码： ```javascript const { app, BrowserWindow } = require('electron');

function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, });

   win.loadURL('http://localhost:8080');

}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } });

app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); ```

1. 修改 package.json 添加启动脚本： json "scripts": { "serve": "vue-cli-service serve", "electron": "electron electron.js" }

2. 首先启动Vue服务，再启动Electron： bash npm run serve npm run electron

五、使用Vite构建

Vite是一个快速的构建工具，适合现代前端开发。接下来我们将用Vite替换Vue CLI构建。

1. 在项目中安装Vite： bash npm install vite --save-dev

2. 在项目根目录下创建 vite.config.js 文件，并添加以下内容： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue';

export default defineConfig({ plugins: [vue()], }); ```

1. 修改 package.json 以添加Vite启动脚本： json "scripts": { "dev": "vite", "electron": "electron electron.js" }

2. 现在可以运行Vite服务： bash npm run dev npm run electron

总结

通过以上步骤，我们在银河麒麟V10上成功安装了Node.js、Vue.js、Electron和Vite，配置了一个基本的桌面应用开发环境。接下来你可以根据自己的需求进一步扩展功能，构建出丰富的桌面应用。希望这篇文章对您有所帮助！