VUE.JSのピット@[email protected]

     VUE-CLI3.0   ,        3.0,  2.0

インストール

sudo npm install -g @vue/cli
vue create my-project-name
cd my-project-name
vue add element
vue add axios
vue ui//  vue    ,        
npm run serve//     

デバッグブレークポイント

  JavaScript    ，       url，  Remote url  :
 URL   : http://localhost:8080
        
              

   chrome          ,        Vue Tool.

//  ,     ,        ,cpu       
Preferences | Build, Execution, Deployment | Debugger | Live Edit
  update app in chrome    chrome  

Webpackパス別名

//    node_modules/@vue/cli-service/webpack.config.js,           
//   vue.config.js  webpack         webpack.config.js
// vue.config.js   webpack.config.js:
//Preferences | Languages & Frameworks | JavaScript | Webpack       webpack.config.js

//vue.config.js
module.exports = {
  configureWebpack: require('./webpack.config.js')
}

//webpack.config.js
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': path.resolve(__dirname, '../src/components')
    }
  },

}

コードヒントの注意
Webpackパスエイリアス設定は必ず正しいjetbrainsプラグイン:element@https://github.com/jiaolong1021/ElementPluginPreferences|Languages&Frameworks|JavaScript*推奨チェックアウト解除:only type-based completion*言語バージョン選択ES 6
Jqueryおよびカスタム拡張機能の使用
https://www.jianshu.com/p/1112e0239515

npm install webpack jquery --save

// webpack.config.js
const webpack = require('webpack')
module.exports = {
     plugins: [
        new webpack.ProvidePlugin({//  IDE     ProvidePlugin    
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
}

//.eslintrc.js
module.exports = {
  env: {
      jquery: true
  },
}

     APP.vue  jq   (      ),       $

import 'hammerjs' //npm install 
import 'jquery-mousewheel'//npm install 
import '@js/zoom-marker'//public/js/zoom-marker.js