Electron-vue搭建vue全家桶+Element UI客戶端（一）
Electron-vue搭建vue全家桶+Element UI客戶端（一）
electron-vue專案實踐
專欄收錄該內容
1 篇文章1 訂閱
訂閱專欄
本文將以electron6.x+webpack4+vue全家桶+element-ui為技術棧，一套程式碼可以分別打包在客戶端和web端，結合webpack支援熱更新，打包為exe安裝包，過程中會涉及vue全家桶、electron的常見問題、配置和優化，webpack的對應配置等。
一、新建專案
1、初始化專案
electron-vue 是 vue-cli 和 electron 結合的專案，比單獨使用 vue 構建起的 electron 專案要方便很多.
開啟cmd，新建一個專案，我使用的是 electron-vue，輸入以下命令：
vue init simulatedgreg/electron-vue my-project
1
my-project就是我們自己取的專案名。
如果出現下圖問題，說明沒有安裝 vue-cli
可通過 npm install -g vue-cli 進行安裝，如果 vue-cli 也無法安裝，可通過 cnpm 來安裝。
然後再 electron-vue 構建專案提示正在下載模板，下完模板之後根據提示進行操作就行，輸入你該輸入的東西，然後可以一路Enter：
解釋，可根據情況選擇 ESLint 和 Karma + Mocha：
Application Name：專案名稱
Application Id： 專案標識Id（一般使用公司網址）
Application Version ：你的程式的版本號
Project description：專案描述
Use Sass / Scss ：Yes
Select which Vue plugins to install：要安裝的外掛，預設是全選的，按空格鍵取消選擇，前面尖括號裡有*號表示選中狀態
Use linting with ESLint? ：是否使用ESLint外掛做語法檢查
Which ESLint config would you like to use?：如果使用上一步的ESLint，你希望用哪一種檢查配置
Set up unit testing with Karma + Mocha?：是否使用 Karma 和 Mocha整合測試模組
What build tool would you like to use?：你喜歡用哪一種打包方式
1
2
3
在你所建立的目錄可以看到生成的專案：
然後通過
npm install
npm run dev
1
2
命令執行之後，出現以下介面，代表專案建立成功：
2、專案結構
其中，Electron的主程序和渲染程序在src裡分為兩個資料夾：main和renderer，Vue的所有程式碼就放置在renderer資料夾裡。
二、安裝Element UI
開啟專案根目錄下的package.json，裡面是專案依賴的一些名稱以及專案版本要求和一些基本配置，可以看見配置項裡有 dependencies 和 devDependencies 兩項，分別代表什麼意思呢？當使用 webpack 構建專案時，需要明確不同環境下所需要的依賴和版本要求：
dependencies：是在生產環境下使用的一些依賴，由命令列引數 --save 或者 --save-prod 寫入，縮寫為 -s
devDependencies：是僅在開發環境下使用的一些依賴，不會再生產環境下使用，由命令列引數 --save-dev 寫入，縮寫為 -d
如果你僅僅是引入一個在開發期間需要的依賴包，你只需要把它寫入在 devDependencies 中，在生產環境釋出產品時，是不會載入這些包的。
1、npm 安裝 Element ui
npm install element-ui -s
1
然後在生產環境 dependencies 可以看見包的版本：
然後在 main.js 檔案中全域性引入，開啟 src/renderer/main.js：
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
1
2
3
你可以在 App.vue 檔案中測試是否成功引入
<template>
<div id="app">
<el-button type="danger">測試element</el-button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'intercom'
}
</script>
<style>
/* CSS */
</style>
1
2
3
4
electron+vue 專案的初期搭建就到這裡，我們下期再會！
原文連結：https://blog.csdn.net/u013164503/article/details/104626851/