【有手就行】:从无到有搭建前端VUE项目

news2024/9/27 15:34:47

前言

由于好久没正儿八经写过前端代码了,导致现在想自己创建个VUE项目搞点东西却连步骤都忘了。反正闲着也是闲着,就简单归纳下,就当整理下笔记吧。

直接开始吧

本次教程主要以VUE 2.x版本为介绍

第一步 环境准备

1.安装Node
从 Node官网下载node.js,至于选哪个版本,看个人需要吧

Node.JS 在任何地方运行 JavaScript

2.配置Node
如果是安装包,系统会自动配置PATH,无需再另外配置;如果是免安装版,需要自己将Node路径配置到环境变量PATH里

# 配置淘宝镜像 加快下载速度
npm config set registry https://registry.npmmirror.com
# 安装cnpm,根据个人需要,可以不安装
npm install -g cnpm

3.安装VUE脚手架(全局安装)

# 2.x版本
npm install -g vue-cli 
# 3.x版本
npm install -g @vue/cli

第二步 创建VUE项目

1.首先进入一个提前准备好的项目路径,在该目录下执行创建命令

# 初始化一个项目 helloWord
# 2.x
vue init webpack helloWord 
# 3.x
vue create helloword

2.这里注意一下,在执行2.x版本安装命令后,下载vue-templates时可能会报超时,因为下载某些package时,国内互联网需要翻墙才可,所以有时会连接不上
在这里插入图片描述
3.这时候可以考虑改为离线创建,先手动把webpack下载下来,再依赖下载的webpack进行安装;
首先进入https://github.com/vuejs-templates/webpack GitHub地址,clone或者下载zip到本地;然后在本地用户目录下创建
.vue-templates目录(注意文件夹名前有个点),将下载的webpack解压到.vue-templates目录下
在这里插入图片描述
4.再执行vue init webpack helloWord命令的时候,带上参数–offline表示离线创建

# 初始化一个项目 helloWord
vue init webpack helloWord --offline

在这里插入图片描述
蓝色字样是安装过程中系统提示选择,需要用户根据个人需要自行选择;后面系统就会根据选择配置下载相关的package,下载完成后初始化就完成了
在这里插入图片描述
如果最开始 1 就成功了,就不用管2 3 4了。

最后一步 将项目跑起来

cd到刚创建的项目下,再执行启动命令

cd helloword
# 启动项目
npm run dev

看到以下信息后说明项目启动成功
在这里插入图片描述
进入浏览器,输入地址 http://localhost:8080,就能看到一个空项目的最初样子啦
在这里插入图片描述

写在最后

哈哈,新手教程,大佬勿喷

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

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

相关文章

战绩绿油油!全红婵巴黎奥运再度爆火,一个家庭兴旺的底层逻辑——早读(逆天打工人爬取热门微信文章解读)

上期点赞挺多呀,看来周六不上班的人真不少,羡慕呀! 引言Python 代码第一篇 洞见 全红婵巴黎奥运再度爆火,我顿悟一个家庭兴旺的底层逻辑第二篇 股市 绿油油战纪结尾 引言 今天很晚 没办法 今天上班都差点迟到 有两点 一是早上开始…

CodeSys中处理(拼接)超长字符串

文章目录 1.需求2.目前的限制3.解决方案4.注意事项4.1.更改字符串的长度后还是被限制在32767或者32768 1.需求 目前有个需求:在CodeSys中,需要将上万甚至十几万条数据(字符串)汇总到一个字符串上。 2.目前的限制 我们知道默认使…

8–9月,​Sui Move智能合约工作坊将在台北举行

你对区块链和去中心化应用感兴趣吗?想深入学习Sui Move编程语言吗? 从8月10日到9月28日,Sui Mover社区将在每周六下午13:00–17:00举办精彩的工作坊,为期两个月,带你从零基础入门到高级进阶,全面掌握Sui M…

Gateway网关设置请求头乱码

问题描述: ​ 在做gateway用户认证过程中,我们将前端传过来的token字符串进行解析以后,将用户信息存入请求头往下传递的过程中,如果用户信息中存在中文,下游服务从请求头中获取到用户信息时会出现乱码 ​ 总体来说&a…

担心异构数据库迁移踩“坑”?听听大咖们怎么说

在技术升级和国产化战略的双重推动下,如何将来自Oracle、MySQL等异构数据库的数据无缝迁移至国产数据库,已成为企业持续发展的关键一环。 YashanDB Meetup第13期特别邀请首届迁移体验官用户代表、TechTalk社区创始人尚雷,YashanDB 售后服务负…

