IntelliJ IDEA編輯器配置vue高亮顯示
本文實例為大家分享了IntelliJ IDEA編輯器配置vue高亮顯示的具體實現(xiàn)方法,供大家參考,具體內(nèi)容如下
1.查找IntelliJ IDEA是否已經(jīng)安裝vue.js
注:之前有寫過關于使用cmd命令搭建vue項目的全部過程,詳情在此
打開IDEA編輯器,快捷鍵Ctrl+Alt+S打開Settings(設置)------>Plugins------>搜索vue.js(圖中已經(jīng)安裝,沒有安裝的點擊Install JetBrains plugins...進行安裝即可),安裝成功后重啟IDEA。

2.IDEA安裝好vue.js后,接著Ctrl+Alt+S打開設置------>Editor------>File Types------>HTML,點擊右側(cè)+號,添加*.vue,最后點擊Apply。

3.設置JS
繼續(xù)Ctrl+Alt+S(Settings)------>Language & Frameworks------>JavaScript選擇ECMAScript 6和Prefer Strict mode。

4.用vue-cli構建和運行項目
打開命令行工具cmd(Window+R),或者在IDEA中的Terminal里面進入想要構建項目的目錄,輸入vue init webpack mypro(mypro是自己想要構建的項目名稱),回車后如下圖:

5.進入構建之后的項目文件夾:cd mypro,輸入npm install ,項目文件夾中會出現(xiàn)node_modules文件夾。

6.最后執(zhí)行npm run dev(運行項目之前記得把config文件夾中的index.js中的autoOpenBrowser設置為true,這樣的話npm run dev瀏覽器會自動打開項目)。運行結(jié)果如下圖:

7.在IDEA中新建.vue格式的文件
開發(fā)的時候IDEA編輯器中是沒有.vue格式文件的,所以需要在編輯器中設置。
接著Ctrl+Alt+S(Settings)------>Editor------>File and Code Templates

設置完成后就可以直接在項目中新建.vue格式文件了~~~

新建的home.vue結(jié)果:

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關于vue的npm run dev和npm run build的區(qū)別介紹
這篇文章主要介紹了關于vue的npm run dev和npm run build的區(qū)別介紹,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01

