在VSCode上创建Vue项目详细教程

1.前期环境准备

搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备Node.js环境,就像Java开发要依赖JDK环境一样。

1.1 Node.js环境配置

1)具体安装步骤操作即可:

npm 安装教程_如何安装npm-CSDN博客文章浏览阅读836次。本文主要在Window环境下安装,点击下载,并安装到没有中文的目录下。安装时候一直点下一步即可完成安装。3、配置npm淘宝镜像,并查看是否配置成功。# 配置npm淘宝镜像。2、查看是否安装成功。# 查看是否配置成功。_如何安装npmhttps://blog.csdn.net/qq_39512532/article/details/1281128492)配置全局 npm 包的安装路径,解决默认路径可能带来的权限问题和提高安全性:(其路径改为你Nodejs安装的路径即可)

C:\>npm config set prefix "D:\softFile\Node.js"C:\>npm config get prefix
D:\softFile\Node.js

3)如果后续下载觉得网速慢,可改为淘宝镜像:

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

 1.2 VSCode安装相关插件

超实用的VS Code插件推荐_vscode好用的开发插件-CSDN博客文章浏览阅读622次,点赞17次,收藏18次。VS Code代码编辑器中提供了丰富的插件,满足不同开发者的需求。这里为大家推荐一些强大的VS Code插件,帮助你打造一个个性化的开发环境,让你的编码体验更加舒适和高效。打开扩展模块,输入安装包名称,回车进行搜索,点击install即可无脑安装。_vscode好用的开发插件https://blog.csdn.net/qq_39512532/article/details/140097440

1.3 安装Vue-cli

npm install -g @vue/cli

安装结束后,通过下面命令检查Vue是否安装成功:

vue --version

2.工程化Vue项目创建

创建Vue项目有两种方式:通过命令行创建或通过UI界面创建。

2.1 通过命令行创建Vue项目

vue create vue-project01

2.2 通过UI界面创建Vue项目

1)在VS code 终端输入vue ui

2)会弹出图形化界面。若没弹出则输入终端中url进行访问(http://localhost:8000/project/select)。

3)创建新项目

4)进行配置选择,可以根据需要自行选择


5)选择Vue版本与语法规范

6)不保存预设

7)创建完成


2.3 Vue项目的目录结构

2.4 启动Vue项目的两种方式

2.4.1 命令行启动

npm run serve

2.4.2 图形化页面启动

启动成功

首页展示的其实就是项目中默认的APP.vue组件。

2.5 更改 Vue项目的端口配置

3. 问题解决

问题:输入vue ui报错:解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本:

PS C:\Users\hsj> vue ui
vue : 无法加载文件 D:\softFile\Node.js\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue ui
+ ~~~+ CategoryInfo          : SecurityError: (:) [],PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess


解决方案
1)以管理员的身份运行PowerShell

2)执行:get-ExecutionPolicy,如果回复Restricted,表示状态是禁止的

3)执行:set-ExecutionPolicy RemoteSigned
选择Y
4)执行:get-ExecutionPolicy进行查看,是否已修改为RemoteSigned

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45697.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 lmdeploy 部署 internlm/internlm2_5-7b-chat

使用 lmdeploy 部署 internlm/internlm2_5-7b-chat 0. 引言1. lmdeploy 性能2. lmdeploy 支持的模型3. 快速开始 0. 引言 LMDeploy 由 MMDeploy 和 MMRazor 团队联合开发,是涵盖了 LLM 任务的全套轻量化、部署和服务解决方案。 这个强大的工具箱提供以下核心功能&a…

webRtc架构与目录结构

整体架构 目录结构 webrtc Modules目录

Redis实践经验

优雅的Key结构 Key实践约定: 遵循基本格式:[业务名称]:[数据名]:id例:login:user:10长度步超过44字节(版本不同,上限不同)不包含特殊字符 优点: 可读性强避免key冲突方便管理节省内存&#x…

使用 Unstructured.io 和 Elasticsearch 向量数据库搜索复杂文档

作者:来自 Elastic Amy Ghate, Rishikesh Radhakrishnan, Hemant Malik 使用非结构化和 Elasticsearch 向量数据库为 RAG 应用程序提取和搜索复杂的专有文档 在使信息可搜索之前解析文档是构建实际 RAG 应用程序的重要步骤。Unstructured.io 和 Elasticsearch 在此…

mybatis动态传入参数 pgsql 日期 Interval ,day,minute

