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/