手把手教你創建electron+vue項目


electron可以結合前端的很多框架來進行快速的開發。在這里只講一種electron結合vue並且使用前端的elementui來快速搭建一個項目頁面。

第一步、創建electron

    以管理員身份運行cmd,想好要把項目存放的位置,並cd進去(我一般關於項目的任何東西都不會用中文,代碼注釋除外)。

    在cmd中運行:

      1 vue init simulatedgreg/electron-vue eleproject01

    

 

 

       (1)eleproject01是項目的名字(不能有大寫字母)

    (2)sass需要的輸入y

    (3) 下面axios、vue-electron、vue-router、vuex、vuex-electron這五項有不需要的就把光標移動到那一項,按空格鍵就會把 * 去掉。我這里沒有安裝后兩項。然后按回車鍵接着進行下面的步驟。

    (4)這里的ESLintwo和Karma+Mocha還有Spectron+Mocha我都沒有安裝,需要安裝的寫y(ESLint最好別安裝要不然會讓你很痛苦

   這是創建成功界面

      

2、接下來是安裝命令

  請看這三句話

  

 

(1)cd 到項目目錄

 

 

   

(2)執行npm install(你用yarn install或者用cnpm install都行啊,但是前提是yarn和cnpm命令你要先安裝)

(3)再執行npm run dev(如果第二步你是用yarn install命令的話這一步就得用 yarn run dev啟動程序)。

(4)運行成功界面

  

3、安裝sass

 

 

 

cnpm install sass-loader node-sass –save-dev

 

 4、 安裝element -ui

cnpm i element-ui –S

  4.1、 在main.js中加入

      

5、  在APP.vue中引入一個elementui的一個按鈕控件

 <el-button type="primary">主要按鈕</el-button>

6、最后完成界面

  

 

 

7、electron學習資料免費獲取

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM