vs code下载安装

​https://code.visualstudio.com.​

上述链接下载后,点击安装,一路下一步即可,记得最后一步的‘添加到PATH’一定要钩上(默认是钩上的,不要取消掉就行了)

安装必要插件

打开vscode,点击如图所示位置,打开拓展商店。

首先个人觉得比较必要的几个插件(只运行不开发,安装这两个插件就够了):

1、Chinese (汉化插件)

2、live server (调试插件,可以理解为独立运行前端文件的一个服务器)

vue相关基础插件

1、Vetur

2、vue-helper

其他开发插件

1、git history (查询git历史的插件)

2、html css support ( css智能提示插件)

3、html snippets(html 标签智能提示插件)

4、Debugger for Chrome(映射vscode断点到chrome上)

vscode下载安装及项目运行环境部署_工作区

安装项目环境

创建工作区

1、在本地创建文件夹,并用vs打开该文件夹(文件->打开文件夹)

vscode下载安装及项目运行环境部署_工作区_02

2、将文件夹另存为工作区(文件->将工作区另存为)

vscode下载安装及项目运行环境部署_vscode_03


3、保存成功后会发现多了‘工作区’ 三个字

vscode下载安装及项目运行环境部署_vscode_04


之后的项目都可以创建在工作区下(通过工作区可以方便的管理项目)

安装node.js(附带安装npm)

0、简介
node.js是javascript的运行环境,用于执行js代码环境,不需要浏览器,直接使用node.js运行js代码。模拟服务器效果,一定程度上类似tomcat

npm是node.js包管理工具,用于统一管理各种插件包。相当于前端中的maven

1、下载地址:http://nodejs.cn/download/

2、下载后一路下一步安装

3、测试安装是否成功

右键任意项目文件夹,点击‘在集成终端(/CMD)中打开’

vscode下载安装及项目运行环境部署_工作区_05


在终端中输入命令

查看node.js版本号

node --version

查看npm版本号

npm -v

正常显示版本号即安装成功,如未显示版本则安装失败

vscode下载安装及项目运行环境部署_github_06

vscode下载安装及项目运行环境部署_工作区_07

安装git

mac安装git

1、如果是mac电脑并且安装了homebrew可通过homebrew快捷安装git
在终端中使用以下命令即可

brew install git

如果没有安装homebrew,可先安装homeberw 2、直接从AppStore安装Xcode,Xcode集成了Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。

window安装git

下载
https://git-scm.com/download/win​​ 下载后直接点击安装即可

官网安装方法参考

​https://git-scm.com/book/zh/v2/起步-安装-Git​

测试安装

在终端输入:git

弹出命令提示说明安装成功

vscode下载安装及项目运行环境部署_github_08

从github上拉取项目到vscode

1、在工作区下新建一个项目文件夹
2、在该文件夹下右键打开终端
3、在打开的终端中输入命令

git clone 项目github地址

注意这里的地址是指下载地址而不是访问地址,即后缀是.git的地址,可在github如下页面中获取

vscode下载安装及项目运行环境部署_vscode_09

vscode下载安装及项目运行环境部署_github_10


vscode下载安装及项目运行环境部署_github_11


4、下载完成后,在项目文件夹下会发现多了一些项目文件

vscode下载安装及项目运行环境部署_vue_12


5、在最底层文件夹中打开终端

比如我这里是三层文件夹结构(一般就1层):icdc_web/xxxproject/project,项目是在project下的,所以就要在project下右键打开终端,鼠标挪到文件夹名上,右键打开终端,如图所示

vscode下载安装及项目运行环境部署_github_13


6、启动项目

一般项目的readme.md中会说明启动命令,如有特殊的配置,参照自己项目中开发者书写的readme.md。如无特殊配置可参考以下命令启动

(1)下载安装项目依赖包

npm install

安装成功提示如下

vscode下载安装及项目运行环境部署_vue_14


(2)运行服务

npm run serve

服务运行如果有报错,根据报错提示信息解决即可,比如我这里运行报错

根据提示是空格多余导致的,位置在about.vue文件的第4行。点击进入该文件(mac是cmd+左键,window是ctrl+左键)

vscode下载安装及项目运行环境部署_github_15


进入看到第四行前有多个空格,直接将其删除即可,如图光标已删除到最左侧

vscode下载安装及项目运行环境部署_vscode_16


删除后按下cmd+s保存修改(window是ctrl+s),项目会自动识别并继续运行

如下所示,项目运行成功,在浏览器输入http://localhost:8080/ 即可访问项目

vscode下载安装及项目运行环境部署_vscode_17


图中提示的nom run build是打包命令,如果只是运行,无需执行该命令