当前位置: 首页 > news >正文

后端程序员学习前端开发之第一步环境搭建

一、安装 Node.js

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。Node.js官网

二、安装 npm 镜像

因为 npm 是国外的,所以使用起来速度比较慢。我们这里使用了淘宝的 cnpm 镜像安装 vue。使用淘宝的 cnpm 命令管理工具代替默认的 npm 管理工具。
进入cmd 输入命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装全局 vue-cli 脚手架

npm 镜像安装完成之后,接下来安装全局 vue-cli 脚手架。
进入 cmd,输入命令:cnpm install --global vue-cli 然后回车。

以上步骤全部完成后可以使用 vue 命令测试一下,出现如下结果为安装正常

PS E:\IdeaProjects\Reid\前端> vue
Usage: vue <command> [options]Options:-V, --version  output the version number-h, --help     output usage informationCommands:init           generate a new project from a templatelist           list available official templatesbuild          prototype a new projectcreate         (for v3 warning only)help [cmd]     display help for [cmd]

如果执行 vue 命令报错:vue : 无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅  https:/go.microsoft.com/fwlink/?LinkID=135170

解决方法:

1、以管理员身份运行 PowerShell
2、执行:get-ExecutionPolicy,回复 Restricted,表示状态是禁止的
3、执行:set-ExecutionPolicy RemoteSigned
4、选择:Y

四、创建项目

可以使用 vue create 项目名称 或 vue init webpack 项目名称 进行项目创建。

vue create 和 vue init webpack 的区别?
1、vue create:vue -cli3.x 版本的初始方式 ,启动方式默认为 npm run serve
2、vue init webpack : vue -cli2.x 版本的初始化方式,启动方式默认为 npm run dev ,webpack 为官方推荐模板

五、安装项目依赖

可以使用开发工具一键安装或者命令方式进入项目根目录使用命令 cnpm install 安装项目依赖环境即可。

六、运行项目

可以使用开发工具一键启动或者参考第四步按照创建项目方式进行启动即可。

相关文章:

后端程序员学习前端开发之第一步环境搭建

一、安装 Node.js Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。Node.js官网 二、安装 npm 镜像 因为 npm 是国外的&#xff0c;所以使用起来速度比较慢。我们这里使用了淘宝的 cnpm 镜像安装 vue。使用淘宝的 cnpm 命令管理工具代替默认的 npm 管理工具。 进入c…...

【记录问题】RuntimeError:working outside of application context. Flask使用SQLAlchemy数据库

前提&#xff1a;Flask使用SQLAlchemy数据库 本质&#xff1a;依赖包版本不匹配 问题1&#xff1a;报错RuntimeError&#xff1a;working outside of application context. 运行程序报错&#xff0c;如下错误&#xff1a; 原因&#xff1a;flask-sqlalchemy 版本过高导致&am…...

自动化测试难点案例分析,其实自动化你用错方向还不如不用

随着国内企业软件开发及测试水平的提升&#xff0c;许多企业开始尝试开展自动化测试的应用&#xff0c;以提高测试效率和测试质量。虽然在国外自动化测试工具应用已经很普遍&#xff0c;但国内许多企业对于软件自动化测试的理解还停留在表面上&#xff0c;没有深入的理解到企业…...

866363-70-4,N3-C5-NHS ester,叠氮-C5-NHS 主要物理性质分享

●外观以及性质&#xff1a;Azido-Aca-NHS淡黄色或无色油状&#xff0c;叠氮化物可以与炔烃、DBCO和BCN进行铜催化的点击化学反应。NHS酯可以与胺基反应&#xff0c;形成稳定的酰胺键。●中文名&#xff1a;叠氮-C5-NHS ester&#xff0c;6-叠氮己酸活性酯●英文名&#xff1a;…...

字符流定义及如何深入理解字符流的编码

IputSrem类和OupuSrem类在读写文件时操作的都是字节&#xff0c;如果希望在程序中操作字符&#xff0c;使用这两个类就不太方便&#xff0c;为此JDK提供了字符流。同字节流样&#xff0c;字符流也有两个抽象的顶级父类&#xff0c;分别是Reader和Writer其中&#xff0c;Reader是…...

什么是pod类型

很久很久以前&#xff0c;C 语言统一了江湖。几乎所有的系统底层都是用 C 写的&#xff0c;当时定义的基本数据类型有 int、char、float 等整数类型、浮点类型、枚举、void、指针、数组、结构等等。然后只要碰到一串01010110010 之类的数据&#xff0c;编译器都可以正确的把它解…...

2023年中小企业实施智能制造的建议

