在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![]()
相关文章:
在VSCode上创建Vue项目详细教程
1.前期环境准备 搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备Node.js环境,就像Java开发要依赖JDK环境一样。 1.1 Node.js环境配置 1)具体安装步骤操作即可: npm 安装教程_如何安装npm-CSDN博客文章浏览阅读836次。本文主要在Win…...
Go语言入门之流程控制简述
Go语言入门之流程控制简述 1.if语句 if语句和其他语言一样,只不过go语言的if不需要用括号包裹 if 语句的分支代码块的左大括号与 if 关键字在同一行上,这是 go 代码风格的统一要求 简单实例: func main() {// 猜数字a : 2if a > 0 {if a…...
接口测试框架基于模板自动生成测试用例!
引言 在接口自动化测试中,生成高质量、易维护的测试用例是一个重要挑战。基于模板自动生成测试用例,可以有效减少手工编写测试用例的工作量,提高测试的效率和准确性。 自动生成测试用例的原理 为了实现测试用例数据和测试用例代码的解耦&a…...
C++ STL stable_sort用法
一:功能 对区间内元素进行排序,保证相等元素的顺序(稳定排序) 二:用法 #include <iostream>struct Record {std::string label;int rank; };int main() {std::vector<Record> data {{"q", 1},…...
YOLO v8进行目标检测的遇到的bug小结
OSError: [WinError 1455] 页面文件太小,无法完成操作。 我的python环境是放在C盘的: 在“我的电脑”点击鼠标右键,打开“属性”点击高级系统设置点击“设置”找到“高级”点击“更改”分配“虚拟内存”(这里需要重启电脑才能生…...
FastAPI -- 第二弹(响应模型、状态码、路由APIRouter、后台任务BackgroundTasks)
响应模型 添加响应模型 from typing import Anyfrom fastapi import FastAPI from pydantic import BaseModel, EmailStrapp FastAPI()class UserIn(BaseModel):username: strpassword: stremail: EmailStrfull_name: str | None Noneclass UserOut(BaseModel):username: s…...
案例 | 人大金仓助力山西政务服务核心业务系统实现全栈国产化升级改造
近日,人大金仓支撑山西涉企政策服务平台、政务服务热线联动平台、政务网、办件中心等近30个政务核心系统完成全栈国产化升级改造,推进全省通办、跨省通办、综合业务受理、智能审批、一件事一次办等业务的数字化办结进程,为我国数字政务服务提…...
如何用python写接口
如何用python写接口?具体步骤如下: 1、实例化server 2、装饰器下面的函数变为一个接口 3、启动服务 开发工具和流程: python库:flask 》实例化server:server flask.Flask(__name__) 》server.route(/index,met…...
轻量级可扩展易航网址引导系统源码V2.45
由于现在网站行业的不稳定,导致很地址频繁更换,不仅是网站,联系QQ,加群链接等需要更换时,好不容易发展的客户会因为找不到您新的网站地址而流失,有了引导页以后就可以安心地宣传无需担心客户丢失的问题。 …...
解决ESLint和Prettier冲突的问题
在配置了ESLint的项目中使用Prettier进行格式化可能会出现冲突,不如Prettier配置了使用双引号,ESLint配置了单引号,当然可以一个一个改成一样的配置,但是比较麻烦。我发现可以直接使用ESLint的规则进行格式化。在VSCode配置过程如…...
C判断一个点在三角形上
背景 鼠标操作时,经常要判断是否命中显示控件,特开发此算法快速判断。 原理 三角形三等分点定理是指在任意三角形ABC中,可以找到三个点D、E和F,使得线段AD、BE和CF均等分三角形ABC。 这意味着三个等分点分别位于三个边界上&…...
物业系统自主研发接口测试框架
1、自主研发框架整体设计 1.1、什么是测试框架? 在了解什么是自动化测试框架之前,先了解一下什么叫框架?框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架…...
手机和电脑通过TCP传输
一.工具 手机端:网络调试精灵 电脑端:野火网络调试助手 在开始通信之前,千万要查看一下电脑的防火墙是否关闭,否则可能会无法通信 在开始通信之前,千万要查看一下电脑的防火墙是否关闭,否则可能会无法通信…...
Git 在commit后,撤销commit
1. 撤销已经add,但是没有commit的问题 git reset HEAD 2. 撤销已经commit,但是没有push到远端的文件(仅撤销commit 保留add操作) 撤销上一次的提交 git reset --soft HEAD^windows 系统使用提示 more,需要多加一个…...
多模态大模型 - MM1
1. 摘要 本文主要通过分析模型结构和数据选择讨论如何构建一个好的多模态大模型(MLLM),并同时提出了MM1模型,包括30B dense版本和64B的MoE版本。 具体贡献: 模型层面:影响效果的重要性排序为:…...
FPGA设计之跨时钟域(CDC)设计篇(2)----如何科学地设计复位信号?
1、复位是干嘛的? 时钟信号和复位信号应该是一个数字系统最重要和最常用的两个信号了。时钟的重要性大家都懂,没有时钟整个系统就无法同步,自然也就谈不上运行了。那么复位(reset)到底是干嘛的? 所有的数字系统在上电的时候都会进行复位,这样才能确保该系统的初始运行状…...
GPS北斗标准时钟同步服务器结构是什么?安徽京准
GPS北斗标准时钟同步服务器结构是什么?安徽京准 GPS北斗标准时钟同步服务器结构是什么?安徽京准 电厂时钟同步系统组成及配置 随着计算机和网络通信技术的飞速发展,火电厂热工自动化系统数字化、网络化的时代已经到来。一方面它为控制和信息系…...
9.5 栅格图层符号化多波段彩色渲染
文章目录 前言多波段彩色渲染QGis设置为多波段彩色二次开发代码实现多波段彩色 总结 前言 介绍栅格图层数据渲染之多波段彩色渲染说明:文章中的示例代码均来自开源项目qgis_cpp_api_apps 多波段彩色渲染 以“3420C_2010_327_RGB_LATLNG.tif”数据为例,…...
力扣第九题
回文数 提示: 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。 代码展示&#…...
鞭炮插画:成都亚恒丰创教育科技有限公司
鞭炮插画:年味里的绚烂记忆 在岁末年初的温柔时光里,总有一抹色彩,能瞬间唤醒沉睡的年味——那便是鞭炮插画中跃动的红与金,成都亚恒丰创教育科技有限公司 它们不仅仅是纸与墨的交织,更是情感与记忆的桥梁,…...
别再让大模型胡说八道了!手把手教你用ChromaDB+GPT-3.5搭建个人专属知识库(附完整代码)
构建精准知识库:用ChromaDBGPT-3.5打造企业级智能问答系统 当企业客服机器人回答"我们的产品保修政策是什么"时,如果只能依赖通用大模型的训练数据,很可能会给出过时或错误的答案。这种"幻觉"问题在金融、医疗、法律等专…...
Python flask django美容美发商城系统
目录同行可拿货,招校园代理 ,本人源头供货商功能模块分析预约与订单管理支付与营销系统后台管理模块技术实现建议扩展功能(可选)项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作同行可拿货,招校园代理 ,本…...
高品质订单车后台管理系统,支持excel订单导入功能,实现全面的管理功能,打造智能化管理系统
订单车后台管理系统,自己开发的,基本功能齐全,支持excel订单导入功能,最近在折腾一个自己用的订单车后台管理系统,核心功能基本跑通了。最让我得意的其实是Excel导入功能——这玩意儿看起来简单,实际处理起…...
Amundsen多租户架构:企业级数据隔离的终极解决方案
Amundsen多租户架构:企业级数据隔离的终极解决方案 【免费下载链接】amundsen Amundsen is a metadata driven application for improving the productivity of data analysts, data scientists and engineers when interacting with data. 项目地址: https://git…...
G-Helper终极指南:开源硬件性能管理工具如何彻底改变华硕设备体验
G-Helper终极指南:开源硬件性能管理工具如何彻底改变华硕设备体验 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF…...
告别虚拟机:在Mac/Windows本地用Docker快速拉起StarRocks测试环境
告别虚拟机:在Mac/Windows本地用Docker快速拉起StarRocks测试环境 当我们需要快速验证一个数据库的功能特性时,传统方式往往需要在虚拟机或物理机上经历繁琐的安装配置过程。对于StarRocks这样的分布式分析型数据库,传统部署方式更是需要准备…...
ArcMap10.4.1中文版地图数字化技巧:如何高效捕捉和数字化等高线
ArcMap 10.4.1中文版等高线数字化实战:从基础操作到效率倍增技巧 在GIS数据处理中,等高线数字化是地形分析的基础环节,也是许多项目中最耗时的步骤之一。我曾参与过一个山区防洪规划项目,团队需要处理超过200平方公里的1:10000地形…...
SpringAI与DeepSeek集成:兼容OpenAI API的流式对话实践
1. 环境准备与基础配置 在开始集成SpringAI与DeepSeek之前,我们需要确保开发环境满足以下要求: JDK 17或更高版本:Spring Boot 3.x系列需要JDK 17作为最低版本支持Spring Boot 3.4.2:这是当前推荐的稳定版本Maven或Gradle…...
WorkshopDL:突破Steam创意工坊限制的跨平台下载解决方案
WorkshopDL:突破Steam创意工坊限制的跨平台下载解决方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 当你在Epic Games平台享受《无主之地3》的爽快射击…...
华硕笔记本合盖不休眠解决方案:GHelper智能模式完全指南
华硕笔记本合盖不休眠解决方案:GHelper智能模式完全指南 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Strix, …...

