Mac使用VSCode配置vue环境

清疚 2023-07-05 11:54 2阅读 0赞

**一、配置环境**

1.  VSCode官网下载安装Mac VSCode（默认安装的是英文版）
2.  VSCode汉化  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 1]  
    输入 “configure display language” 然后点击确定后，重启VSCode工具
3.  安装vue插件vetur，实现支持vue文件的代码高亮（选择extends -> Vetur）  
    ![在这里插入图片描述][20200214203410920.png]
4.  打开VSCode控制台  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 2]
5.  浏览器访问 http://localhost:8080  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200214203054633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200214203156875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY=,size_16,color_FFFFFF,t_70
[20200214203410920.png]: https://img-blog.csdnimg.cn/20200214203410920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200214203635619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200214203721247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9sZWlsZWk2NjY=,size_16,color_FFFFFF,t_70