智能制造的载体是制造系统&#xff0c;制造系统从微观到宏观有不同的层次&#xff0c;主要包括制造装备、制造单元、制造车间&#xff08;工厂&#xff09;、制造企业和企业生态等。随着智能制造的深入推进&#xff0c;未来智能制造将向以下五个方向发展。 &#xff08;一&…...

【LeetCode】剑指 Offer 19. 正则表达式匹配 p124 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/zheng-ze-biao-da-shi-pi-pei-lcof/ 1. 题目介绍&#xff08;19. 正则表达式匹配&#xff09; 请实现一个函数用来匹配包含. 和*的正则表达式。模式中的字符.表示任意一个字符&#xff0c;而’*表示它前面的字符可以出现任意…...

linux和windows中安装emqx消息服务器

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号雄雄的小课堂 现在是&#xff1a;2023年3月1日21:53:55 前言 最近几天看了下mqtt&#xff0c;通过不断的搜索资料&#xff0c;也将mqtt集成到项目中&#xff0c;跑了个demo运行&#xff0c;和预想中的差不多&#x…...

【XXL-JOB】XXL-JOB的搭建和使用

【XXL-JOB】XXL-JOB的搭建和使用 文章目录【XXL-JOB】XXL-JOB的搭建和使用1. 任务调度1.1 实现任务调度1.1.1 多线程实现1.1.2 Timer实现1.1.3 ScheduledExecutor实现2. 分布式任务调度2.1 采用分布式的原因3. XXL-JOB3.1 XXL-JOB介绍3.2 执行流程4. 搭建XXL-JOB4.1 创建数据库…...

HCIP-5OSPF基本原理及基本配置学习笔记

1、OSPF基本原理 开放式最短路径优先OSPF&#xff08;Open Shortest Path First&#xff09;协议是IETF定义的一种基于链路状态的内部网关路由协议。 RIP是一种基于距离矢量算法的路由协议&#xff0c;存在着收敛慢、易产生路由环路、可扩展性差等问题&#xff0c;目前已逐渐被…...

Migrate your data into databend with DataX

现在互联网应用越来越复杂&#xff0c;每个公司都会有多种多样的数据库。通常是用最好的硬件来跑 OLTP&#xff0c;甚至还在 OLTP 中进行分库分表来满足业务&#xff0c;这样对于一些分析&#xff0c;聚合&#xff0c;排序操作非常麻烦。这也有了异构数据库的数据同步需求&…...

ssh: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password)

【ansible 设置host为localhost&#xff0c;执行ping命令报错】 [eniq-slocalhost ansible]$ ansible all -m ping -i inventory localhost | UNREACHABLE! > { "changed": false, "msg": "Failed to connect to the host via ssh: Perm…...

有限元中三角形的一些积分公式

文章目录有限元中三角形的相关积分公式有限元中三角形的相关积分公式 在 xyxyxy 平面中&#xff0c; 通过三个点 (xi,yi),(xj,yj),(xm,ym)(x_i, y_i), (x_j, y_j), (x_m, y_m)(xi​,yi​),(xj​,yj​),(xm​,ym​) 定义一个三角形&#xff0c; 令坐标原点位于其中心(或者重心)…...

【docker-compose】安装mongodb

1. 安装方式 压缩包容器安装docker&#xff08;推荐&#xff0c;一分钟安装&#xff09; 2. 环境 linux服务器已安装好 docker docker-compose &#xff08;不了解的客官&#xff0c;请点击进入&#xff09; 3. 步骤&#xff1a; Step 1&#xff1a; linux下建立如下目录…...

【ClickHouse源码】物化视图的写入过程

本文对 ClickHouse 物化视图的写入流程源码做个详细说明&#xff0c;基于 v22.8.14.53-lts 版本。 StorageMaterializedView 首先来看物化视图的构造函数&#xff1a; StorageMaterializedView::StorageMaterializedView(const StorageID & table_id_,ContextPtr local_…...

.NET 使用NLog增强日志输出

引言 不管你是开发单体应用还是微服务应用&#xff0c;在实际的软件的开发、测试和运行阶段&#xff0c;开发者都需要借助日志来定位问题。因此一款好的日志组件将至关重要&#xff0c;在.NET 的开源生态中&#xff0c;目前主要有Serilog、Log4Net和NLog三款优秀的日志组件&…...

一道阿里类的初始化顺序笔试题

问题很简单&#xff0c;就是下面的代码打印出什么&#xff1f; public class InitializeDemo {private static int k 1;private static InitializeDemo t1 new InitializeDemo("t1" );private static InitializeDemo t2 new InitializeDemo("t2");priv…...

cuda找不到路径报错

编译C文件时出现&#xff1a;error: [Errno 2] No such file or directory: :/usr/local/cuda:/usr/local/cuda/bin/nvcc 在终端输入&#xff1a; export CUDA_HOME/usr/local/cuda...

