温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Visual Studio 2019配置vue项目的图文教程详解

发布时间:2020-08-29 12:48:05 来源:脚本之家 阅读:438 作者:夏子曦 栏目:编程语言

一,环境安装

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

Visual Studio 2019配置vue项目的图文教程详解

Visual Studio 2019配置vue项目的图文教程详解

安装nodejs,一路next就行了

Visual Studio 2019配置vue项目的图文教程详解

Additonal工具可以不用安装。

Visual Studio 2019配置vue项目的图文教程详解

win+r 输入cmd

Visual Studio 2019配置vue项目的图文教程详解

输入 node -vnpm -v 得到版本信息证明装好了。

Visual Studio 2019配置vue项目的图文教程详解

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

Visual Studio 2019配置vue项目的图文教程详解

Visual Studio 2019配置vue项目的图文教程详解

二,使用VS2019 创建Vue项目

后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件

Visual Studio 2019配置vue项目的图文教程详解

Visual Studio 2019配置vue项目的图文教程详解

你要是熟悉typescript 可以选 第一二个

项目名字可以默认

Visual Studio 2019配置vue项目的图文教程详解

项目目录结构大致如下图

Visual Studio 2019配置vue项目的图文教程详解

右键项目名:选择“在此处打开命令提示符”

Visual Studio 2019配置vue项目的图文教程详解

运行npm的指令 npm install -g(这个指令会把你项目缺失的组件包全部补全)。

Visual Studio 2019配置vue项目的图文教程详解

然后结束后再运行指令npm run serve(这是开发环境调试用的指令,能够在修改页面后自动刷新同步网页)

Visual Studio 2019配置vue项目的图文教程详解

浏览器地址 输入 http://localhost:8081/ 可访问到

Visual Studio 2019配置vue项目的图文教程详解

总结

到此这篇关于Visual Studio 2019配置vue项目的图文教程详解的文章就介绍到这了,更多相关Visual Studio 2019配置vue项目内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI