vue工程化开发和脚手架

工程化开发和脚手架

1.开发Vue的两种方式

  • 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。
  • 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。
    在这里插入图片描述

工程化开发模式优点:

提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题:

  • webpack配置不简单
  • 雷同的基础配置
  • 缺乏统一的标准

为了解决以上问题,所以我们需要一个工具,生成标准化的配置

2.脚手架Vue CLI

基本介绍:

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

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

好处:
  1. 开箱即用,零配置
  2. 内置babel等工具
  3. 标准化的webpack配置
使用步骤:
  1. 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本: vue --version
  3. 创建项目架子:vue create project-name(项目名不能使用中文)
  4. 启动项目:yarn serve 或者 npm run serve(命令不固定,找package.json)

项目目录介绍和运行流程

1.项目目录介绍

在这里插入图片描述

虽然脚手架中的文件有很多,目前咱们只需认识三个文件即可

  1. main.js 入口文件
  2. App.vue App根组件
  3. index.html 模板文件

2.运行流程

在这里插入图片描述

组件化开发

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

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

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

​ 比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难以维护。咱们可以按模块进行组件划分
在这里插入图片描述

根组件 App.vue

1.根组件介绍

整个应用最上层的组件,包裹所有普通小组件
在这里插入图片描述

2.组件是由三部分构成

  • 语法高亮插件
  • 在.vue文件中输入<vue>回车后会自动生成<template>等结构。

在这里插入图片描述

  • 三部分构成

    • template:结构 (有且只能一个根元素)
    • script: js逻辑
    • style: 样式 (可支持less,需要装包)
  • 让组件支持less

    (1) style标签,lang=“less” 开启less功能

    (2) 装包: yarn add less less-loader -D 或者npm i less less-loader -D

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用免费 FlaskAPI 部署 YOLOv8

目标检测和实例分割是计算机视觉中关键的任务&#xff0c;使计算机能够在图像和视频中识别和定位物体。YOLOv8是一种先进的、实时的目标检测系统&#xff0c;因其速度和准确性而备受欢迎。 Flask是一个轻量级的Python Web框架&#xff0c;简化了Web应用程序的开发。通过结合Fla…

如何使用Selenium处理Cookie,今天彻底学会了

01 cookie介绍 HTTP协议是无状态的协议。一旦数据交换完毕&#xff0c;客户端与服务器端的连接就会关闭&#xff0c;再次交换数据需要建立新的连接&#xff0c;这就意味着服务器无法从连接上跟踪会话。也就是说即使第一次和服务器连接后并且登录成功后&#xff0c;第二次请求…

【vue2高德地图api】04-poi搜索

系列文章目录 文章目录 系列文章目录前言一、高德地图文档入口二、使用步骤1.创建文件以及路由2.编写页面代码3.样式4变量以及方法5.编写查询方法 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 本篇要实现的功能&#xff0c;看下图 提示&#x…

PivotNet:Vectorized Pivot Learning for End-to-end HD Map Construction

参考代码&#xff1a;BeMapNet。PS&#xff1a;代码暂未放出&#xff0c;关注该仓库动态 动机和主要贡献 在MapTR系列的算法中将单个车道线建模为固定数量的有序点集&#xff08;对应下图Evenly-based&#xff09;&#xff0c;这样的方式对于普通道路场景具备一定适应性。但是…

谁说 Linux 不能玩游戏?

在上个世纪最早推出视频游戏的例子是托马斯戈德史密斯&#xff08;Thomas T. Goldsmith Jr.&#xff09;于1947年开发的“「Cathode Ray Tube Amusement Device」”&#xff0c;它已经显着发展&#xff0c;并且已成为人类生活中必不可少的一部分。 通过美国游戏行业的统计数据&…

yum

什么是yum? Linux中我们也要进行工具/指令/程序&#xff0c;安装&#xff0c;检查卸载等&#xff0c;需要yum的软件 安装软件的方式&#xff1a; 1.源代码安装--交叉编译工作 2.rpm包直接安装 3.yum / apt-get yum:yum是我们linux预装的一个指令&#xff0c;搜索&#x…

【小白专用】PHP基本语法 23.11.04

PHP基本语法 PHP是超文本预处理器 由服务器解析执行 可以与 html 进行混编(嵌入) ,PHP是一种弱类型语言 1.1 PHP标记 PHP和其他Web语言一样&#xff0c;都是用一对标记将PHP代码包含起来&#xff0c;以便和HTML代码区分开来。PHP支持4种风格的标记&#xff0c;如表所示。 标…

