Visual Studio执行vue项目

这篇具有很好参考价值的文章主要介绍了Visual Studio执行vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.安装node.js

1.安装之后修改环境变量Path修改成node的安装路径

vs vue,vue.js,前端

 2.在node文件夹下创建文件夹 node_cache 和 node_global 然后执行下列命令

npm config set prefix "E:\tools\Node\node_global"

npm config set cache "E:\tools\Node\node_cache"

vs vue,vue.js,前端

 修改环境变量

vs vue,vue.js,前端

 测试一下

测试node

vs vue,vue.js,前端

 运行 npm install express -g   -g 是全局安装的意思
vs vue,vue.js,前端

 二。修改镜像源为阿里镜像

 1.查看当前镜像

 npm config get registry

vs vue,vue.js,前端

2.更换为阿里镜像 

npm config set registry https://registry.npm.taobao.org/

vs vue,vue.js,前端

3.检查镜像

 npm config get registry

vs vue,vue.js,前端

4.安装cnpm 

npm install -g cnpm --registry=https://registry.npm.taobao.org

vs vue,vue.js,前端

 测试是否安装成功

vs vue,vue.js,前端

vs vue,vue.js,前端

如果安装报错则删除安装指定版本cnpm

删除之前的cnpm

npm uninstall -g cnpm

安装指定版本的cnpm

npm install cnpm@7.1.0 -g

三。在vs里边运行yarn命令

 1.安装yarn

运行命令:

npm install -g yarn

安装成功之后测试一下

vs vue,vue.js,前端

 在vs中运行yarn,

vs vue,vue.js,前端

 报错提示禁止运行脚本,则使用管理员运行vs软件

  1. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的;

  2. 执行:set-ExecutionPolicy RemoteSigned;

  3. 再次执行:get-ExecutionPolicy,就显示RemoteSigned;

  4. 执行:yarn --version

vs vue,vue.js,前端

四。下载依赖

运行命令 yarnvs vue,vue.js,前端

 运行命令yarn serve启动项目

vs vue,vue.js,前端

如果启动报错以下信息 说明是node版本问题

vs vue,vue.js,前端

 修改package.json文件中的scripts文件,然后再运行就可以成功

 "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",

vs vue,vue.js,前端

 vs vue,vue.js,前端

五。启动项目

运行 yarn serve命令启动项目

vs vue,vue.js,前端

 六。打包项目

运行 yarn build命令打包项目

vs vue,vue.js,前端

 文章来源地址https://www.toymoban.com/news/detail-856957.html

到了这里,关于Visual Studio执行vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Visual Studio Code 导入并运行vue项目

    一、安装并配置node.js 详见CSDN 查看node版本: 二、修改编辑器的语言(切换为中文) 打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language,选择安装其他语言,安装完成选择zh-cn,重启就变成中文了。  三、vue插件的安装(方便开发)(Ctrl+shift+X) eslint插件:eslint智能错误

    2024年02月08日
    浏览(64)
  • Visual Studio Code安装VUE 3.0项目及环境搭建

    为VS Code安装 Node.JS 并安装部署VUE 及开发脚手架,之后部署第一个demo项目 1. Node.js 官方网站下载Node.js,选择稳定版下载,不要选择最新版         Node.js (nodejs.org) 2.  2. 下载后开始安装,我的安装目录为:C:Codingnodejs 因为在执行例如npm install webpack -g等命令全局安装的时候

    2024年02月07日
    浏览(58)
  • 【工具使用】卸载VS(Visual Studio)

    下载地址:https://github.com/Microsoft/VisualStudioUninstaller/releases 1.点击下载地址,选择TotalUninstaller进行下载 2.下载后进行解压,选择压缩包中的Setup.ForcedUninstall.exe,双击进入,选择“Y”,进行卸载 方法地址:卸载或移除 Visual Studio 具体内容点击链接进入查看

    2024年02月03日
    浏览(36)
  • VS(Visual Studio)更改文件编码

    工具-自定义

    2024年04月16日
    浏览(36)
  • Visual Studio Community与Visual Studio Community与VS Code有啥区别

    dio Code是由微软推出的两款主流开发工具,虽然它们都以“Visual Studio”为名,但是它们在功能、适用领域和使用场景上有着明显的区别。下面对它们进行简单的介绍跟比较,来帮助开发者更好地了解它们之间的差异。 Visual Studio Community: Visual Studio Community是一款功能丰富的集

    2024年03月09日
    浏览(54)
  • VS——Visual Studio 2022 社区版——安装

    将下载的文件启动 先修改【安装位置】,选择【全部下载后安装】 【工作负荷】选择 【使用C++桌面开发】 【工作负荷】选择 【使用C++桌面开发】 ,安装详细信息可选默认就可以了,如果你有需要可以自行选择。 【语言包】 点击【安装】,等待 【启动】 登录账号 可以跳

    2024年02月08日
    浏览(48)
  • VS(Visual studio)各版本密钥汇总

    亲测好用,留作自用,每次换电脑或者系统必装。 VS2022 专业版:(PRO) TD244-P4NB7-YQ6XK-Y8MMM-YWV2J 企业版:(Enterprise) VHF9H-NXBBB-638P6-6JHCY-88JWH VS2015 2015算是用过vs里面最久的了,感情深,陪伴了完整的大学时光,然后研究生到现在工作,虽然现在开发的少了,但是做游戏的话还是首选

    2024年02月12日
    浏览(31)
  • Visual Studio(VS)常用快捷键整理

    目录 前言 一、编辑器快捷键 二、调试器快捷键 三、代码编辑器快捷键 四、书签快捷键         五、断点快捷键         六、代码整理 结束 在使用Visual Studio编写代码时,使用快捷键能够提高编码效率,作为程序员,我们有必要记住一些比较常用的快捷键。这篇文章

    2024年02月16日
    浏览(57)
  • Visual Studio Code (VS Code)安装教程

    Visual Studio Code(简称“VS Code”)。 1.下载安装包 VS Code的官网: Visual Studio Code - Code Editing. Redefined 首先提及一下,vscode是不需要破解操作的; 第一步,看好版本,由于我的系统就是windows,所以默认选择就好; 第二步,跳转页面,稍等一下会自动下载安装包;  下载完成后双

    2024年03月17日
    浏览(72)
  • Visual Studio Code(VS Code)安装教程

    1、访问官方网站:         打开浏览器,输入网址 \\\'https://code.visualstudio.com/\\\' 进入VS Code官方主页。 2、选择操作系统版本:         在主页找到“Download for Windows”、“Download for macOS”或“Download for Linux”按钮,根据您的操作系统选择相应的下载链接。 3、下载安装包

    2024年04月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包