現在已經是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: 程式碼提示注意
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