Electron-vue實戰（一）—搭建項目與安裝Element UI

Electron-vue實戰—搭建項目與安裝Element UI

做者：狐狸家的魚

本文連接

GitHub：sueRimn

1、新建項目
一、初始化項目
打開cmd，新建一個項目，我使用的是electron-vue，輸入如下命令：

vue init simulatedgreg/electron-vue my-project

1
my-project就是本身隨便取名的項目名。

而後提示正在下載模板，下完模板以後根據提示進行操做就行，輸入你該輸入的東西，而後一路Enter：

初始化完畢以後，根據提示進行操做，進入項目文件夾，npm install安裝依賴：

 

npm run dev命令運行以後，出現如下界面，表明項目建立成功：

二、項目結構
打開項目，項目結構是這樣的

Intercom
├─ .babelrc
├─ .electron-vue
├─ .eslintignore
├─ .eslintrc.js
├─ .git
├─ .gitignore
├─ .travis.yml
├─ README.md
├─ appveyor.yml
├─ build
├─ config
├─ coverage
├─ dist
├─ node_modules
├─ package-lock.json
├─ package.json
├─ src
├─ static
└─ test

其中，Electron的主進程和渲染進程在src裏分爲兩個文件夾：main和renderer，Vue的全部代碼就放置在renderer文件夾裏

src
├─ index.ejs
├─ main
│ ├─ index.dev.js
│ └─ index.js
└─ renderer
├─ App.vue
├─ api // 接口
├─ assets
├─ common
├─ components
├─ main.js
├─ mock // 模擬數據
├─ router
├─ store
└─ views // Vue單頁面

其中api、mock、views是我的新建的文件夾，分別存放本地接口、模擬數據以及單頁面。

2、安裝Element UI
打開項目根目錄下的package.json，裏面是項目依賴的一些名稱以及項目版本要求和一些基本配置，能夠看見配置項裏有dependencies和devDependencies兩項，分別表明什麼意思呢？當使用webpack構建項目時，須要明確不一樣環境下所須要的依賴和版本要求：

• dependencies：是在生產環境下使用的一些依賴，由命令行參數--save或者--save-prod寫入，縮寫爲-S
• devDependencies：是僅在開發環境下使用的一些依賴，不會再生產環境下使用，由命令行參數--save-dev寫入，縮寫爲-D

若是你僅僅是引入一個在開發間須要的依賴包，你只須要把它寫入在devDependencies中，在生產環境發佈產品時，是不會加載這些包的。

一、npm安裝Element ui

npm i element-ui -S

而後在生產環境dependencies能夠看見包的版本：

 

若是你整個項目都會用到這個UI框架，就在main.js文件中全局引入，打開src/renderer/main.js：

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

你能夠在App.vue文件中測試是否成功引入

<template>
<div id="app">
<el-button type="danger">測試按鈕</el-button>
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'intercom'
}
</script>

<style>
/* CSS */
</style>