VS Code上搭建Vue开发环境超详细教程

这篇具有很好参考价值的文章主要介绍了VS Code上搭建Vue开发环境超详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这篇关于在Visual Studio Code上搭建vue开发环境的超详细教程手把手教会你!

首先在Visual Studio Code上搭建vue开发环境有几个步骤:

1、下载安装node.js

2、安装npm

3、安装cnpm

4、安装vue/cli脚手架

5、创建vue项目

 6、运行vue项目

 1.下载安装node.js

地址:node.js官网下载

打开 Visual Studio Code打开终端如下图:

VS Code上搭建Vue开发环境超详细教程

在终端输入以下命令行

检查node.js是否安装成功

node -v

2.安装npm

检查npm是否安装成功

npm -v

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

注:因为在node.js上自带了npm包可以使用,所以这里不需要在另外下载。

3.安装cnpm

使用命令行安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com


 注:这里可能遇到问题,PowerShell用于控制加载配置文件和运行脚本的条件,为了防止恶意脚本的执行,可能遇到无法运行脚本的问题;

解决办法:可以通过修改PowerShell执行策略来解决;

步骤:win键搜索Power Shell并以管理员身份运行,在输入框输入以下代码Enter,键入Y修改执行策略即可;

详细步骤:

(1)右键开始,选择Windows PowerShell管理员.

VS Code上搭建Vue开发环境超详细教程

(2)输入以下代码,键入Y修改执行策略即可;

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

VS Code上搭建Vue开发环境超详细教程

 检查是否修改成功

 Get-ExecutionPolicy -List

 出现如下字样则修改执行策略成功

 VS Code上搭建Vue开发环境超详细教程

 

 ~~~ 使用命令行安装cnpm ~~~

npm install -g cnpm --registry=https://registry.npmmirror.com

检查cnpm是否安装成功

cnpm -v

 4.安装vue/cli脚手架

在终端面板输入以下语句执行

cnpm install -g @vue/cli

效果: 

VS Code上搭建Vue开发环境超详细教程 

 

然后输入以下语句查看脚手架是否安装成功;

vue -V

5.创建vue项目

vue create vue-01

 连续敲下回车,创建项目,也可以按键盘上下键配置项目。

 注:vue-01 是项目名称。

6.运行vue项目

 进入项目

cd vue-01

 运行项目

npm run serve

 当终端上出现如图所示样式,则表示项目运行成功;

VS Code上搭建Vue开发环境超详细教程

 

 此时按住键盘Ctrl键配合鼠标左键可以在浏览器打开项目;

VS Code上搭建Vue开发环境超详细教程

 

到了这里,关于VS Code上搭建Vue开发环境超详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 51单片机开发环境搭建 - VS Code 从编写到烧录

    我安装并测试成功的环境: 操作系统:Windows 10 (22H2) 单片机:STC89C52RC Python version: 3.7.6 在这之前,给51单片机写程序是用 Keil 5(编写+编译)、STC-ISP(烧录),由于切换应用比较麻烦,并且不够美观,所以尝试使用熟悉的 Visual Studio Code 来完成这些操作。 stcgal 是用来向STC单片

    2023年04月24日
    浏览(52)
  • macOS下使用VS Code配置gcc、gdb搭建C/C++开发环境

        本篇记录在macOS系统下使用VS Code配置 GCC、GDB来搭建C/C++开发环境,首先要提前安装好gcc和gdb,见前一篇博文 macOS下安装gcc、gdb(实测可行)   安装好gcc、gdb之后,接下来为VS Code配置文件使其可以调用gcc、gdb,macOS下的配置过程与Linux下类似,可见之前的博文 Linux/Ubuntu系统

    2024年02月08日
    浏览(47)
  • Mac电脑Android Studio和VS Code配置Flutter开发环境(图文超详细)

    官网地址: https://developer.android.google.cn/ 历史版本下载地址: https://developer.android.com/studio/archive?hl=zh-cn 到App Store下载安装最新版本,如果MacOS更新不到13.0以上就无法安装最新的Xcode,只能去下载以前版本的Xcode。 历史版本下载地址: https://developer.apple.com/download/all/?q=Xcode VS C

    2024年02月03日
    浏览(50)
  • 使用 VS Code 快速搭建 ESP-IDF 开发环境 (Windows、Linux、MacOS)

    ESP-IDF 是乐鑫官方的物联网开发框架,适用于 ESP32、ESP32-S、ESP32-C 和 ESP32-H 系列 SoC。它基于 C/C++ 语言提供了一个自给自足的 SDK,方便用户在这些平台上开发通用应用程序,并集成了大量的软件组件,包括 RTOS、外设驱动程序、网络栈、多种协议实现技术以及常见应用程序的使

    2024年02月14日
    浏览(55)
  • VS 远程开发调试环境搭建 简明教程

    在windows上应用程序的开发过程中,总会遇到这样的使用场景,需要在开发机上远程到应用程序的宿主机(常常是以产品形式外发的机台),这时候需要快速搭建简易的远程开发环境。以下几个步骤可以快速帮到你: 1.1 拷贝VS远程调试工具到宿主机 for example: 开发机环境 vs

    2024年02月15日
    浏览(41)
  • 机器学习环境初步搭建(conda和Visual Studio Code安装教程超详细版)

            以windows10系统,AMD显卡为例。在学习时建议大家创建虚拟环境。祝大家学习顺利!         目录 前言 一.安装Anaconda:建立Python应用环境         Anaconda简介         安装过程        检测Anaconda是否写入环境         为conda创建虚拟环境  二.安装Visual Studio Co

    2024年01月23日
    浏览(47)
  • 【配置环境】VS Code中C#环境搭建

    目录 前言 一,下载 .net core SDK 二,创建一个 C# 小栗子 创建方式一 创建方式二 三,Vs Code 中环境准备 四,最后运行 C# 小栗子 运行方式一 运行方式二 工作需求而开始学 Unity 3D ,因为 Unity 是和微软合作的,所以它用到的脚步语言是 C#  ,于是我便开始学一下C#,哈哈,有过

    2024年02月11日
    浏览(40)
  • 【配置环境】VS Code中JavaScript环境搭建

    Windows 11 家庭中文版,64 位操作系统, 基于 x64 的处理器 VS Code 版本: 1.83.1 (user setup) Node.js 版本:20.9.0 因为在看《重构改善既有代码的设计第2版》的时候,书中的代码展示范例都是基于JavaScript的,我也从未涉及过JavaScript这门编程语言。为了让理论与实践并进,必须从零开始学

    2024年02月02日
    浏览(42)
  • 【C#】VS Code中C#环境搭建

    目录 前言 一,下载 .net core SDK 二,创建一个 C# 小栗子 创建方式一 创建方式二 三,Vs Code 中环境准备 四,最后运行 C# 小栗子 运行方式一 运行方式二 工作需求而开始学 Unity 3D ,因为 Unity 是和微软合作的,所以它用到的脚步语言是 C#  ,于是我便开始学一下C#,哈哈,有过

    2023年04月09日
    浏览(50)
  • VS Code搭建STM32环境 (学习笔记)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 因为本人是行业新人之前学的是51,现在刚开始学32用不习惯STM32Cude的软件所以上网查了几个资料终于弄出了VS Code编写STM32。有不足之处大佬请指出,万分感谢! 提示:以下是本篇文章正文内容,下面案

    2024年02月03日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包