Elasticsearch进阶之(核心概念、系统架构、路由计算、倒排索引、分词、Kibana)

Elasticsearch进阶之&#xff08;核心概念、系统架构、路由计算、倒排索引、分词、Kibana&#xff09; 1、核心概念&#xff1a; 1.1、索引&#xff08;Index&#xff09; 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&…...

想为小说配图?试试圣女司幼幽-造相Z-Turbo,我的真实使用体验

想为小说配图&#xff1f;试试圣女司幼幽-造相Z-Turbo&#xff0c;我的真实使用体验 1. 为什么我需要这个AI绘画工具 作为一名网络小说作者&#xff0c;我经常遇到一个难题&#xff1a;如何在社交媒体上为我的小说章节配上吸引人的插图。找画师定制价格昂贵&#xff0c;自己学…...

23种设计模式 - 建造者模式(Builder)

建造者模式&#xff08;Builder&#xff09;—— 一步一步拼出来 大白话解释 你去点外卖套餐&#xff0c;可以自己一步步选&#xff1a; 选主食&#xff08;汉堡 / 鸡腿&#xff09;选饮料&#xff08;可乐 / 橙汁&#xff09;选大小&#xff08;中杯 / 大杯&#xff09;要不要…...

L1-083 谁能进图书馆,python解法

题目&#xff1a;为了保障安静的阅读环境&#xff0c;有些公共图书馆对儿童入馆做出了限制。例如“12 岁以下儿童禁止入馆&#xff0c;除非有 18 岁以上&#xff08;包括 18 岁&#xff09;的成人陪同”。现在有两位小/大朋友跑来问你&#xff0c;他们能不能进去&#xff1f;请…...

Qwen3智能字幕对齐系统在CSDN技术视频生态中的应用实践

Qwen3智能字幕对齐系统在CSDN技术视频生态中的应用实践 1. 引言 做技术视频的博主和讲师们&#xff0c;应该都遇到过这样的烦恼吧。辛辛苦苦录完一个小时的编程教程&#xff0c;光是剪辑和加字幕就得再花上大半天。尤其是字幕&#xff0c;要么得自己一句一句听写&#xff0c;…...

CherryStudio 在火山引擎上的实战应用:构建高可用微服务架构

在微服务架构大行其道的今天&#xff0c;我们团队也面临着许多开发者共同的烦恼&#xff1a;服务数量一多&#xff0c;管理起来就头疼。服务之间怎么互相找到对方&#xff1f;流量来了怎么公平分配&#xff1f;某个服务挂了会不会引发雪崩&#xff1f;这些问题不解决&#xff0…...

nli-distilroberta-base一文详解:开源NLI大模型在语义推理场景的落地应用

nli-distilroberta-base一文详解&#xff1a;开源NLI大模型在语义推理场景的落地应用 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于判断两个句子之间的逻辑关系。这个轻量级模型继承了RoBERTa的强大语义理…...

https://docker.m.daocloud.io/v2 访问失败

目录 2. 测试 mirror 能不能访问&#xff08;很关键&#xff09; 正常&#xff1a; 修改docker-compose ① 改 compose ② 拉镜像 ③ 启动 2. 测试 mirror 能不能访问&#xff08;很关键&#xff09; 比如&#xff1a; curl -I https://docker.m.daocloud.io/v2/ 正常&…...

Anomalib使用

Anomalib 是一个专注于视觉异常检测的开源库&#xff0c;旨在为开发者、研究人员和工业用户提供一站式解决方案。无论是检测生产线上的产品缺陷、监控视频中的异常行为&#xff0c;还是识别医疗影像中的病灶&#xff0c;Anomalib 都能胜任。其设计理念是简单、模块化、高效&…...

HarmonyOS 6实战:Router与Navigation混合路由的转场实战

一、问题现象与影响在HarmonyOS 6应用开发中&#xff0c;随着应用复杂度提升&#xff0c;开发者常常需要混合使用ArkUI的Router&#xff08;页面级路由&#xff09;和Navigation&#xff08;容器级导航&#xff09;两种导航机制。然而&#xff0c;当从基于Router的页面跳转到Na…...

OpenClaw任务调度:GLM-4.7-Flash定时执行方案

OpenClaw任务调度&#xff1a;GLM-4.7-Flash定时执行方案 1. 为什么需要定时任务调度 上周我需要每天凌晨自动生成一份技术日报&#xff0c;手动操作既耗时又容易遗忘。当我尝试用OpenClaw对接本地部署的GLM-4.7-Flash模型时&#xff0c;发现原生的对话式交互无法满足周期性任…...