vue入门环境搭建及demo运行

article/2025/6/5 11:48:10

提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

        • vue简介:
        • 第一步:安装node.js
        • node简介
        • 第二步:安装vue.js
        • 第三步:安装vue-cli工具
        • 第四步 :安装webpack
        • 第五步:创建vue的demo项目
          • demo目录结构
        • 第六步:运行vue的demo项目


vue简介:

Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

第一步:安装node.js

下载链接https://nodejs.org/en/
nodejs下载链接

node简介

Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器,他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说,Node.js就是服务器程序,是用来做后端的技术,不能直接用于前端开发。但是干前端的学会了会更加的牛逼,对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发,能够高效的打通前后端,所以vue也是采用他作为配置环境,便于大型项目的开发。

如何查看是否安装成功:黑窗口(命令行)中输入:node -v 

image.png

第二步:安装vue.js

打开cmd命令框,输入 npm install vue
如下图:
image.png

第三步:安装vue-cli工具

Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用

打开cmd命令框,输入 npm install --global vue-cli

第四步 :安装webpack

打开cmd命令框,输入 npm install webpack -g

第五步:创建vue的demo项目

进入到你想要存放项目的目录下,执行该命令( vue init webpack 项目名称):
vue init webpack demo_vue
demo项目及生成。
image.png

demo目录结构

image.png

第六步:运行vue的demo项目
 cd demo_vue   //进入到刚创建的项目中  
$ npm install     
$ npm run dev     //运行项目 在浏览器直接访问:http://localhost:8080/即可

image.png

image.png


http://www.hkcw.cn/article/tpbFjrHlUW.shtml

相关文章

OpenCV CUDA模块图像处理------图像融合函数blendLinear()

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 该函数执行 线性融合(加权平均) 两个图像 img1 和 img2,使用对应的权重图 weights1 和 weights2。 融合公式…

“packageManager“: “pnpm@9.6.0“ 配置如何正确启动项目?

今天在学习开源项目的时候,在安装依赖时遇到了一个报错 yarn add pnpm9.6.0 error This projects package.json defines "packageManager": "yarnpnpm9.6.0". However the current global version of Yarn is 1.22.22.Presence of the "…

物联网数据归档之数据存储方案选择分析

在上一篇文章中《物联网数据归档方案选择分析》中凯哥分析了归档设计的两种方案,并对两种方案进行了对比。这篇文章咱们就来分析分析,归档后数据应该存储在哪里?及存储方案对比。 这里就选择常用的mysql及taos数据库来存储归档后的数据吧。 你在处理设备归档表存储方案时对…

八.MySQL复合查询

一.基本查询回顾 分组统计 group by 函数作用示例语句说明count(*)统计记录条数select deptno, count(*) from emp group by deptno;每个部门有多少人?sum(sal)某字段求和select deptno, sum(sal) from emp group by deptno;每个部门总工资avg(sal)求平均值select…

智能补丁管理:终结安全漏洞,开启自动化运维新时代

漏洞风暴:数字化时代的隐形战场 全球安全态势的范式转移 近年来,终端层漏洞已成为企业安全防线的最大突破口。根据美国国家标准与技术研究院(NIST)的监测数据,2023年新披露的高危漏洞数量同比增长62%,其中…

大模型 提示模板 设计

大模型 提示模板 设计 论文介绍:LangGPT - 从编程语言视角重构大语言模型结构化可复用提示设计框架 核心问题: 现有提示工程缺乏结构化设计模板,依赖经验优化,学习成本高且复用性低,难以支持提示的迭代更新。 创新思路: 受编程语言的结构化和可复用性启发,提出LangGP…

不连网也能跑大模型?

一、这是个什么 App? 你有没有想过,不用连网,你的手机也能像 ChatGPT 那样生成文字、识别图片、甚至回答复杂问题?Google 最近悄悄发布了一个实验性 Android 应用——AI Edge Gallery,就是为此而生的。 这个应用不在…

基于开源AI大模型与AI智能名片的S2B2C商城小程序源码优化:企业成本管理与获客留存的新范式

摘要:本文以企业成本管理的两大核心——外部成本与内部成本为切入点,结合开源AI大模型、AI智能名片及S2B2C商城小程序源码技术,构建了企业数字化转型的“技术-成本-运营”三维模型。研究结果表明,通过AI智能名片实现获客留存效率提…

