在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…

力扣1021.删除最外层的括号

力扣1021.删除最外层的括号 遍历所有字符 当)时 栈顶元素出栈当(时 入栈当栈为空时 说明恰好扫描了一个原语这个原语的首尾字符不应该放入答案因此调整if判断顺序使首尾不放进去即可 class Solution {public:string removeOuterParentheses(string s)…

webRtc架构与目录结构

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

Redis实践经验

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

Ubuntu 编译和运行ZLMediaKit

摘要 本文描述了如何在Ubuntu上构建ZLMediaKIt项目源码,以及如何体验其WebRTC推流和播放功能。 实验环境 操作系统版本:Ubuntu 22.04.3 LTS gcc版本:11.4.0 g版本:11.4.0 依赖库安装 #让ZLMediaKit媒体服务器具备WebRTC流转发…

Git 在commit后,撤销commit

1. 撤销已经add,但是没有commit的问题 git reset HEAD 2. 撤销已经commit,但是没有push到远端的文件(仅撤销commit 保留add操作) 撤销上一次的提交 git reset --soft HEAD^windows 系统使用提示 more,需要多加一个…

使用 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)报错内…

Docker Compose 启动容器例子

Docker Compose 启动容器例子 Docker Compose 文件 (docker-compose.yml) version: 3.8services:web:image: nginx:latestports:- "8080:80"volumes:- ./html:/usr/share/nginx/htmlnetworks:- webnetdb:image: mysql:latestenvironment:MYSQL_ROOT_PASSWORD: exam…

谷歌浏览器插件开发笔记0.1.033

谷歌浏览器插件开发笔记0.1.000 示例文件manifest.jsonpopup.htmloptions.jsoptions.htmlcontent.jsbackground.js 网页按钮快捷键插件api使用基础参考链接 示例文件 共计有6个常用的文件 manifest.json background字段:随着浏览器的打开而打开,随着浏…

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

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

【GameFramework框架】7-2、GameFramework框架是否“过度设计”?

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群:398291828大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录: https://blog.csdn.net/q764424567/article/details/1…

Leetcode(经典题)day1

删除有序数组中的重复项|| 80. 删除有序数组中的重复项 II - 力扣(LeetCode) 和之前的删除有序数组中的重复项|相似,这里是要求最多出现两次,所以多加一个变量来记录出现次数即可,整体上还是使用双指针,…

智能小车——底层配置

需要一点点思考底层的相关配置都需要完成怎么样的配置,并进一步添加相关的状态机和控制算法。 FreeRTOS迁移 可以直接CubeMX生成,也可以手动把FreeRTOS的源码拖到工程中,然后再稍微配置一下,这个之前学正点原子的FreeRTOS的时候…

python | setup.py里有什么?

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

华为OD机试题-字符串重新排列

题目描述 https://www.cnblogs.com/smile-programmer/p/17322920.html 字符串重新排列 给定一个字符串s,s包括以空格分隔的若干个单词,请对s进行如下处理后输出: 1、单词内部调整:对每个单词字母重新按字典序排序 2、单词间顺序调…

C#单独摘出日期的某天

如果你想要在 C# 中获取日期中的“天”的部分,你可以通过将日期转换为字符串,解析字符串,或者使用 DateTime 结构的 Day 属性来实现。 using System;class Program {static void Main(){// 获取当前日期DateTime today DateTime.Today;// 使…

Sqlmap中文使用手册 - Request模块参数使用

目录 1. Request模块的帮助文档2. 各个参数的介绍2.1 --methodMETHOD2.2 --dataDATA2.3 指定参数分割符2.4 -cookie相关2.5 -agent相关2.6 --hostHOST2.7 --refererREFERER2.8 --headersHEADERS2.9 --auth-type / --auth-cred2.10 --auth-fileAUTH2.11 --ignore-codeIG2.12 --p…

基于Flask+Apache+WSGI等模块配置Deep Learning应用功能网站(Ubuntu 22.04服务器)

首先预设你已经在本地搭建好了网站,只需要放到服务器上,然后配置Apache / Nginx等反向代理软件,即可用服务器ip地址/域名进行访问。 因为操作不规范/坑太多,而反反复复配了至少10遍。接下来的教程主要是总结规范流程,…

PYTHON自学笔记(二)查漏补缺

迭代 字符串处理 函数 参数 必须参数(必须有序) 调用函数与生命函数的参数个数必须一样,否则报错 关键字参数(无需有序) 在调用函数的时候可以直接传参,方便测试 def printIfo(name, **var):print(…