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

面向读者:所有人

所属专栏:零基础入门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://xiahunao.cn/news/2660900.html

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

相关文章

【一分钟】ThinkPHP v6.0 (poc-yaml-thinkphp-v6-file-write)环境复现及poc解析

写在前面 一分钟表示是非常短的文章&#xff0c;只会做简单的描述。旨在用较短的时间获取有用的信息 环境下载 官方环境下载器&#xff1a;https://getcomposer.org/Composer-Setup.exe 下载文档时可以设置代理&#xff0c;不然下载不上&#xff0c;你懂的 下载成功 cmd cd…

SASS循环

<template><div><button class"btn type-1">默认按钮</button><button class"type-2">主要按钮</button><button class"type-3">成功按钮</button><button class"type-4">信息…

Jetpack Compose中使用Android View

使用AndroidView创建日历 Composable fun AndroidViewPage() {AndroidView(factory {CalendarView(it)},modifier Modifier.fillMaxWidth(),update {it.setOnDateChangeListener { view, year, month, day ->Toast.makeText(view.context, "${year}年${month 1}月$…

《MySQL》事务篇

事务特性 ACID Atomicity原子性&#xff1a;事务中的操作要么全部完成&#xff0c;要么全部失败。 Consistency一致性&#xff1a;事务操作前后&#xff0c;数据满足完整性约束。 Isolation隔离性&#xff1a;允许并发执行事务&#xff0c;每个事务都有自己的数据空间&…

Linux中的gcc\g++使用

文章目录 gcc\g的使用预处理编译汇编链接函数库gcc选项 gcc\g的使用 这里我们需要知道gcc和g实际上是对应的c语言和c编译器&#xff0c;而其他的Java&#xff08;半解释型&#xff09;&#xff0c;PHP&#xff0c;Python等语言实际上是解释型语言&#xff0c;因此我们经常能听…

单字符检测模型charnet使用方法,极简

Git链接 安装按照上面的说明&#xff0c;说下使用。 把tools下面的test做了一点修改&#xff0c;可以读取一张图片&#xff0c;把里面的单个字符都检测和识别出来。 然后绘制到屏幕上。 import torch from charnet.modeling.model import CharNet import cv2, os import num…

scratch打砖块游戏 2023年12月中国电子学会图形化编程 少儿编程 scratch编程等级考试三级真题和答案解析

scratch打砖块游戏 2023年12月电子学会图形化编程Scratch等级考试三级真题 一、题目要求 1、准备工作 (1)删除小猫角色,选择角色小球Ball、砖块Button3和球板Paddle (2)选择背景Stars,在背景底端绘制一条红色的线段 (3)建立一个变量“分数” 2、功能实现 (1)…

EXPLORING DIFFUSION MODELS FOR UNSUPERVISED VIDEO ANOMALY DETECTION 论文阅读

EXPLORING DIFFUSION MODELS FOR UNSUPERVISED VIDEO ANOMALY DETECTION 论文阅读 ABSTRACT1. INTRODUCTION2. RELATEDWORK3. METHOD4. EXPERIMENTAL ANALYSIS AND RESULTS4.1. Comparisons with State-Of-The-Art (SOTA)4.2. Diffusion Model Analysis4.3. Qualitative Result…

iPhone 13 Pro 更换『移植电芯』和『超容电池』体验

文章目录 考虑换电池Ⅰ 方案一Ⅱ 方案二 总结危险 Note系列地址 简 述: 首发买的iPhone 13P &#xff08;2021.09&#xff09;&#xff0c;随性使用一年出头&#xff0c;容量就暴跌 85%&#xff0c;对比朋友一起买的同款&#xff0c;还是95%。这已经基本得一天两充 >_<&a…

C# WPF上位机开发(报表导出)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于在工厂上班的小伙伴来说&#xff0c;导出生产数据、生成报表&#xff0c;这是很习以为常的一个工作。之前的文章中&#xff0c;虽然我们也介绍…

git 学习 之一个规范的 commit 如何写

最好的话做一件完整的事情就提交一次

MetalLB:本地Kubernetes集群的LoadBalancer负载均衡利器

背景 在本地集群进行测试时&#xff0c;我们常常面临一个棘手的问题&#xff1a;Service Type不支持LoadBalancer&#xff0c;而我们只能选择使用NodePort作为替代。这种情况下&#xff0c;我们通常会配置Service为NodePort&#xff0c;并使用externalIPs将流量导入Kubernetes…

人工智能(AI)的发展历程是怎样的?无际Ai带来分享

自人工智能&#xff08;AI&#xff09;概念诞生以来&#xff0c;它经历了数次高潮与低谷的起伏。从最初的神经网络模型到如今的深度学习技术&#xff0c;AI已经成为驱动21世纪科技发展的重要力量。在此过程中&#xff0c;AI不仅改变了科技领域的发展方向&#xff0c;也在逐步影…

代码随想录刷题笔记(DAY2)

今日总结&#xff1a;今天在学 vue 做项目&#xff0c;学校还有很多作业要完成&#xff0c;熬到现在写完了三道题&#xff0c;有点太晚了&#xff0c;最后一道题的题解明天早起补上。 Day 2 01. 有序数组的平方&#xff08;No. 977&#xff09; 给你一个按 非递减顺序 排序的…

SSL VPN移动安全接入策略

一、登陆策略 1、需求背景&#xff08;【系统设置】-【系统选项】&#xff09; 需求&#xff1a; &#xff08;1&#xff09;接入端口可以自定义且支持HTTP 端口跳转到HTTPS端口 &#xff08;2&#xff09;登录页面自持自定义背景、logo等 &#xff08;3&#xff09;登…

Python入门-字符串Str

字符串 字符串 是Python中的 不可变 数据类型 1.字符串相关处理方法 大小写转换 # 大小写转换 s1HelloWorld new_s2s1.lower() print(s1,new_s2)new_s3s1.upper() print(new_s3)结果&#xff1a; D:\Python_Home\venv\Scripts\python.exe D:\Python_Home\chap6\示例6-1字符…

Android Studio实现课表

本文章主要展示课表的实现&#xff0c;里面包含很多控件的用法&#xff0c;比如吐司Toast、通知Notification、ListView&#xff0c;数值选择器NumberPicker&#xff0c;SeekBar同editText的关联。抽屉导航栏 还有一些其他的功能&#xff0c;比如InputFilter自定义的字符过滤器…

华为云CCE-集群内访问-根据ip访问同个pod

华为云CCE-集群内访问-根据ip访问同个pod 问题描述&#xff1a;架构如下&#xff1a;解决方法&#xff1a; 问题描述&#xff1a; 使用service集群内访问时&#xff0c;由于启用了两个pod&#xff0c;导致请求轮询在两个pod之间&#xff0c;无法返回正确的结果。 架构如下&am…

【CISSP学习笔记】6. 安全开发

该知识领域涉及如下考点&#xff0c;具体内容分布于如下各个子章节&#xff1a; 理解安全并将其融入软件开发生命周期 (SDLC) 中在软件开发环境中识别和应用安全控制评估软件安全的有效性评估获得软件对安全的影响定义并应用安全编码准则和标准 6.1. 系统开发控制 6.1.1. 软…

uniapp的css样式图片大小截图展示

目录 截取图片前截取图片后第一种方式&#xff1a;代码第二种方式&#xff1a;代码最后 截取图片前 截取图片后 第一种方式&#xff1a;代码 <view class"swiper-box-img"><image class"swiper-box-img-img" :src"item.file_path" mod…