【AFW+GRU(CNN+RNN)】Deepfakes Detection with Automatic Face Weighting

文章目录 Deepfakes Detection with Automatic Face Weighting背景pointsDeepfake检测挑战数据集方法人脸检测面部特征提取自动人脸加权门控循环单元训练流程提升网络测试时间增强实验结果Deepfakes Detection with Automatic Face Weighting 会议/期刊:CVPRW 2020 作者: …

【Zephyr 系列 6】使用 Zephyr + BLE 打造蓝牙广播与连接系统(STEVAL-IDB011V1 实战)

🧠关键词:Zephyr、BLE、广播、连接、GATT、低功耗蓝牙、STEVAL-IDB011V1 📌适合人群:希望基于 Zephyr 实现 BLE 通信的嵌入式工程师、蓝牙产品开发人员 🧭 前言:为什么选择 Zephyr 开发 BLE? 在传统 BLE 开发中,我们大多依赖于厂商 SDK(如 Nordic SDK、BlueNRG SD…

【前端后端环境】

学习视频【带小白做毕设02】从0开始手把手带你做Vue框架的快速搭建以及项目工程的讲解 C:\Users\Again>java -version java version "21.0.1" 2023-10-17 LTS Java(TM) SE Runtime Environment (build 21.0.112-LTS-29) Java HotSpot(TM) 64-Bit Server VM (buil…

机器学习:决策树和剪枝

本文目录: 一、决策树基本知识(一)概念(二)决策树建立过程 二、决策树生成(一)ID3决策树:基于信息增益构建的决策树。(二)C4.5决策树(三&#xff…

【Vmware】虚拟机安装、镜像安装、Nat网络模式、本地VM8、ssh链接保姆篇(图文教程)

文章目录 Vmware下载Vmware安装镜像安装虚拟机安装网络模式Nat模式设置ssh链接 更多相关内容可查看 Vmware下载 官网下载地址:https://vmoc.waltzsy.com/?bd_vid8868926919570357435#goods Vmware安装 以管理员身份运行 弹框如下,点击下一步 我同意&…

移动端测试岗位高频面试题及解析

文章目录 一、基础概念二、自动化测试三、性能测试四、专项测试五、安全与稳定性六、高级场景七、实战难题八、其他面题 一、基础概念 移动端测试与Web测试的核心区别? 解析:网络波动(弱网测试)、设备碎片化(机型适配&…

什么是“草台班子”?

“草台班子”是一个常用的汉语俗语,其含义在不同语境下略有差异,核心特点是强调组织或团队的非专业性、临时性和不规范性。以下从原意、引申义、常见用法三方面展开说明: 一、原意:传统戏曲中的流动演出团体 起源: 最…

无人机避障——感知部分(Ubuntu 20.04 复现Vins Fusion跑数据集)胎教级教程

硬件环境:NVIDIA Jeston Orin nx 系统:Ubuntu 20.04 任务:跑通 EuRoC MAV Dataset 数据集 展示结果: 编译Vins Fusion 创建工作空间vins_ws # 创建目录结构 mkdir -p ~/vins_ws/srccd ~/vins_ws/src# 初始化工作空间&#xf…

AI网校平台开发探索:集成直播、考试题库、白板互动的教育系统源码

当下,如何构建一个真正符合“未来教育”形态的网校平台,成为越来越多教育机构与技术团队关注的焦点。本篇文章,笔者想对教育系统源码的理解与实践,尤其是围绕直播、录播、考试题库与白板互动等核心功能的整合探索。 一、教育行业…

景区停车预警系统:从检测到疏导,告别拥堵!

节假日景区门口堵成长龙,游客找车位难,管理压力大?一套智能停车预警疏导系统是关键。4G地磁检测技术,是构建这套系统的稳定基石。 一、车位实时检测:数据精准是基础 知道车位有没有车、有多少空位是第一步。4G地磁埋…

仓颉项目调试配置与多文件场景下的问题解析

1. 调试配置指南 在 VS Code 中配置好仓颉开发工具链后,只需按下 F5 或 Fn F5 即可启动调试。 在 CodeArts IDE for Cangjie 中,需先通过右上角的 编辑配置 -> 新增配置项 -> 选择 Cangjie (cjdb) Debug -> 选择 launch 模式 -> 点击 确认…