最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vscode插件開發(fā)嵌入vue的操作方法

這篇文章主要講解了vscode插件開發(fā)嵌入vue的操作方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為輕質(zhì)隔墻板行業(yè)客戶提供了網(wǎng)站建設(shè)服務(wù)。

如果我們需要在vscode中嵌入自己開發(fā)的vue頁面就需要以下的操作

1.把開發(fā)好的vue項目打包,如果打包出來的vue執(zhí)行是空白頁,就需要看看之前我寫的文章,vue 3 clie打包配置

-這里要注意的是,要確保vue項目里面的public有一個index用作插件打開時的模板,等一下需要做base的特換,不然插件是不知道網(wǎng)頁的根目錄在哪里

index.html

-vue.config.js的配置



 
  
  
  
  
  Test
  
 
 
  

-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.把打包好的整個dist考到vscode插件里面

-vscode插件的命令行觸發(fā)函數(shù)里面,需要這樣寫

const panel = vscode.window.createWebviewPanel(
        'testWebview', // viewType
        "WebView演示", // 視圖標(biāo)題
        vscode.ViewColumn.One, // 顯示在編輯器的哪個部位
        {
          enableScripts: true, // 啟用JS,默認禁用
          retainContextWhenHidden: true, // webview被隱藏時保持狀態(tài),避免被重置
        }
      );
      //加載本地html頁面
      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('', ``);

      // console.log(indexHtml)
      panel.webview.html = indexHtml;

這樣,打開的頁面就能正確顯示

看完上述內(nèi)容,是不是對vscode插件開發(fā)嵌入vue的操作方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


新聞標(biāo)題:vscode插件開發(fā)嵌入vue的操作方法
地址分享:http://fisionsoft.com.cn/article/jdhhde.html