visual studio code创建Vue项目

迷南。 2022-12-15 12:45 146阅读 0赞

## 1 简介 ##

VisualStudioCode是一个轻量级但功能强大的源代码编辑器，它运行在桌面上，可用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node.js并有丰富的扩展语言的其他语言（如C++，C，java，python，php，go）和运行时（如.NET和Unity）的支持。

## 2 下载 ##

visual studio code的下载地址：[https://code.visualstudio.com/docs/?dv=win][https_code.visualstudio.com_docs_dv_win]

## 3 安装 ##

安装过程见：[https://blog.csdn.net/weixin\_37590454/article/details/89436577][https_blog.csdn.net_weixin_37590454_article_details_89436577]

## 4 插件 ##

安装成功后的界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]  
进行前端vue的开发，建议安装的插件有：Live Server、Vetur、vue-helper。

## 5 新建项目 ##

*  1 在自己的电脑上新建文件夹，例如：project\_es
 *  2 用VisualStudioCode打开这个文件夹  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]
 *  3 把这个文件夹保存成工作区  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 3]

## 6 在项目中创建文件夹和文件 ##

*  1 创建文件夹  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 4]
 *  2 创建文件  
    右击文件夹demo：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 5]  
    新建一个hello.html，其内容如下：

<html>
        <head>
            <title>Hello World</title>
        </head>
    
        <body>
            <h1>hello Visual Studio Code</h1>
        </body>
    </html>

然后右击其任意位置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 6]  
点击“Open with Live Server”：  
![在这里插入图片描述][20201016180230753.png_pic_center]  
至此，用visual studio code创建项目的过程就结束了。

[https_code.visualstudio.com_docs_dv_win]: https://code.visualstudio.com/docs/?dv=win
[https_blog.csdn.net_weixin_37590454_article_details_89436577]: https://blog.csdn.net/weixin_37590454/article/details/89436577
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2a0dfa4542a644ecbb8b8a4275702381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/833db1f504774e138de4ff200dbaea2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/fc520f8163934ba39ec16ac3201df7c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/2cf898158d2c49fdb2d00cf32f7bea90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/c81264702538429a84f9aa84107b17a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/f8ea8433295c43daaecec6832158e646.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/2be235c03ab04e6da79644f7aeb6ef1f.png
[20201016180230753.png_pic_center]: /images/20221123/218d733df8454d099fcf05caf95e037d.png