【零基础入门VUE】VueJS - 环境设置

news2024/10/7 4:37:14

面向读者:所有人

所属专栏:零基础入门VUE专栏https://blog.csdn.net/arthas777/category_12537076.html

 

直接在 HTML 文件中使用 <script> 标签

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

访问 VueJS 的主页https://vuejs.org/v2/guide/installation.html并根据需要下载 vue.js。有两个版本可供使用——生产版本和开发版本。开发版本未最小化,而生产版本已最小化,如以下屏幕截图所示。开发版本将有助于项目开发过程中的警告和调试模式。

安装

使用CDN

我们还可以开始使用 CDN 库中的 VueJS 文件。链接https://unpkg.com/vue将提供最新版本的 VueJS。VueJS 还可以在 jsDelivr ( https://cdn.jsdelivr.net/npm/vue/dist/vue.js ) 和 cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/ ) 上使用vue.js)。

如果需要的话,我们可以在我们这边托管这些文件并开始 VueJS 开发。

使用 NPM

对于使用 VueJS 的大型应用程序,建议使用 npm 包安装。它配备了 Browserify 和 Webpack 以及其他必要的工具,有助于开发。以下是使用 npm 安装的命令。

npm  install vue

使用 CLI 命令行

VueJS 还提供 CLI 来安装 vue 并开始服务器激活。要使用 CLI 进行安装,我们需要安装 CLI,这是使用以下命令完成的。

npm install --global vue-cli

CLI 命令行

完成后,它会显示 VueJS 的 CLI 版本。安装需要几分钟时间。

+ vue-cli@2.8.2
added 965 packages in 355.414s

以下是使用 Webpack 创建项目的命令。

vue init webpack myproject

选择命令提示符

首先,请使用以下命令。

cd myproject
npm install
npm run dev

命令提示符

国家公共管理

一旦我们执行 npm run dev,它就会启动服务器并提供在浏览器中显示的 url,如下图所示。

欢迎来到 VueJS

使用 CLI 的项目结构如下所示。

命令行界面

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

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

相关文章

Spark 集群搭建

文章目录 搭建前准备安装搭建解压并重命名环境变量配置配置文件yarn-site.xmlspark-env.sh 官网求 π(PI) 案例启动spark-shell通过浏览器查看显示查看 Spark 的网页信息展示 搭建前准备 下载地址&#xff1a;Index of /dist/spark (apache.org) 配置好 hadoop 环境&#xff…

实战 | 使用OpenCV快速去除文档中的表格线条(步骤 + 源码)

导 读 本文主要介绍如何使用OpenCV快速去除文档中的表格线条,并给详细步骤和代码。 背景介绍 测试图如下,目标是去除下面三张图中的表格线条,方便后续图像处理。 实现步骤 下面演示详细步骤,以图1为例: 【1】获取二值图像:加载图像、转为灰度图、OTSU二值化 i…

Awesome Chrome Form UI - 框架设计与基础实现

Money is not evil by itself. Its just paper with perceived value to obtain other things we value in other ways. If not money what is evil you may ask? Evil is the unquenchable, obsessive and moral bending desire for more. Evil is the bottomless,soulless …

多模态大模型-CogVLm 论文阅读笔记

多模态大模型-CogVLm 论文阅读笔记 COGVLM: VISUAL EXPERT FOR LARGE LANGUAGEMODELS 论文地址 :https://arxiv.org/pdf/2311.03079.pdfcode地址 : https://github.com/THUDM/CogVLM时间 : 2023-11机构 : zhipuai,tsinghua关键词: visual language model效果:&#xff08;2023…

C++面向对象(OOP)编程-C++11新特性详解

C11作为一个重要的版本&#xff0c;引入了很多新的特性&#xff0c;解决了C语言本身很多遗留的内存泄露问题&#xff0c;并且提供了很多比较灵活的用法。引入的auto&#xff0c;智能指针、线程机制都使得C语言的灵活性、安全性、并发性有了很大的提升。 本文会比较详细的介绍C1…

医疗行业的信息安全现状

文章目录 前言一、医疗行业相关政策法规二、“互联网+医疗健康”推进信息安全建设三、医疗行业网络安全形势依然严峻1、等级保护工作未全面开展落实2、医疗行业网络安全风险较高医疗行业网络安全隐患普遍存在遭受勒索病毒攻击严重3、安全防护水平相对落后缺乏必要的网络安全防护…

QT应用篇 三、QML自定义显示SpinBox的加减按键图片及显示值效果

