详解VUE脚手架之安装

简介: 详解VUE脚手架之安装

👉引言💎


学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。 热爱写作,愿意让自己成为更好的人............

铭记于心
🎉✨🎉我唯一知道的,便是我一无所知🎉✨🎉


1 安装node平台


  • 首先要安装node.js,什么是node.js?
    首先要清楚Node不是一个Web服务器,这十分重要。它本身并不能做任何事情。它无法像Apache那样工作。如果你希望它成为一个HTTP服务器,你必须借助它内置库自己编写。Node.js只是计算机上执行代码的另一种方式,它是一个简单的JavaScript Runtime.
    简单的说 Node.js 就是运行在服务端的 JavaScript,是一个运行时环境
    Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好
    官方下载地址

image.png


2 相关配置


  • 首先好下载好压缩包后,进入解压后的文件夹,然后进行环境变量的配置,这样系统才可以在全局环境中找到node工具箱的位置,使用命令****进行测试,通过这个命令可以查看node的版本

image.png

  • 如果不是最新版,可能对于一些命令不兼容,这里提供升级npm为最新版的命令: npm install -g npm@8.17.0

image.pngimage.png

  • 随后需要设置一下配置文件以及缓存文件的位置,也就是以下的命令,将后面的路径改成自己安装node文件的路径即可

image.png


3 下载vue moudle


在node.js平台安装配置好之后,就可以进行下一步模块的安装,举vue为例 安装命令如下:****

image.png

  • 配置调用模块命令的环境变量,路径填vue.cmd所在的根目录:

image.png

  • 检验

image.png

同理,安装vue脚手架 npm install vue-cli


4 搭建Vue项目


cd到目标安装文件夹,打开cmd窗口,输入vue create 项目名 命令创建vue项目,由于该命令是vue-cli3才有的,所以要先将脚手架升级成3版本,如果版本不符,cmd中会有相关命令提示,照做升级即可

image.png

随后,选择创建项目的脚手架版本

image.pngimage.png

  • 进入目标目录查看是否安装成功:

image.png

  • 启动项目 npm run serve

image.png

大功告成

🌹写在最后💖: 路漫漫其修远兮,吾将上下而求索!伙伴们,再见!🌹🌹🌹


相关文章
|
2月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
269 2
|
20天前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
240 137
|
5月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
683 0
|
4月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
352 1
|
4月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
192 0
|
JavaScript
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
|
JavaScript 数据可视化 前端开发
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
369 0
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
|
7月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
944 4
|
5月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
6月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
723 77