学习Vue(1)环境搭建与运行一个vue项目

下载node.js

下载地址下载 | Node.js 中文网

安装

双击下载好的安装文件,选择安装路径即可。

安装完成,输入命令:nodel -v,查看版本,正常显示版本即安装成功。

自定义全局安装路径和缓存路径(创建两个文件夹)

配置环境变量

  • windows

        新增NODE_HOME,值为:D:\Work\Nodejs
        修改PATH并在最后添加:%NODE_HOME% 和 %NODE_HOME%\node_global

        cmd界面执行命令

        npm config set prefix “D:\Work\Nodejs\node_global”
        npm config set cache “D:\Work\Nodejs\node_cache”        

  • mac

       

修改国内镜像

        执行以下命令

        npm config set registry https://registry.npmmirror.com/

        查看是否设置成功

        npm get registry

        

安装vue脚手架

        执行命令:npm install -g @vue/cli

创建Vue项目

        在工作区文件夹打开命令行模式,创建Vue项目

        vue create vuehello

        注意:有可能出现报错

因为在此系统上禁止运行脚本,PowerShell的执行政策阻止了该操作,解决方法如下:

1、查看是否是受限状态: Get-ExecutionPolicy    显示Restricted(受限状态)

PS E:\vue3.0> Get-ExecutionPolicy
Restricted
2、如果是受限状态,先解除受限状态使用:Set-ExecutionPolicy -Scope CurrentUser,然后输入RemoteSigned 回车

PS E:\vue3.0> Set-ExecutionPolicy -Scope CurrentUser
 
位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned
3、查看是否解除受限:get-ExecutionPolicy    显示RemoteSigned (受限解除)

PS E:\vue3.0> get-ExecutionPolicy
RemoteSigned
完成这一步的时候你已经可以正常在vscode终端或者cmd终端进行创建

启动项目

先进入项目所在目录,再执行启动命令

cd vuehello

npm run serve

 

打开浏览器,输入 http://localhost:8080/

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

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

相关文章

OpenCV 配置 VS 2022并识别人脸框出

文章目录 前言一、什么是OpenCV?二、OpenCV的安装和配置1. OpenCV 下载2. 安装3. 配置环境变量4.vs2022环境配置 三、OpenCV识别图片人脸四、总结 前言 在计算机视觉领域,人脸识别是一项具有挑战性且备受关注的任务。借助于开源的计算机视觉库OpenCV&am…

Apache SeaTunnel MongoDB CDC 使用指南

随着数据驱动决策的重要性日益凸显,实时数据处理成为企业竞争力的关键。SeaTunnel MongoDB CDC(Change Data Capture) 源连接器的推出,为开发者提供了一个高效、灵活的工具,以实现对 MongoDB 数据库变更的实时捕获和处理。 本文将深入探讨该连…

2024 前端javaScript+ES6

JavaScript 基础 1、基本数据类型: 1.1 基本数据类型: Number(数值):表示数字,包括整数和浮点数。例如:5、3.14。 String(字符串):表示文本数据&#xff…

Apache zookeeper kafka 开启SASL安全认证

背景:我之前安装的kafka没有开启安全鉴权,在没有任何凭证的情况下都可以访问kafka。搜了一圈资料,发现有关于sasl、acl相关的,准备试试。 简介 Kafka是一个高吞吐量、分布式的发布-订阅消息系统。Kafka核心模块使用Scala语言开发…

数据治理——滴滴大数据成本治理实践

原文大佬的这篇大数据平台成本治理实践是有借鉴意义的,这些摘抄下来用作沉淀学习。如有侵权,请告知~ 一、滴滴大数据成本治理总体框架 1.1 数据体系 从上图所示:最底层是以数据引擎为基础的数据存储,分为离线计算、实时计算、OL…

欧科云链做客Google Cloud与WhalerDAO专题论坛,畅谈Web3数据机遇

3月10日,由Google Cloud、WhalerDAO和baidao data主办,以Web3AI 2024 DATA POWER为主题的分享会在北京中关村举行。欧科云链高级研究员Jason Jiang受邀参加活动,带来“从链上数据发掘Web3时代的无限机遇”的主题分享。 Web3.0核心要素始终是链…

数据结构:6、栈

一、栈的概念 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。 压栈&#x…

分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测

分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测 目录 分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GSWOA-KELM分类&#xff0…

基于Java的天然气工程业务管理系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…

【how2j练习题】css部分课后练习

第一题 <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"> </head><style> body{font-family:"宋体";font-size:13px;color:#666666;width:643px;}.bold{font-weight:bold;}div.t…

C# wpf 使用GDI实现截屏

wpf截屏系列 第一章 使用GDI实现截屏&#xff08;本章&#xff09; 第二章 使用GDI实现截屏 第三章 使用DockPanel制作截屏框 第四章 实现截屏框热键截屏 第五章 实现截屏框实时截屏 第六章 使用ffmpeg命令行实现录屏 文章目录 wpf截屏系列前言一、导入gdi32方法一、NuGet获取…

【框架学习 | 第六篇】SpringBoot基础篇(快速入门、自动配置原理分析、配置文件、整合第三方技术、拦截器、文件上传/下载、访问静态资源)

文章目录 1.SpringBoot简介1.1原有Spring优缺点分析1.1.1Spring优点1.1.2Spring缺点 1.2SpringBoot概述1.2.1SpringBoot解决上述Spring的缺点1.2.2SpringBoot特点1.2.3SpringBoot核心功能 2.SpringBoot快速入门2.1代码实现2.1.1创建Maven工程2.1.2添加SpringBoot的起步依赖2.1.…