QT应用篇 一、QT上位机串口编程 二、QML用Image组件实现Progress Bar 的效果 三、QML自定义显示SpinBox的加减按键图片及显示值效果 文章目录 QT应用篇前言一、qml需求二、使用组件1.SpinBox组件2.SpinBox中QML的使用 总结 前言 记录自己学习QML的一些小技巧方便日后查找 QT的…

rsync备份工具

有了同步源服务器之后&#xff0c;就可以使用rsync工具来执行远程同步了&#xff0c;本节介绍的备份操作均在客 户机&#xff08;发起端&#xff09;执行&#xff0c;实际上&#xff0c;同步源与发起端可以是同一台主机&#xff08;当然这种情况不常见&#xff09;&#xff0c;…

腾讯云轻量服务器和云服务器区别对比(超详细)

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…

【12.28】转行小白历险记-刷算法04

01两两交换链表中的节点 整体思路 1.要修改后一个节点的指向一定要知道前一个节点的指向才可以改变后面一个节点的 2.分情况奇数和偶数节点&#xff0c;终止条件很重要 3.虚拟头节点&#xff0c;是对我们操作的指针是不是头节点进行判断 02删除链表的倒数第N个节点 思路 …

大数据与人工智能|万物皆算法(第三节)

要点一&#xff1a;数据与智能的关系 1. 一切的核心都是数据&#xff0c;数据和智能之间是密切相关的。 数据是对客观现实的描述&#xff0c;而信息是数据转化而来的。 例如&#xff0c;24是数据&#xff0c;但说“今天的气温是24摄氏度”是信息&#xff0c;而说“班可以分成24…

oracle与mysql的分析函数(窗口函数)

分析函数定义 在SQL语句中&#xff0c;很多查询语句需要进行GROUP BY分组汇总&#xff0c;但是一旦经过分组&#xff0c;SELECT返回的记录数就会减少。为了保留所有原始行记录&#xff0c;并且仍可以进行分组数据分析&#xff0c;分析函数应运而生。 Oracle 8i 版本开始支持窗…

java在线票务系统(选座)Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java servlet 在线票务系统&#xff08;选座&#xff09;管理系统是一套完善的java web信息管理系统 系统采用serlvetdaobean&#xff08;mvc模式)&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要…

MongoDB主从复制,一文打尽!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

紧接着上一篇博客&#xff1a;Hadoop安装笔记1&#xff1a; Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2&#xff1a;离线数据处理-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135…

K8s实战-基于LivenessProbe健康检查

LivenessProbe探针用于判断容器是否存活&#xff0c;如果探测到容器不健康&#xff0c;则kubelet将杀掉该容器&#xff0c;然后根据重启策略处理。 LivenessProbe的实现方式&#xff1a; ExecAction&#xff1a;在容器内部执行一个命令&#xff0c;如果该命令的返回码为0&…

右键菜单“以notepad++打开”,在windows文件管理器中

notepad 添加到文件管理器的右键菜单中 找到安装包&#xff0c;重新安装一般即可。 这里有最新版&#xff1a;地址 密码:f0f1 方法 在安装的时候勾选 “Context Menu Entry” 即可 Notepad的右击打开文件功能 默认已勾选 其作用是添加右键快捷键。即&#xff0c;对于任何…

定期修改公司数据协议的重要性

目录 ​编辑 为公司和客户数据提供更好的安全性 利用现代数据分析工具 标准化您的数据收集流程 改善数据的使用 增强您的营销和销售活动 定义数据分类指南 创建更具凝聚力和协作性的团队 遵守法律法规 结论 企业主可以使用许多对其成功至关重要的工具&#…

【UE5.1】程序化生成Nanite植被

目录 效果 步骤 一、下载Gaea软件和树林资产 二、使用Gaea生成贴图 三、 生成地形 四、生成草地 五、生成树林 六、生成湖泊 七、其它功能介绍 7.1 调整树林生成的面积 7.2 让植物随风飘动 7.3 玩家和植物互动 7.4 雪中树林 7.5 环境音效 效果 步骤 一、下载Ga…

图的操作实验

图的操作 一、 实验目的 &#xff08;1&#xff09;掌握图的邻接矩阵和邻接表存储结构。 &#xff08;2&#xff09;熟练图的邻接表的基本运算。 &#xff08;3&#xff09;加深图的深度优先遍历算法和广度优先遍历算法的理解。 &#xff08;4&#xff09;领会最小生成树和…