〇　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を起動中に行う

• タグ:
• vuejs

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

新しいコメント