visual studio2019工具创建并运行vue项目

一 、安装环境
Vue项目一切基于Node.js,so 必须先安装NodeJS,附下载地址https://nodejs.org/zh-cn/

进去之后选择合适的下一个,按着提示安装就行,装完之后win键+R,输入cmd

查看一下是否真成功了cmd里面直接输入:

node -v 和 npm -v  得到如下图版本类似的信息证明装好了

二、新建Vue项目
我的vue项目是由Visual Studio 2019搭建,所以教程是带你用VS2019的哦,虽然市面上大部分是VsCode搭建,但我们之前项目也是基于VS2019的所以直接还是用了一样的,毕竟用熟了比较快,而且VS2019这么强大,啥都能写。

附上下载链接https://visualstudio.microsoft.com/zh-hans/

1)确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs

2)确保没毛病就开始建项目 :左上角——文件——新建——项目——输入自己的项目名,选好准备存哪,妥了

3)右键项目名:选择“在此处打开命令提示符” 运行npm的指令 npm install -g(这个指令会把你项目缺失的组件包全部补全,可以记个小本本),然后结束后再运行指令npm run serve(这是开发环境调试用的指令,能够在修改页面后自动刷新同步网页,记小本本)

4)如果上面一切顺利的话,你就可以Hello World了

按他的提示打开浏览器输入localhost:8080(一般是这个地址,如果被占用了他会自动切8081等,所以最终你还是看他提示)

### 如何在 Visual Studio Code 中运行 Vue 项目 为了成功地在 Visual Studio Code (VS Code) 中启动运行 Vue 项目,需遵循一系列配置步骤。虽然官方文档提供了详细的指导[^1],这里将概述主要流程。 #### 安装必要的扩展 安装一些有助于开发体验的 VS Code 扩展是明智的选择。对于 Vue 开发者来说,`Vetur` 是一个非常受欢迎的选择,它支持语法高亮、智能感知和其他特性来增强编辑器的功能[^2]。 #### 创建新的 Vue 项目 如果尚未创建 Vue 应用程序,则可以利用 `Vue CLI` 来快速搭建环境。通过命令行工具执行如下指令: ```bash npm install -g @vue/cli vue create my-project-name cd my-project-name ``` 这会初始化一个新的 Vue 项目结构,自动处理依赖项管理等问题。 #### 配置 VS Code 工作区设置 打开刚刚创建好的文件夹作为工作区,在 `.vscode/settings.json` 文件内添加特定于项目的配置选项。例如,指定 ESLint 的路径或调整 Prettier 插件的行为等。 #### 启动开发服务器 回到终端窗口,继续输入以下命令以启动本地开发服务器: ```bash npm run serve ``` 此时应该可以在浏览器中访问默认地址(通常是 http://localhost:8080),看到新建立的应用正在正常运作。 #### 调试准备 确保已按照指南中的指示设置了 Chrome Debugger 或其他合适的调试插件,以便能够有效地排查错误和优化性能表现。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值