Vue环境的搭建

1.Vue开发的两种方式

(1)核心包传统开发模式

基于html/css/js文件,直接引入和辛堡,开发Vue。

(2)工程化开发模式:

主要是基于构建工具(例如,webpack)的环境中开发Vue,可以利用构建工具编写一些高级的语法。

但是问题是需要一些复杂的配置(配置并不简单;各个项目雷同的配置;缺乏统一标准)

=> 需要一个工具,生成标准的配置!

Vue Cli 的提出!


2.Vue CLI

(1)基本介绍:

是官方提供的一个全局命令工具。

可以帮助我们 快速创建一个开发Vue 项目的标准化基础架子。(集成了 =webpack配置,即一个目录)

(2)好处:

<1>开箱即用,零配置;<2>内置babel等工具;<3>标准化;

(3)创建步骤:

<1>全局安装(一次):

yarn global add @vue/cli   或   npm i @vue/cli -g

 <2>查看vue安装的版本

vue --version

<3>创建项目架子

vue create project-name (项目名-不能用中文)

 (4)启动项目

进入目录,输入:

yarn serve 或者 npm run serve (serve这个名字不是固定的,可以找package.json中设置)


 3.项目的目录介绍和运行流程


4.组件化开发和根组件

(1)组件化

一个页面可以拆分为一个个组件,每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用,能够提升开发效率。

组件分类:普通组件、根组件

(2)根组件

整个应用最上层的组件,包裹所有普通的小组件。

(3)组件的构成

每一个组件由三部分构成:

<1>template:结构,有且只能有一个根元素;

<2>script:js逻辑;

<3>style:样式(可支持 less,需要装包)

(4)让组件支持less

<1>style标签,lang="less",开启less功能;

<2>装包: yarn add less less-loader


参考:

040-工程化开发和脚手架_哔哩哔哩_bilibili

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

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

相关文章

福州大学《嵌入式系统综合设计》实验五:图像裁剪及尺寸变换

一、实验目的 在深度学习中&#xff0c;往往需要从一张大图中裁剪出一张张小图&#xff0c;以便适应网络输入图像的尺寸&#xff0c;这可以通过bmcv_image_crop函数实现。 实践中&#xff0c;经常需要对输入图像的尺寸进行调整&#xff0c;以适用于网络输入图片尺寸&#xff0…

查看sql语句执行计划并重建索引

晚上cpu报警显示当前cpu使用率达到90%以上&#xff0c;不到10%的空闲 先查询当前sql&#xff1a; #&#xff08;ORACLE&#xff09; SQL > set line 200 pages 1000 col event for a30 col program for a30 col username for a12 col sql_id for a15 col INST_ID for 9999 …

前端开发学习 (二) 事件修饰符、系统命令

其实&#xff0c;我们上一章的时候就已经说过了一些系统指令&#xff0c;这里详细介绍一下 一、v-on的事件修饰符 事件作用click点击时触发submit表单被提交时触发input输入框发生改变时触发keyup按键松开时触发keydown按键按下时触发mouseover鼠标悬停触发mouseout当鼠标移开…

安徽省广德市选择云轴科技ZStack Cloud云平台建设县级智慧城市

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…

【Web】NewStarCTF Week1 个人复现

目录 ①泄露的秘密 ②Begin of Upload ③Begin of HTTP ④ErrorFlask ⑤Begin of PHP ⑥R!C!E! ⑦EasyLogin ①泄露的秘密 盲猜/robots.txt,访问得到flag前半部分 第二个没试出来&#xff0c;老老实实拿dirsearch扫吧 访问/www.zip 下载附件&#xff0c;拿到第二部分…

SpringCloud原理-OpenFeign篇(一、Hello OpenFeign项目示例)

文章目录 前言正文一、项目结构二、服务调用链路说明三、Rpc调用链路说明四、项目代码4.1 client 模块中的feign接口4.2 client 中的rest接口4.3 client 中的启动类4.4 server中的rest接口4.5 server中的配置文件 五、调试 附录附1&#xff1a;本系列文章链接 前言 本篇是Spri…

示波器探头讲解及案例分享

示波器探头讲解 示波器探头 分为X1、X10档&#xff1a; X1档&#xff0c;表示被测量的信号没有经过衰减进入示波器 X10档&#xff0c;表示被测量的信号衰减10倍进入示波器&#xff08;当示波器也设置为10X档&#xff0c;直接读数即可&#xff0c;但是当示波器设置为1X档&…

1、开发工具介绍及软件安装

