node环境创建Vue项目

news2024/10/6 14:34:54

node环境创建Vue项目

目录

  • node环境创建Vue项目
    • 安装node.js
    • 安装Vue
    • 创建Vue项目

安装node.js

【1】.官网下载

image-20240428204742087

【2】.选择路径

image-20240428204839301

【3】配置环境变量

image-20240428204958432

后面就是一路next完成安装

【4】测试

cmd输入node指令,显示版本号证明安装成功

image-20240428205120362

安装Vue

【1】安装cnpm

这是由淘宝提供的npm镜像,以后装模块用它代替npm

npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装失败可以尝试以下方法
方案【1】:

清空缓存
npm cache clean --force

关闭SSL验证
npm config set strict-ssl false

安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )

方案【2】:

清空缓存
npm cache clean --force

切换新源
npm config set registry https://registry.npmmirror.com

查看源是否设置成功
npm config get registry

安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )

【2】安装Vue脚手架

cnpm install -g @vue/cli

【3】创建Vue项目

vue create myfirstvue
  • myfirstvue为自定义的项目名
  • 项目会根据你cmd当前路径,如有需要请自行更换

【4】选择预设项目

image-20240428211636902

可以使用默认配置,但这里我选择自行创建Manually select features

【5】选择自带配置

image-20240428211815658

空格是勾选,回车确认

这里使用的是vue2因此选2.x

image-20240428211903901

【6】确认

image-20240428211945122

【7】完成并创建依赖包

image-20240428211957008

如果想要保存该配置可以在这里选y然后为配置命名

image-20240428212216300

创建Vue项目

完成以上配置后便可以再次在终端输入vue create myvuepjt创建项目

然后会在该路径下生成一个文件夹,直接用webstorm打开

image-20240428212659170

  • 打开项目之后更改启动配置

image-20240428214949562

  • 添加新的npm配置

image-20240428215026236

  • 脚本选择server

image-20240428215050206

  • 等待环境搭建

image-20240428215122127

  • 搭建成功进入Local路由

image-20240428215152111

  • 出现该页面则表示已经完成了项目的搭建

image-20240428215225680

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

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

相关文章

8.SysTick定时器