webgoat-(A1)injection

SQL Injection (intro) SQL 命令主要分为三类&#xff1a; 数据操作语言 &#xff08;DML&#xff09;DML 语句可用于请求记录 &#xff08;SELECT&#xff09;、添加记录 &#xff08;INSERT&#xff09;、删除记录 &#xff08;DELETE&#xff09; 和修改现有记录 &#xff…

Scala中类的继承、抽象类和特质

1. 类的继承 1.1 Scala中的继承结构 Scala 中继承关系如下图&#xff1a; Any 是整个继承关系的根节点&#xff1b; AnyRef 包含 Scala Classes 和 Java Classes&#xff0c;等价于 Java 中的 java.lang.Object&#xff1b; AnyVal 是所有值类型的一个标记&#xff1b; Nul…

算法专栏 ---- trie树,并查集

trie树 #include <iostream> using namespace std; const int N 1000010; int son[N][26],cnt[N],idx; //明确前面两个数组以及idx的含义 //我们把son这个二维数组看成一个字典树 //本题要求26个字母&#xff0c;所以我们每个节点里面最多有26个儿子节点 //而我们本题要…

支付宝AI布局: 新产品助力小程序智能化,未来持续投入加速创新

支付宝是全球领先的独立第三方支付平台&#xff0c;致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验&#xff0c;及转账收款/水电煤缴费/信用卡还款/AA收款等生活服务应用。 支付宝不仅是一个支付工具&#xff0c;也是一个数字生活平台&#xff0c;通过…

No Presto metadata available for docker-ce-stable

Linux CentOS中执行Docker一键安装脚本报错&#xff1a; No Presto metadata available for docker-ce-stable 执行以下命令可以解决&#xff0c;整个过程比较耗费时间&#xff0c;请耐心等待。 yum install docker-ce -y

python-在系统托盘显示CPU使用率和内存使用率

一、添加轮子 1.添加托盘区图标库 infi.systray from infi.systray import SysTrayIcon 2.添加图像处理库 Pillow from PIL import Image, ImageDraw, ImageFont 3.添加 psutil 来获取CPU、内存信息 import psutil 二、完整代码 from infi.systray import SysTrayIcon …

复杂物体线结构光中心线提取方法研究

论文地址&#xff1a;Excellent-Paper-For-Daily-Reading/application/centerline at main 类别&#xff1a;应用——中心线提取 时间&#xff1a;2023/11/05 摘要 针对复杂物体动态三维测量中条纹图像过曝光、欠曝光以及环境光照干扰引起激光中心线提取速度慢、提取 不准确…

数据结构—字符串

文章目录 7.字符串(1).字符串及其ADT#1.基本概念#2.ADT (2).字符串的基本操作#1.求子串substr#2.插入字符串insert#3.其他操作 (3).字符串的模式匹配#1.简单匹配(Brute-Force方法)#2.KMP算法I.kmp_match()II.getNext() #3.还有更多 小结附录&#xff1a;我自己写的string 7.字符…

C语言——选择排序

完整代码&#xff1a; //选择排序 // 选择排序是一种简单直观的排序算法。它的工作原理如下:首先在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&am…

【Liunx基础】之指令(一)

【Liunx基础】之指令&#xff08;一&#xff09; 1.ls指令2.pwd命令3.cd指令4.touch指令5.mkdir指令(重要)6.rmdir指令与rm指令&#xff08;重要&#xff09;7.man指令&#xff08;重要&#xff09;8.cp指令&#xff08;重要&#xff09; &#x1f4c3;博客主页&#xff1a; 小…

✔ ★【备战实习(面经+项目+算法)】 11.5学习

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…

C++二分算法:平衡子序列的最大和

涉及知识点 二分 动态规划 #题目 给你一个下标从 0 开始的整数数组 nums 。 nums 一个长度为 k 的 子序列 指的是选出 k 个 下标 i0 < i1 < … < ik-1 &#xff0c;如果这个子序列满足以下条件&#xff0c;我们说它是 平衡的 &#xff1a; 对于范围 [1, k - 1] 内的所…

Git从基础到实践

1.Git是用来做什么的&#xff1f; git就是一款版本控制软件&#xff0c;主要面向代码的管理。你可以理解为Git是一个代码的备份器&#xff0c;给你的每一次修改后的代码做个备份&#xff0c;防止丢失&#xff0c;这个是git最基本的功能。 其次,git不止备份,当你需要比对多…