VUE.JS的坑@[email protected]

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenzhuyu/article/details/82319349

现在已经是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//启动服务器

Debug断点调试

新建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/ElementPlugin
Preferences | Languages & Frameworks | JavaScript
* 建议取消勾选 : only type-based completion
* 语言版本选择ES6

使用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