SysTick为系统滴答定时器 定时器分类 内核级定时器(系统滴答定时器) 延时定时中断(给系统提供时钟节拍)给操作系统提供时基(任务调度)FreeRTOS UCOS5ms 基本定时器 延时定时中断时间片(实现两盏LED灯同时以一个不同速度闪烁,轮询…

超越GPT-4,清华发布网页导航智能体AutoWebGLM

随着大语言模型(LLMs)的发展,Agent在网络导航等任务中展现出了前所未有的能力。想象一下,一个基于LLM的Agent能够在你享用早餐时为你总结在线新闻,这样的场景已经不再遥不可及。这种将LLMs融入日常任务的做法&#xff…

1Panel - 现代化、开源的 Linux 服务器运维管理面板

产品介绍 1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。 1Panel的官方网站:https://1panel.cn 1Panel的GitHub仓库:https://github.com/1Panel-dev/1Panel 体验环境:https://demo.1panel.cn 1Panel 特点 开源特性 Star 数…

LLaMA 3:大模型之战的新序幕

作者 | 符尧 OneFlow编译 翻译|杨婷、宛子琳、张雪聃 本文要点概览: 文本数据的扩展可能已经达到了极限,因为易于获取的网络文本资源(如Common Crawl、GitHub、ArXiv等)已基本被充分利用。 尽管如此,通过更…

JAVASE->数据结构|顺序表底层逻辑

✅作者简介:大家好,我是橘橙黄又青,一个想要与大家共同进步的男人😉😉 🍎个人主页:再无B~U~G-CSDN博客 目标: 1. 什么是 List 2. List 常见接口介绍 3. …

js 中的非空断言操作符 (!.)叹号加点

js 中的非空断言操作符 (!.)叹号加点 在 TypeScript 或 JavaScript 中,!.并不是一个官方的语法结构。然而,!符号在 TypeScript 中确实有特定的用法,它被称为非空断言操作符。 !通常用作逻辑非操作符,用于…

cuda和cudnn的安装(ubuntu22.04环境)

一、安装准备 安装依赖 sudo apt-get update sudo apt-get install g sudo apt-get install gcc sudo apt-get install make禁用默认驱动 sudo gedit /etc/modprobe.d/blacklist.conf 在末尾加上 blacklist nouveau options nouveau modeset0更新一下initramfs -u的镜像 s…

自动驾驶横向控制算法

本文内容来源是B站——忠厚老实的老王,侵删。 三个坐标系和一些有关的物理量 使用 frenet坐标系可以实现将车辆纵向控制和横向控制解耦,将其分开控制。使用右手系来进行学习。 一些有关物理量的基本概念: 运动学方程 建立微分方程 主要是弄…

【跟我学RISC-V】认识RISC-V指令集并搭建实验环境

写在前面 现在计算机的体系架构正是发展得如火如荼的时候,占领桌面端市场的x86架构、占领移动端市场的arm架构、在服务器市场仍有一定地位的mips架构、国产自研的指令集loongarch架构、还有我现在要讲到的新型开源开放的RISC-V指令集架构。 我先说一说我的学习经历…

第9章 知识产权

一、著作权 (一)版权 版权,亦称“著作权”,符号:©。指作者或其他人(包括法人)依法对某一著作物享受的权利。 1、人身权 包括发表权、署名权、修改权、限制。发表权为著作人终身及其死后…

编程代码查重 比赛防作弊 图形界面代码查重工具SIM 支持c++ python java c语言下载

SIM,全称The software and text similarity tester SIM,是Dick grune开发的一款代码查重软件。比较轻量级,也被一些OJ集成用来查重(如hustoj)。但由于软件本身是命令行软件(就是小黑框框的那种)…

IDEA 中的奇技淫巧

IDEA 中的奇技淫巧 书签 在使用ctrlalt方向键跳转时,或者追踪代码时,经常遇到的情况是层级太多,找不到代码的初始位置,入口。可以通过书签的形式去打上一个标记,后续可以直接跳转到书签位置。 标记书签:c…

DevTools failed to load SourceMap: Could not load content for http://127.0.0

运行时报错: DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:64311/.sourcemap/mp-weixin/pages/***/***.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILUREDevTools failed to load SourceMap: Could …

CommonJS-模块与ES模块简单了解与区别

文章目录 CommonJS 模块与ES模块简单了解与区别一、简介二、区别1.语法差异2.实现差异 三、其他 CommonJS 模块与ES模块简单了解与区别 今天在用vite构建项目时,用了module.exports写法一直报错,后面了解是因为commonJS模块(以下简称CJS)与E…

改进了洗搞提示词后,Kimi的效果竟秒杀GPT4.0!

大家好,我是五竹。 在《玩转GPT指南》中的AI爆文写作专项中提过,新人使用AI创作爆文最快的流程就是:找对标文章->使用AI对对标文章进行仿写/改写/原创。 其中改写最简单但缺点也很明显,就是和原文的重复率过高,我…

前端可以掌握的nginx相关操作

一、前言: 在日常开发中,前端工程师可以把打好的前端包直接放到测试服务器上,自己再验证功能是否改好,这样可以提高开发效率,写篇笔记记录一下我个人用到的命令 二、使用的工具 用MobaXterm完成相关操作&#xff0c…

java语言开发的商城系统有哪些?

最近,有小伙伴问我有没有靠谱的java商城系统,经过我一顿扒拉,终于给大家整理出来了。 目前java语言开发的商城系统主要有shop、javashop、ejavashop、yuanfeng、mall4j、lilishop等。在没有深入了解这些系统前,我们可以从产品推出…

两种类型的二叉搜索树

文章目录 1.搜索二叉树的概念2.搜索二叉树的模拟实现2.1 搜索二叉树的结构2.2 插入2.3 查找2.4 删除2.5 中序遍历2.6 完整代码 3.二叉搜索树的两种模型3.1 两种模型3.2 key_value模型搜索二叉树 4.两种二叉树的测试 1.搜索二叉树的概念 二叉搜索树又称二叉排序树,它…

【Canvas与艺术】 绘制五星红旗

【注意】 该图中五星定位和大小都是按 https://www.douyin.com/note/7149362345016380710 精确绘制的。 【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8&q…

[iOS]组件化开发

一、组件化开发基础 1.组件定义 在软件开发中&#xff0c;一个组件是指一个独立的、可替换的软件单元&#xff0c;它封装了一组相关的功能。组件通过定义的接口与外界交互&#xff0c;并且这些接口隔离了组件内部的实现细节。在Swift语言中&#xff0c;组件可以是一个模块、一…