Vue.js Vuetify Nuxt.js 環境構築 デバッグまで

投稿者: Auther | 8 ヶ月 前 | 0 のコメント

〇 Vue.jsの環境の構築

npx create-nuxt-app project_name

http://localhost:3000/

を立ち上げることができる。

〇 デバッグ環境

debugger for chromeをインストール

Ctrl+Shift+X で拡張機能画面を開く

--- ソースマップの設定

nuxt.config.js

  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
  //ここから追加
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'inline-cheap-module-source-map'
      }
  //ここまで追加
    }
  }

lauch.json書き換え

    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Nuxtjs: Launch Chrome",
            "url": "http://localhost:3000", 
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": [ 
                "--remote-debugging-port=9222"
            ]
        }
    ]

デバッグポイント設定

Ctrl+Shift+D でデバッグ画面

緑の三角マーク 

Launch Chrome

Ctrl+Shift+@ で画面下側にコンソールが開く

node.jsを起動中に行う

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(4) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (113) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力