vscode 插件開(kāi)發(fā) + vue的操作方法
如果我們需要在vscode中嵌入自己開(kāi)發(fā)的vue頁(yè)面就需要以下的操作
1.把開(kāi)發(fā)好的vue項(xiàng)目打包,如果打包出來(lái)的vue執(zhí)行是空白頁(yè),就需要看看之前我寫(xiě)的文章,vue 3 clie打包配置
-這里要注意的是,要確保vue項(xiàng)目里面的public有一個(gè)index用作插件打開(kāi)時(shí)的模板,等一下需要做base的特?fù)Q,不然插件是不知道網(wǎng)頁(yè)的根目錄在哪里
index.html
-vue.config.js的配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>Test</title> <base href="/"> </head> <body> <div id="app"></div> </body> </html>
-vue.config.js的配置
const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { // 基本路徑 publicPath: './', // 輸出文件目錄 outputDir: 'dist', pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html', chunks: ['chunk-vendors', 'chunk-common', 'index'] } }, lintOnSave:false, configureWebpack: { externals: { } }, chainWebpack: (config)=>{ //修改文件引入自定義路徑 config.resolve.alias .set('@', resolve('src')) .set('~assets',resolve('src/assets')) // .set('ide',resolve('src/ide')) } }
2.把打包好的整個(gè)dist考到vscode插件里面
-vscode插件的命令行觸發(fā)函數(shù)里面,需要這樣寫(xiě)
const panel = vscode.window.createWebviewPanel( 'testWebview', // viewType "WebView演示", // 視圖標(biāo)題 vscode.ViewColumn.One, // 顯示在編輯器的哪個(gè)部位 { enableScripts: true, // 啟用JS,默認(rèn)禁用 retainContextWhenHidden: true, // webview被隱藏時(shí)保持狀態(tài),避免被重置 } ); //加載本地html頁(yè)面 let srcPath = path.join(context.extensionPath, 'dist'); // console.log(srcPath) const srcPathUri = vscode.Uri.file(srcPath); // console.log(srcPathUri.path) const baseUri = panel.webview.asWebviewUri(srcPathUri); // console.log(baseUri) const indexPath = path.join(srcPath, 'index.html'); // console.log(indexPath) var indexHtml = fs.readFileSync(indexPath, "utf8"); indexHtml = indexHtml.replace('<base href=/ >', `<base href="${String(baseUri)}/">`); // console.log(indexHtml) panel.webview.html = indexHtml;
這樣,打開(kāi)的頁(yè)面就能正確顯示
總結(jié)
到此這篇關(guān)于vscode 插件開(kāi)發(fā) + vue的操作方法的文章就介紹到這了,更多相關(guān)vscode 插件開(kāi)發(fā) vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 詳解vscode中vue代碼顏色插件
- 推薦VSCode 上特別好用的 Vue 插件之vetur
- VsCode工具開(kāi)發(fā)vue項(xiàng)目必裝插件清單(推薦!)
- Vue項(xiàng)目vscode 安裝eslint插件的方法(代碼自動(dòng)修復(fù))
- VSCode Vue開(kāi)發(fā)推薦插件和VSCode快捷鍵(小結(jié))
- VSCode提高 Node 和 Vue 開(kāi)發(fā)效率的插件推薦
- 解決vscode?Better?Comments插件在vue文件中不顯示相對(duì)應(yīng)的顏色的問(wèn)題
- vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))
- Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件推薦
相關(guān)文章
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下2021-01-01在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作
這篇文章主要介紹了vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定)
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽(tīng)
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽(tīng)事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04