现在已经是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及自定义扩展
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