mybatis动态传入参数 pgsql 日期 Interval 在navicat中,标准写法 SELECT * FROM test WHERE time > (NOW() - INTERVAL 5 day)在mybatis中,错误写法 SELECT * FROM test WHERE time > (NOW() - INTERVAL#{numbers,jdbcTypeINTEGER} day)报错内…

CSS【详解】层叠 z-index (含 z-index 的层叠规则,不同样式的层叠效果)

仅对已定位的元素( position:relative,position:absolute,position:fixed )有效,默认值为0,可以为负值。 z-index 的层叠规则 z-index 值从小到大层叠 兄弟元素 z-index 值相同时,后面的元素在…

python | setup.py里有什么?

setup.py里有什么? 文章目录 setup.py里有什么?C/C扩展总结gcc/g的编译参数:Windows Visual StudioCmakesetup.py C/C扩展模块 为什么需要分发打包?Distutils一个简单的例子通用的 Python 术语 使用 Setuptools 构建和分发软件包源…

Android Gantt View 安卓实现项目甘特图

需要做一个项目管理工具,其中使用到了甘特图。发现全网甘特图解决方案比较少,于是自动动手丰衣足食。 前面我用 Python和 Node.js 前端都做过,这次仅仅是移植到 Android上面。 其实甘特图非常简单,开发也不难,如果我…

Python番外篇:万法归一,一切皆对象

目录 Python中的对象 一切皆对象 数字是对象 字符串是对象 内置类型也是对象 函数和类也是对象 总结 Python中的对象 对象是Python对数据的抽象,在Python程序中,所有的数据,都可以由对象或对象之间的关系表示。 从某种意义上说&#…

基于AT89C51单片机GSM模块的家庭防火防盗报警系统设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机GSM模块的家庭防火防盗报警系统设计的详情介绍,如果对您有帮助的话,还请关注一下哦,如果有资源方面的需要可以联系我。 目录 摘 要 原理图 仿真图 元器件清单 代码 系统论文 参考文献 资源下载…

几何建模-Parasolid中GO功能使用

1.背景介绍 1.1 Parasolid和它的接口间关系 1.2 什么是GO GO全称是Graphical Output.你的程序需要在屏幕或者打印设备上显示模型数据时。在需要使用PK中的某个渲染函数时创建图形显示数据时,Parasolid会调用GO相关的函数。GO函数会输出绘图指令给你的应用程序提供…

《昇思25天学习打卡营第14天|SSD目标检测》

SSD(Single Shot MultiBox Detector)是一种用于目标检测的深度学习算法。它的设计旨在同时检测多个对象,并确定它们在图像中的位置和类别。与其他目标检测算法相比,SSD具有速度快和精度高的特点,在实时检测应用中非常受…

昇思25天学习打卡营第18天|MindNLP ChatGLM-6B StreamChat

现在各类chat AI不胜枚举,开源的闭源的都有,ChatGLM-6B是其中一个开源的chat AI模型,我们可以使用mindspore轻松的跑起来这个模型 官方提供的jupyter示例里面却少了安装mindnlp和mdtex2html,所以需要先把这两个模块安装一下。 !…

【Dison夏令营 Day 17】使用 Python Turtle 的 24 游戏求解器

24 点 是一个数学谜题,用基本算术运算符(、-、、)将 4 个数字运算成 24。例如,给定 4 个数字 1,5,5,5,我们可以得到表达式 (5-(15))5,等于 24。 我们可以用 Python 程序暴力解决这个问题。最多有 245444 7…

【游戏客户端】大话slg玩法架构(三)建筑控件

【游戏客户端】大话slg玩法架构(三)建筑控件 大家好,我是Lampard家杰~~ 今天我们继续给大家分享SLG玩法的实现架构,关于SLG玩法的介绍可以参考这篇上一篇文章:【游戏客户端】制作率土之滨Like玩法 PS:和之前…

谈谈软件交互设计

谈谈软件交互设计 交互设计的由来 交互设计(Interaction Design)这一概念,最初是由IDEO创始人之一Bill.Moggridge(莫格里奇)1984年在一次会议上提出。他设计了世界上第一台笔记本电脑Compass,并写作出版了在交互设计领域影响深远的《Designing Interactions》一书,被称…

请不要把「团队」二字挂在嘴边上

请不要把「团队」二字挂在嘴边上 什么是团队? 团队(Team)是由 基层和 管理层人员组成的一个 共同体,它合理利用每一个 成员的知识和技能协同工作,解决问题,达到 共同的目标。 团队的构成要素总结为5P,分别为目标、人、 定位、权限、计划。 群体不是团队 “团队”和“…

智能合约和分布式应用管理系统:技术革新与未来展望

引言 随着区块链技术的不断发展,智能合约和分布式应用(DApps)逐渐成为数字经济中的重要组成部分。智能合约是一种自执行的协议,能够在预设条件满足时自动执行代码,而无需人工干预或中介机构。这种自动化和信任机制极大…

使用Apache服务部署静态网站

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、网站服务程序 ​二、配置服务文件参数 ​三、SELinux安全子系统 四、个人用户主页功能 ​五、虚拟网站主机功能 六、Apache的访问控制…

nx上darknet的使用-目标检测-在python中的使用

1 内置的代码 在darknet中已经内置了两个py文件 darknet_video.py与darknet_images.py用法类似,都是改一改给的参数就行了,我们说一下几个关键的参数 input 要预测哪张图像weights 要使用哪个权重config_file 要使用哪个cfg文件data_file 要使用哪个da…