⑴ 前端dist打包會把svn版本控制文件打進去
1、進SVN刪除對應目錄
2、進項目點更新,此時會報沖突
3、點擊項目,找到要刪除的目錄SVN還原它
4、運行或者打包項目重新生成對應目錄
5、右鍵ignore目錄
經過上面這些步驟,重新提交就沒有這個目錄的內容了
⑵ 前端使用@vue/[email protected]打包,路由懶載入vue文件打包缺失,年初2月份的時候還能正常打包
不要 使用3.5以上的版本 很容易出現問題
你應該 使用穩定版
給你個 建議 更換版本
⑶ 前端開發常用哪些工具軟體
前端開發的編譯器在選擇上還是很多的。在學校里,老師主要講三個前端開發軟體:
1、WebStorm
幫助編寫HTML、CSS、Less、Sass和Stylus代碼,並且支持Node.js和主流框架,如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。
2、IntelliJ idea
頁面很簡單,乍一看像是一個記事本,它也確實可以當記事本用。有很多特色插件可以使用,支持多種編程語言的語法高亮顯示,具有代碼折疊功能。
2、HBuilderX
HBuilderX是DCloud(數字天堂)推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本,具有輕便、適合vue框架的特點。
⑷ 怎麼將網頁打包成桌面應用(web前端頁面
在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平台】的技術越來越火。為什麼會這么火?因為軟體開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平台運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨平台技術的不被看好,如今隨著手機、電腦硬體的發展而快速發展。這一切,幾乎由HTML5技術推動,當然,JavaScript 這個語言,是最大的功臣。
基於 HTML5 的跨平台技術比較出名的有 PhoneGap、Cordova,常常用於開發 webapp;還有 Egret、Cocos-creator、Unity 等,常用於開發游戲;還有基於 Node.js 的 nw.js,用於開發桌面應用,以及 Electron,一款比 nw.js 還強大的用網頁技術來開發桌面應用的神器。
其實,以上都是廢話,現在進入主題:怎麼用 Electron 將網頁打包成 exe 可執行文件!
假設:
1、你已經安裝並配置好了 node.js (全局安裝)
2、你已經用 npm 安裝了 electron (全局安裝)
3、你已經寫好了前端網頁(html、css、javascript 這些,或者基於這些的前端框架寫好的網頁)
4、以上三點看不懂的,趕緊去網路。。。
你如果具備了以上的假設,請繼續往下看:
1、找到你的前端網頁項目文件夾,新建 package.json、main.js、index.html 三個文件(註:其中的 index.html 是你的網頁首頁)
你的項目目錄/
├── package.json
├── main.js
└── index.html
2、在 package.json 中添加如下內容
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}
3、在 main.js 中添加下面的內容,這個 main.js 文件就是上面 package.json 中的 "main"鍵 的值,所以可根據需要修改
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
4、如果你的網頁首頁的文件名不是 「index.html」,那麼請在 main.js 中將其中的 'index.html' 修改為你的網頁首頁名
5、打開 DOS,cd 到你的項目目錄(或直接在你的項目目錄下空白的地方 shift+滑鼠右鍵,然後點擊在此處打開命令窗口,這里看不懂的,唉,網路吧少年)
6、在上一步的 DOS 下,輸入npm install electron-packager -g全局安裝我們的打包神器
npminstallelectron-packager-g
7、安裝好打包神器後,還是在上一步的 DOS 下,輸入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可開始打包
electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles
這個命令什麼意思?藍色部分可自行修改:
electron-packager .可執行文件的文件名--win --out打包成的文件夾名--arch=x64位還是32位--version版本號--overwrite --ignore=node_moles
以上是最簡單的打包方式,至於怎麼修改窗口大小、菜單欄怎麼加、怎麼調用系統API這些,就給你慢慢去研究Electron了。
如果你打包總是不成功,覺得很煩,同時對擴展功能沒什麼要求的話,
裡面有我已將內容為 hello,world 的 index.html 網頁通過 Electron 框架打包為 windows 環境下的桌面應用。
現只需將你的網頁前端項目復制到 /resources/app/project 目錄下,雙擊 exe 文件即可以桌面應用的方式運行你的網頁。
⑸ 前端ui組件打包以後怎麼看線上運行版本
只需要看UI設計師有沒有進行版本註解,直接看註解就行了
⑹ 前端html和js可以做什麼
最基本的就是開發網頁啦,html寫網頁,js實現網頁交互效果,除此之外,也可以開發桌面GUI程序,下面我簡單介紹一下如何使用html+js開發出一個簡單的桌面程序:
1.這里為了更好的說明問題,我新建了一個html文件,就是一個簡單的登錄頁面,源碼如下,非常簡單,就是兩個輸入框和禪殲卜一個登錄按鈕:
瀏覽器運行的效果如下:
2.接著就可以將這個html網頁打包為桌面應該程序,這里需要用到nodejs的Electron功能,下面我具體介紹一下主要步驟及截圖:
首先,需要安裝本地node環境,這個直接到官網上下載就行,如下,選擇適合自己平台的版本即可:
安裝完成後,需要下載一下electron和electron-packager這2個包,後面的打包需要藉助這2個包,命令「npminstallelectronelectron-packager」,如下:
接著新建一個文件夾,將剛才的html文件拖拽進去,同時新建一個package.json文件和一個main.js文件,如下:
package.json文件配置如下,主要指明應用名稱、版本號及打包配置文件:
main.js文件配置如下,這里需要指明打包程序的入口文件,網上也有詳細配置過程:
最後就是在打包程序了,命令「electron-packager.APP--win--outAppDir--arch=x64--electron-version=3.0.10--overwrite」,打包的過程非常快,這里主要需要指明打包的應用名稱、輸出目錄、版本號、位數等:
接著就可以在輸出目錄AppDir中找到打包好的應用程序APP.exe,直接雙擊就能打開,截圖如下,和瀏覽器效果差不多:
至此,我們就完成了利用html+js來開發一個簡單的桌面GUI程序。總的來說,整個過程不難,就是步驟有些繁瑣,只要你熟悉一下上面的配置過程,多操作幾遍,很快就能掌握的,當改衫然,你也可以使用html+js開發移動應用,像HBuilder等,網上也有相關教程和資料,介紹的非常詳細,感興趣的話,可以搜一下,希望以賀穗上分享的內容能對你有所幫助吧,也歡迎大家評論、留言。