本文實(shí)例為大家分享了IntelliJ IDEA編輯器配置vue高亮顯示的具體實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下

1.查找IntelliJ IDEA是否已經(jīng)安裝vue.js

 注:之前有寫過關(guān)于使用cmd命令搭建vue項(xiàng)目的全部過程，詳情在此

打開IDEA編輯器，快捷鍵Ctrl+Alt+S打開Settings(設(shè)置)------>Plugins------>搜索vue.js（圖中已經(jīng)安裝，沒有安裝的點(diǎn)擊Install JetBrains plugins...進(jìn)行安裝即可），安裝成功后重啟IDEA。

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

3.設(shè)置JS

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

4.用vue-cli構(gòu)建和運(yùn)行項(xiàng)目

打開命令行工具cmd(Window+R)，或者在IDEA中的Terminal里面進(jìn)入想要構(gòu)建項(xiàng)目的目錄，輸入vue init webpack mypro(mypro是自己想要構(gòu)建的項(xiàng)目名稱)，回車后如下圖：

5.進(jìn)入構(gòu)建之后的項(xiàng)目文件夾：cd mypro，輸入npm install ，項(xiàng)目文件夾中會(huì)出現(xiàn)node_modules文件夾。

6.最后執(zhí)行npm run dev(運(yùn)行項(xiàng)目之前記得把config文件夾中的index.js中的autoOpenBrowser設(shè)置為true,這樣的話npm run dev瀏覽器會(huì)自動(dòng)打開項(xiàng)目)。運(yùn)行結(jié)果如下圖：

7.在IDEA中新建.vue格式的文件

開發(fā)的時(shí)候IDEA編輯器中是沒有.vue格式文件的，所以需要在編輯器中設(shè)置。

接著Ctrl+Alt+S(Settings)------>Editor------>File and Code Templates

設(shè)置完成后就可以直接在項(xiàng)目中新建.vue格式文件了~~~

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論