Vue开发工具安装

一、安装VSCode

VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。

1.进入vscode官网(https://code.visualstudio.com/Download)

2.双击或者打开下载的.exe文件弹出安全警告框,选择运行 之后弹出提示 :当前按住已管理形式运行 如果你所有vs code 代码请访问官网 

点击确认

Vue开发工具安装_第1张图片Vue开发工具安装_第2张图片

2.第一步操作完之后会弹出,选择我接受协议点击下一步  

Vue开发工具安装_第3张图片.

3.选择安装目录位置

Vue开发工具安装_第4张图片

4.选择开始菜单文件夹  这里可以默认

Vue开发工具安装_第5张图片

5.进入选择其他任务界面,之后会弹出安装就绪 点击安装等待几秒就会安装成功

Vue开发工具安装_第6张图片

6.运行vscode

Vue开发工具安装_第7张图片

二、vscode插件安装

进入vscode官网插件商店(https://marketplace.visualstudio.com/VSCode)

我们现在要使用的事Vue 所以找到Vue组件Vetur 

Vue开发工具安装_第8张图片

点击install会自动弹出vscode 在vscode 中在点击install 

Vue开发工具安装_第9张图片

vscode 中vue相关插件 有需要的可以去商店安装

  • vetur 语法高亮、智能感知
  • VueHelper vue代码碎片
  • Vue 2 Snippets vue2代码碎片

三、导入工程

打开vscode

Vue开发工具安装_第10张图片

点击Open Folder 或者 ctrl+k,ctrl+o  导入构建好的Vue项目 直接导入文件夹即可

Vue开发工具安装_第11张图片

你可能感兴趣的:(VUE学习)