Element 学习（1）：搭建项目

前言

单纯的记录一下自己的学习过程

基于React搭建项目

创建react项目 安装element 安装scss

如图 react项目、element、scss安装完成 安装electron

命令

npm install electron --save-dev

在package.json里的scripts标签里添加下面的命令

//启动命令
 "electron": "electron ."

在package.json里添加以下命令

//程序启动的入口文件
 "main": "main.js"

创建 main.js

const {
          
    app, BrowserWindow } = require(electron)
const createWindow = () => {
          
   
    //创建窗口
    const mainWindow = new BrowserWindow({
          
   
        width: 400,
        height: 400,
        webPreferences: {
          
   
            // 开启node模块
            nodeIntegration: true,
            // 开启remote模块
            enableRemoteModule: true,
            //禁用上下文隔离
            contextIsolation: false
        }
    })
    //设置可以打开调试
    mainWindow.webContents.openDevTools()
    //加载要显示的路径
    mainWindow.loadURL(http://localhost:3000/)
}

app.whenReady().then(createWindow)

热更新

cnpm install --save-dev electron-reloader

在入口文件中加入以下代码：

const reloader = require(electron-reloader)
reloader(module)

启动项目

npm run electron

运行界面

注： 这里碰到了几个问题

npm安装electron，安装了几次都失败了。最后用cnpm安装成功的。 启动桌面程序时报错，如下。仔细看了一下，大致意思是你的入口文件没有找到。这里要主要入口文件要建立在根目录下要和package.json是同一级目录

基于 vue搭建项目

之前用了一下electron-vue创建了个项目，但是项目是基于vue2.x的，现在vue都3.x了，百度了一下，3.x的项目可以使用 vue-cli-plugin-electron-builder

创建vue项目

vue create electron-vue3

选择vue3，咱们要与时俱进对吧 安装vue-cli-plugin-electron-builder插件

vue add electron-builder

这里是vue add不要用npm

会提示你选择electron的版本，安装最新版的就好

启动

npm run electron:serve

浏览器和electron窗口都会打开 打包

npm run electron:build

打包速度挺快的，下载安装包就有些慢了。把下载连接复制到浏览器，浏览器也会进行下载 编辑器里下载失败了，不过，浏览器里经过一个多点下载完成了，解压压缩包，你会看到一个.exe的启动程序，如图 启动界面 注： 好像本地打包成功后，除了绿色安装，还有一个安装程序，不过我本地打包失败了，有兴趣的自己试一下。

安装element plus

npm install element-plus --save

在项目中引入

main.js

import {
          
    createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");

app.vue

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<script>

export default {
          
   
  name: App,
  components: {
          
   
  }
}
</script>

<style>
</style>

安装路由

npm install vue-router

安装scss

npm install --save-dev node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass