IDEA 设置 vue 支持开发

谁践踏了优雅 2023-09-30 05:15 4阅读 0赞

一、IntelliJ IDEA支持.vue文件  
安装vue.js  
file --> settings --> plugins，输入vue，点击搜索结果里的vue.js右边的install按钮，安装成功后重启idea，这样idea就能识别.vue文件了  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16]

设置vue新建文件模板  
file–>setting–>editor–>file and code Templates，选择Vue File，然后可以在右边框中编辑默认模板内容，编辑完点击“ok”。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 1]

这样就可以通过new选项创建.vue文件  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_16_color_FFFFFF_t_70_g_se_x_16]

二、idea设置vue语法提示  
File->setting->Editor->Inspections，右侧找到HTML->Unknown HTML tag attribute，在右边Options->Custom HTML tag attributes里面添加如下代码:

@tap
    @tap.stop
    @tap.prevent
    @tap.once
    @click
    @click.stop
    @click.prevent
    @click.once
    @change
    @change.lazy
    @change.number
    @change.trim
    @on
    @blur
    @fous
    @submit
    scoped
    v-model
    v-model.number
    v-model.trim
    v-for
    v-text
    v-html
    v-show
    v-if
    v-else-if
    v-else
    v-pre
    v-bind
    v-bind:class
    v-bind:style
    v-bind:id
    v-bind:href

如下图所示：

File->setting->Editor->File Types里面找到HTML，在Registered Patterns里面添加\*.vue即可，如图所示：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 2]

效果  
![在这里插入图片描述][d0dbec23787f4031b061066639f41aee.png]

三、idea代码提示快捷键设置  
File->setting->keymap->Main Menu  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
四、idea vue项目运行  
Edit Configurations —> 点击 “+”选择npm —>配置Command 为“run" —>在配置Scripts 为“dev"  
![在这里插入图片描述][078cf18efde64300a2217a7747a32493.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
配置后启动  
![6320fd2b220149239e600ff9b4989665.png][]  
启动效果：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 8]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 9]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d0a028cd60564b46a25cf7724e9ec90b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/c3a555664f2d49ae90952076fa2ffdcc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/aabf402c06dc4d19998ccd52f1b26352.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/fe45dbd528ef46ba93401c5f0cb4702e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[d0dbec23787f4031b061066639f41aee.png]: https://img-blog.csdnimg.cn/d0dbec23787f4031b061066639f41aee.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/839ec44acce9432fb94a2ebcf7d72f2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[078cf18efde64300a2217a7747a32493.png]: https://img-blog.csdnimg.cn/078cf18efde64300a2217a7747a32493.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/6e2bd814fb464aa9b069e3f65fd2313c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/b1e15e4df3464220b97de7d3ff636102.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/f461b64edbd147deb8f54cfa413daf40.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/bc289d496508480ca6858ad66933b527.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[6320fd2b220149239e600ff9b4989665.png]: https://img-blog.csdnimg.cn/6320fd2b220149239e600ff9b4989665.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/73f54fd707dc442096b2dfaf21a7ab39.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASVTlsI_pg60u_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/daeb3bf8b98e488ca3ebba730c1ff21c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTlsI_pg60u,size_20,color_FFFFFF,t_70,g_se,x_16