一 环境的搭建
1.1常见前端开发ide
1.2 安装vs.code
1.下载地址:Visual Studio Code - Code Editing. Redefined
![](https://file.jishuzhan.net/article/1697980549110435841/bfb5b5cf2a3342caa2e3840fd7e5bf0e.png)
2.进行安装
![](https://file.jishuzhan.net/article/1697980549110435841/7b012920e2bc47d19f9c3fd12be684f2.png)
1.2.1 vscode的中文插件安装
1.在搜索框输入"chinese"
![](https://file.jishuzhan.net/article/1697980549110435841/4dda9df191324ffa8734cd8e372479f4.png)
2.安装完成重启,如下变成中文
![](https://file.jishuzhan.net/article/1697980549110435841/a5d18c13007f40e68db1a2c661796a7f.png)
1.2.2 修改工作区的颜色
![](https://file.jishuzhan.net/article/1697980549110435841/3ad18f5631b147ea8d0e67a9d6af1ff3.png)
选中[浅色]
![](https://file.jishuzhan.net/article/1697980549110435841/960a3ea5836c42efa2c8cc63936d053c.png)
1.2.3 vscode的live server插件安装
![](https://file.jishuzhan.net/article/1697980549110435841/568a5d52e3ef4727b83c7a09b7d0cf2a.png)
1.2.4 vscode的vetur插件安装
![](https://file.jishuzhan.net/article/1697980549110435841/b79bb3e670174af78a715a980e881ac7.png)
1.2.5 vscode的vue-helper插件安装
![](https://file.jishuzhan.net/article/1697980549110435841/7b7a4ff3c99244f883fb1d5bd674a2d4.png)
1.3 idea中安装vue.js
1.在idea中的plugins区域搜索"vue" 开始进行安装
2.安装效果
二 vscode搭建项目
2.1 创建项目
1.在本地新建一个文件夹
vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如project_xxxx。
然后打开vscode,再在vscode里面选择 File -> Open Folder 打开文件夹,这样才可以创建项目。
2.在vuecode中打开此文件夹
打开文件夹后,选择"文件 -> 将工作区另存为...",为工作区文件起一个名字,存储在刚才的文件夹下即可
![](https://file.jishuzhan.net/article/1697980549110435841/be7c20ba3bf04c4e80f482fb90fd97ef.png)
打开工作空间
3.将文件夹设置为工作区
![](https://file.jishuzhan.net/article/1697980549110435841/d372ce7884b14f8d9ee21c83d414b1af.png)
2.2 创建文件
1.创建hello.html
![](https://file.jishuzhan.net/article/1697980549110435841/db5a2a7fd88b40ce865c6d614e96dd0c.png)
2.3 运行访问
![](https://file.jishuzhan.net/article/1697980549110435841/195a207e5231492fa42bdd63ef7c536f.png)
![](https://file.jishuzhan.net/article/1697980549110435841/796a6a6747814ddd9633d2a9614ee286.png)