软件安装 百度网盘链接&#xff1a;https://pan.baidu.com/s/1J7sgXntt9eLNBhI1Dc6MsQ?pwd2023 提取码&#xff1a;2023 # 一 Keil5安装步骤&#xff1a; 激活&#xff1a; STC-ISP安装步骤&#xff1a; STC-ISP.exe安装即用 安装CH340_CH341驱动程序 所有学习课程和资源…

【vue】ant-design-vue的树结构实现节点增删改查

根据业务需要&#xff0c;实现树结构的节点新增编辑删除功能&#xff0c;主要逻辑是利用树节点的scopedSlots属性对其进行自定义改造&#xff0c;监听悬停事件在节点右侧出现增删改对应图标&#xff0c;点击图标出现弹窗表单对内容进行修改&#xff0c;具体代码如下&#xff1a…

蓝桥杯每日一题2023.11.23

题目描述 题目分析 本题使用递归模拟即可&#xff0c;将每一个大格子都可以拆分看成几个小格子&#xff0c;先将最开始的数字进行填入&#xff0c;使每一个对应小格子的值都为大格子对应的数&#xff0c;搜索找到符合要求的即可 &#xff08;答案&#xff1a;50 33 30 41&am…

Python爬取京东商品销售数据进行数据分析示例代码,以口红为例

文章目录 一、准备工作驱动安装模块使用与介绍 二、流程解析三、完整代码四、效果展示关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资…

2023年中国钒铁产量及行业进出口现状分析[图]

钒铁&#xff0c;银白色块状&#xff0c;一般分为桶装或吨袋包装&#xff0c;根据钒含量的不同分为50钒铁&#xff08;FeV50&#xff09;和80钒铁&#xff08;FeV80&#xff09;,通过炉外法或电炉法冶炼生产&#xff0c;北方多以炉外法制取&#xff0c;南方多为电炉法生产。 钒…

Faster R-CNN源码解析(一)

目录 前言训练脚本(train_mobilenetv2.py)自定义数据集(my_dataset.py) 前言 Faster R-CNN 是经典的two-stage目标检测模型&#xff0c; 原理上并不是很复杂&#xff0c;也就是RPNFast R-CNN&#xff0c;但是在代码的实现上确实有很多细节&#xff0c;并且源码也非常的多&…

chatglm3部署使用

chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下载chatglm3代码。Huggingface下载模型一直失败&#xff0c;所以用阿里的魔塔社区下载。 git clone https://github.com/THUDM/ChatGLM3.git git clone https://www.modelscope.cn/ZhipuAI/chatglm3…

python-opencv划痕检测

python-opencv划痕检测 这次实验&#xff0c;我们将对如下图片进行划痕检测&#xff0c;其实这个比较有难度&#xff0c;因为清晰度太差了。 我们做法如下&#xff1a; &#xff08;1&#xff09;读取图像为灰度图像&#xff0c;进行自适应直方图均衡化处理&#xff0c;增强图…

thingsboard3.6的mailConfigTemplateController错误

1、bug内容 使用3.6版本的tb代码进行打包生成boot的jar包,在启动的时候会报错mailConfigTemplateController bean初始化找不到文件路径。 Error creating bean with name mailConfigTemplateController defined in URL [jar:file:/D:/yuxinwei/AE/thingsboard/thingsboard-3…

vue2.0+elementui集成file-loader之后图标失效问题

背景 跑vue2elementUI项目时&#xff0c;由于前端这边需要在本地存放xlsx模板文件&#xff0c;供用户下载模板文件&#xff0c;所以需要在webpack构建的时候增加file-loader进行解析xlsx文件打包。 vue版本2.x element-ui 版本 2.13.x 注意 npm i -D file-loader版本号给vue项…

操作系统 day12(调度算法的评价指标)

评价指标 CPU利用率 系统吞吐量 周转时间 带权周转时间 等待时间 响应时间

2022-1-25 机器人运动规划方法综述 航空学报

论文PDF abstract 随着应用场景的日益复杂&#xff0c;机器人对旨在生成无碰撞路径&#xff08;轨迹&#xff09;的自主运动规划技术的需求也变得更加迫 切。虽然目前已产生了大量适应于不同场景的规划算法&#xff0c;但如何妥善地对现有成果进行归类&#xff0c;并分析不同…

Spark---基于Standalone模式提交任务

Standalone模式两种提交任务方式 一、Standalone-client提交任务方式 1、提交命令 ./spark-submit --master spark://mynode1:7077 --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master spark…