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

一，环境安装

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

安装nodejs,一路next就行了

Additonal工具可以不用安装。

win+r 输入cmd

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

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

二，使用VS2019 创建Vue项目

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

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

项目名字可以默认

项目目录结构大致如下图

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

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

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

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

总结

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

赞 (0)

相关推荐

  • 浅析Visual Studio Code断点调试Vue

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体.个人还是更加习惯于断点调试.这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值. 设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS C

  • 浅谈Visual Studio 2019 Vue项目的目录结构

    Visual Studio 2019 Vue项目 创建成功后可看到如下结构 Visual Studio 2019配置vue项目 具体文件结构如下图 模版使用 入口文件: public/index.html   和 src/main.js 总结 到此这篇关于Visual Studio 2019 Vue项目 目录结构的文章就介绍到这了,更多相关visual studio 2019 vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

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

    一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你

  • visual studio code 配置C++开发环境的教程详解 （windows 开发环境）

    0 引言 最近帮GF(不幸变成ex了)配置C++开发环境,一开始想给她装个visual studio13完事,但是一想到自己安装以及使用时的诸多麻烦,就有点退却,觉得没有这个必要.正好了解到vscode大行其道,决定按照官网指示配置一版.由于本人非计算机科班出身,对编译原理了解不多,在配置环境的时候遇到了一些麻烦,参照网上的诸多教程,最后发现还是官网比较靠谱,所以结合自己配置的教训,写个帖子,希望能够帮到大家. 1 下载安装vscode 下载网址链接如下. https://code.visual

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • Android Studio 如何删除/新建一个module(图文教程详解)

    一.删除一个module PS:此方法也会将该module从你的硬盘中删除 如果直接右键会发现没有delete选项 1.选中想要删除的module,右键点击Open Module Settings选项 2.选中移除 3.点击yes 4.注意点击ok 5.小绿点消失说明操作成功啦 6.右键delete 二.新建一个module 1.file-new–new module 2.选择新建的moudle类型 3.编辑应用名称和module名称 4.可直接finish不做修改 附页 1.Android s

  • Visual Studio 2019配置qt开发环境的搭建过程

    宇宙第一IDE Visual Studio 配置 Qt 开发环境

  • 在Visual Studio 2019中修改项目名的方法

    1.需求场景 场景一:开始创建项目时,瞎起了一个名字,等后面开发了一部分功能后突然想改名. 场景二:想从一个老项目的基础上开发一个新项目. 2.操作步骤 2.1 重命名解决方案 [解决方案]右键选择[重命名],将OldSlnName重命名为NewSlnName 2.2 重命名项目名 [项目(OldProject)]右键选择[重命名],将OldProject重命名为NewProject 2.3 修改程序集名称及命名空间 [项目(NewProject)]右键选择[属性] 2.4 全局替换项目名 在整

  • Android Studio 新建项目通过git上传到码云图文教程详解

    Android Studio 新建项目通过git上传到码云图文教程详解

    作为一个合格的开发人员,对项目进行管理自然必不可少.今天就给各位看客介绍一下如何用git将自己的AS项目上传到码云.    一  创建远程码云代码仓库 首先我们打开码云,注册一个账号,接着在左上角处点击加号新建一个远程的项目仓库用于待会AS项目的上传,具体如下: 按照上图所示,点击创建即生成远程代码仓库.     二 开始进行AS代码的上传 首先我们打开新建好的AS项目,点击AS顶部的如下: 接着点击项目名称如下将项目加入到本地的git仓库中 之后红色的字体会变成绿色. 接着点击顶部vcs上传代

  • Visual Studio 2017开发环境的安装图文教程

    Visual Studio 2017开发环境的安装图文教程

    Visual Studio 2017是微软为了配合.NET战略推出的IDE开发环境,同时也是目前开发C#程序最新的工具,本节以Visual Studio 2017社区版的安装为例讲解具体的安装步骤. 说明:Visual Studio 2017 社区版是完全免费的,其下载地址为:https://www.visualstudio.com/zh-hans/downloads/ . 安装Visual Studio 2017社区版的步骤如下: (1)Visual Studio 2017社区版的安装文件是e

  • eclipse/IDEA配置javafx项目步骤(图文教程)

    在配置javafx之前,需要到Oracle或openJFX的官网下载javafx压缩包并解压,解压路径最好和Java的jdk放在同一目录方便寻找,在下载解压javafx包之后,开始配置javafx项目: 一:eclipse如何配置javafx 1.安装e(fx)clipse 在安装e(fx)clipse之前eclipse是没有创建javafx项目这一选项的 新建项目选择其它(CTRL + N),在选项卡里面并没有javafx项目选项 这时需要我们安装e(fx)clipse插件:在eclipse菜

  • SQL Server 2017 Developer的下载、安装、配置及SSMS的下载安装配置(图文教程详解)

    最近开学了(线上教学),老师建议我们安装使用 SQL Server 来学习<数据库原理>课程,于是就有了这篇博客 哈哈 (๑¯∀¯๑) 然后因为 SQL Server 2019 是需要收费的,虽然网上有各种PJ方法,但是因为初学嘛,老师建议我们下载 SQL Server 2017 Developer,也就是下图中的这个也够用了(它这里写的是2019但一下载就是2017,这是光明正大的qipian我们嘛 (ノ｀Д)ノ) 下载 下载传送门:SQL Server下载 进去页面可能需要时间略久一点,如

随机推荐