【python】Scrapy中常见的“Response Not Ready”或“Response Not 200”错误分析及解决

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

家用洗地机有什么推荐的吗?洗地机口碑榜前四名推荐

随着日常清洁需求的提升,如今洗地机已成为现代家居清洁的好帮手,承担着家庭卫生的重要角色,而一台高效、便捷的洗地机更是成为了众多家庭清洁卫生必备工具。 不过市场上的洗地机品牌众多,每个品牌下又有诸多系列,让人…

动态规划之——背包DP(入门篇)

文章目录 概要说明01背包模板例题题意概要思路code1code2 01背包的应用题题目来源思路code 完全背包模板例题题意概要思路code 概要说明 本文只讲了01背包和完全背包,至于其他背包问题后续补充 01背包 模板例题 点击这里 题意概要 思路 01背包的模板题 首先对…

SAM 图像分割算法计算物体表面积

参考: https://enpeicv.com/forum.php?mod=viewthread&tid=90&extra=page%3D1 使用SAM算法进行图像分割,计算出分割图像有多少像素,然后根据像素数量计算实际面积 SAM安装及模型下载: https://github.com/facebookresearch/segment-anything?tab=readme-ov-file…

Gemini Pro 加持,谷歌 AI 笔记 Notebook LM 重磅升级!

在现在这种信息爆炸的时代,如何高效处理海量信息,已经成为困扰很多人的难题。如何整合来自不同来源的信息和想法,并在它们之间建立联系。这个过程,费时费力,还很容易让人抓狂,更别提还要从中提炼、归纳、整…

工作助手C#研究笔记(5)

通过示例对C#程序的结构逻辑进行研究梳理,虽然通过阅读相关书籍,但是来的效果更慢。一下相关内容可能有误,请谨慎听取。 TaskToDoList-master 1.XAML “XAML”是WPF中专门用于设计UI的语言,优点是 1.XAML可以设计出专业的UI和…

c# .Net Core 项目配置SWagger UI 带Token访问

简介 Swagger是一款强大的API管理工具,它主要用于生成、描述、调用和可视化RESTful风格的Web服务。Swagger通过一套标准的规范定义接口及其相关信息,从而能够自动生成各种格式的接口文档(如HTML、PDF、Markdown等),并…

知识库、微调、AI Agent

Agent执行工作的过程是需要大模型来配合的,大模型充当一个大脑,给Agent下达指令。Agent当接收到这个指令的时候,然后去执行。 大模型参数的数量直接影响大模型的生成能力和推理能力,也直接影响了大模型的使用效果。参数越多&…

【竞技宝】奥运会:日本U23惨败梦想破裂

奥运会男足8进4的比赛已经全部结束,夺冠热门阿根廷被东道主法国淘汰,埃及点球淘汰巴拉圭,摩洛哥4比0大胜美国,亚洲球迷关心的日本U23竟然惨败西班牙U23,让不少球迷都觉得意外。因为日本U23赛前被普遍看好,可是他们却被西班牙队全面压制,甚至毫无还手之力,这样的结果让球迷们不禁…

【linux】linux中定时任务的巧妙运用,让你轻松解放双手

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

书生·共学计划|训练营又开始啦!

🥰 在大模型技术的浪潮中,面对混杂的众多信息,如何获取有效、可信的学习资源成为了一项挑战。为此,我们推出“书生共学计划”,鼓励大家将实战营活动分享给你身边有需要的小伙伴,让每一位热爱技术的朋友都能…

无人机培训机构开办投资收益分析

一、引言 随着无人机技术的飞速发展及其在航拍、农业、测绘、物流等多个领域的广泛应用,市场对无人机专业人才的需求急剧增长。因此,开设无人机培训机构成为了一个具有广阔市场前景的投资项目。本报告旨在全面分析无人机培训机构开办的投资收益&#xf…

面向开发者的 LLM 入门教程-笔记和代码

本文是 DLAI 课程 ChatGPT Prompt Engineering for Developers 的笔记。这门课面向入门 LLM 的开发者,深入浅出地介绍了如何构造 Prompt 并基于 OpenAI 提供的 API 实现包括总结、推断、转换等功能,是入门 LLM 开发的经典教程。 Prompt(提示…

【BES2500x系列 -- RTX5操作系统】系统执行流程 -- 系统初始化 -- main函数 --(十一)

💌 所属专栏:【BES2500x系列】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#x1f49…

OJ-0805

题目 参考 import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int L1 scanner.nextInt();int L2 scanner.nextInt();int[] A new int[L1];int[] B new int[L2];fo…