VUE2脚手架的下载与安装

embedded/2025/3/11 1:06:06/

1.确保npm能用(安装Node.js)

Node.js的下载地址:

Node.js — Download Node.js®

直接下一步下一步安装就行

安装结束后,打开终端,输入npm命令,注意配置环境变量

2.

Vue CLI(脚手架安装)

1、 Vue的脚手架简介

Vue的脚手架(Vue CLI: Command Line Interface)是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码,并且可以将这些代码自动发布到它自带的服务器上,为我们Vue的开发提供了一条龙服务。脚手架官网地址:

Vue CLI

注意:Vue CLI 4.x需要Node.js v8.9及以上版本,推荐v10以上。

2、脚手架安装步骤:

① 建议先配置一下npm镜像:(可装可不装)

1) 豆瓣镜像:npm config set registry http://pypi.douban.com/simple/

清华镜像:npm config set registry Simple Index

切回原来的npm包:npm config set registry https://registry.npmjs.org

2)终端输入: npm config get registry

返回成功对应进行地址,表示设置成功

② 第一步:安装脚手架(全局方式:表示只需要做一次即可)

1) npm install -g @vue/cli

2) 安装完成后,重新打开DOS命令窗口,输入vue --version命令查看脚手架版本

有版本信息,表示成功

注意:环境变量的配置

npm config get prefix 获取node的位置

编辑系统变量--->高级--->环境变量--->系统变量---->path-->node的位置

③ 第二步:创建项目(项目中自带脚手架环境,自带一个HelloWorld案例)

第一种方式

1) 切换到要创建项目的目录,然后使用 vue create vue_pro

这里选择Vue2,

babel:负责ES6语法转换成ES5。

eslint:负责语法检查的。

回车之后,就开始创建项目,创建脚手架环境(内置了webpack loader),自动生成HelloWorld案例。

③ 第三步:编译Vue程序,自动将生成html css js放入内置服务器,自动启动服务。

1) dos命令窗口中切换到项目根:cd vue_pro

2) 执行:npm run serve,这一步会编译HelloWorld案例

ctrl + c停止服务。

3) 打开浏览器,访问:http://localhost:8080

第二种方式

在终端输入vue ui 运行之后跳转到http://localhost:8000/dashboard

点击左上角wordvue选择Vue项目管理器,打开之后可以创建项目 也可以打开之前已有的项目

选择创建项目,然后选择项目所在的目录,这次依旧放在桌面上

填写项目名称,包管理一般选默认,git仓库看个人需求

预设就是手动选择配置项,和第一种方法一样

配置也是一样的

创建成功之后,会自动进入app项目

安装依赖(用vue ui安装依赖非常简单,直接搜索然后安装)


http://www.ppmy.cn/embedded/171625.html

相关文章

Android 低功率蓝牙之BluetoothGattCharacteristic详解

BluetoothGattCharacteristic 是 Android 蓝牙低功耗(BLE)开发中的一个核心类,用于表示 GATT(Generic Attribute Profile)服务中的特征值(Characteristic)。特征值是 BLE 设备之间通信的基本数据…

我的第一个CVE漏洞挖掘之旅

目录: 为什么选择 Moodle? 我该从哪里开始? 寻找漏洞 源点(Sources)和同步点(Syncs) 更大的影响 本文介绍我是如何在一个开源项目中找到我的第一个 CVE 漏洞(CVE-2025–26529&#…

【动手实验】TCP orphan socket 的产生与消亡

之前在实验中提到了 tcp_max_orphans 和 tcp_orphan_retries 两个参数,我们使用 ss -s 命令查看当前系统中的 socket 状态也有 orphan 状态的 socket,本篇文章我们就来分析下到底什么情况下的 socket 才会被视为 orphan socket。 # ubuntu node1 in ~ …

Calico-BGP FullMesh模式与RR模式 Day04

1. BGP协议简单介绍 BGP是什么?BGP是如何工作的? - 华为 Configure BGP peering | Calico Documentation 1.1 什么是BGP 边界网关协议(BGP)是一种用于在网络中的路由器之间交换路由信息的标准协议。每台运行 BGP 的路由器都有一…

彻底解决 k8s xxx 命名空间卡在 ​Terminating 的问题

前言 在 Kubernetes 集群管理中,命名空间(Namespace)卡在 Terminating 状态是一个常见但棘手的问题。这种状态通常由资源残留、Finalizers 未完成清理或控制器异常导致。本文将结合实践案例和底层原理,提供一套完整的解决方案&am…

从技术角度看大语言模型进化技术路线与落地应用详解:未来的最佳实践方向是什么?

文章大纲 **一、模型架构创新:从Transformer到下一代架构****二、训练与优化技术:从暴力Scaling到精细调控****三、数据与知识工程:从粗放喂养到智能增强****四、应用层进化:从通用能力到垂直场景突破****五、伦理与可持续性技术**未来技术路线图参考文献**一、大模型架构创…

Android paging初识

嗯,用户之前已经问过关于Android Paging库的问题,现在又提到了同样的困惑,可能说明他们在实际学习中遇到了困难,或者在项目应用过程中遇到了障碍。用户可能已经尝试过学习Paging库,但感觉复杂,导致犹豫是否…

软件测试的基础入门(二)

文章目录 一、软件(开发)的生命周期什么是生命周期软件(开发)的生命周期需求分析计划设计编码测试运行维护 二、常见的开发模型瀑布模型流程优点缺点适应的场景 螺旋模型流程优点缺点适应的场景 增量模型和迭代模型流程适应的场景…