您当前的位置: 首页 >  vscode

wu@55555

暂无认证

  • 2浏览

    0关注

    201博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

wu@55555 发布时间:2020-12-21 10:10:45 ,浏览量:2

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上) 在这里插入图片描述

安装项目环境 创建工作区

1、在本地创建文件夹,并用vs打开该文件夹(文件->打开文件夹) 在这里插入图片描述

2、将文件夹另存为工作区(文件->将工作区另存为) 在这里插入图片描述 3、保存成功后会发现多了‘工作区’ 三个字 在这里插入图片描述 之后的项目都可以创建在工作区下(通过工作区可以方便的管理项目)

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

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

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

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

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

3、测试安装是否成功 右键任意项目文件夹,点击‘在集成终端(/CMD)中打开’ 在这里插入图片描述 在终端中输入命令 查看node.js版本号

node --version

查看npm版本号

npm -v

正常显示版本号即安装成功,如未显示版本则安装失败 在这里插入图片描述

在这里插入图片描述

安装git mac安装git

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

brew install git

如果没有安装homebrew,可先安装homeberw 可参考我另外一篇博客: https://blog.csdn.net/qq_24950043/article/details/110677255

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 弹出命令提示说明安装成功 在这里插入图片描述

从github上拉取项目到vscode

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

git clone 项目github地址

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

在这里插入图片描述 在这里插入图片描述 4、下载完成后,在项目文件夹下会发现多了一些项目文件 在这里插入图片描述 5、在最底层文件夹中打开终端 比如我这里是三层文件夹结构(一般就1层):icdc_web/xxxproject/project,项目是在project下的,所以就要在project下右键打开终端,鼠标挪到文件夹名上,右键打开终端,如图所示 在这里插入图片描述 6、启动项目 一般项目的readme.md中会说明启动命令,如有特殊的配置,参照自己项目中开发者书写的readme.md。如无特殊配置可参考以下命令启动

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

npm install

安装成功提示如下 在这里插入图片描述 (2)运行服务

npm run serve

服务运行如果有报错,根据报错提示信息解决即可,比如我这里运行报错 根据提示是空格多余导致的,位置在about.vue文件的第4行。点击进入该文件(mac是cmd+左键,window是ctrl+左键) 在这里插入图片描述 进入看到第四行前有多个空格,直接将其删除即可,如图光标已删除到最左侧 在这里插入图片描述 删除后按下cmd+s保存修改(window是ctrl+s),项目会自动识别并继续运行 如下所示,项目运行成功,在浏览器输入http://localhost:8080/ 即可访问项目 在这里插入图片描述 图中提示的nom run build是打包命令,如果只是运行,无需执行该命令

关注
打赏
1664985904
查看更多评论
立即登录/注册

微信扫码登录

0.0561s