Vue2工程化

本节目标

  • 工程化开发
  • 项目运行流程
  • 组件化
  • 组件注册
  • 自定义创建项目

工程化开发

基于构建工具的环境开发Vue

Webpack的缺点

  1. webpack的配置并不简单
  2. 基础的配置雷同
  3. 各公司缺乏统一标准

Vue CLI

  1. Vue CLI是Vue官方提供的一个全局命令工具
  2. 帮助我们快速创建标准化的开发环境( 集成了webpack配置 )
  3. 开箱即用, 零配置
  4. 内置babel等工具
  5. 全局安装: yarn global add @vue/cli 或 npm i @vue/cli -g
  6. 查看版本: vue -version
  7. 创建项目: vue create project-name(项目名-不能用中文)
  8. 创建模式: Default([Vue 2] babel, eslint) (使用默认的模式创建项目) (后面学习自定义创建)
  9. 启动项目: yarn serve 或 npm run serve

目录结构

核心文件说明

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title>
</head><body><!-- 兼容: 给不支持JS的浏览器一个提示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><!--  Vue所管理的容器:  将来渲染的所有内容都会在这个容器中 --><div id="app"><!-- 在工程化项目中, 这里不再直接编写模版语法, 而是通过App.vue 提供结构渲染 --></div><!-- built files will be auto injected -->
</body></html>
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
// 该文件的核心作用: 
// 导入App.vue根组件, 创建Vue实例, 通过Vue实例提供的方法, 把根组件渲染到index.html中
import Vue from 'vue'
import App from './App.vue'// 提示当前处于什么环境(生产环境/开发环境)
Vue.config.productionTip = false// 官方写法
// new Vue({
//   render: h => h(App),
// }).$mount('#app')// 创建Vue实例, 提供render方法, 把根组件渲染到index.html中
new Vue({// 指定容器,和$mount('#app')作用一致el: '#app',// 完整写法, 基于App.vue创建结构渲染到index.html中render: (createElement) => {//基于App创建元素结构return createElement(App)},
})

自定义创建项目

基于Vue Cli自定义创建项目架子

  1. 开始创建项目

  1. 选择创建模式 (选择自定义创建)

  1. 选择集成模块

  1. 选择路由模式 (选择 n, 使用hash模式)

  1. 选择CSS预处理器 (选择Less)

  1. 选择代码校验风格 (选择无分号风格, 目前主流)

  1. 选择代码校验时机 (保存时校验)

  1. 选择配置文件位置 (单独存放配置文件)

  1. 是否保存创建流程 (选择 n, 不保存)

  1. 按空格键选中或取消选项. 按上下箭头切换选项

ESlint代码规范

一套写代码的约定规则, 正规的团队, 需要统一的编码风格, 提高团队开发效率

  1. Standard Style规范说明: JavaScript Standard Style
  2. 如果代码不符合 standard的要求, ESlint就会提示你

手动修改错误

  1. 学会查看ESLint的报错信息

  1. 有些信息不够明确, 查找详细的规范信息: 规则参考 - ESLint - 插件化的 JavaScript 代码检查工具
  2. 列举一些易懂的规则

自动修改错误

  1. 基于 ESLint 插件可以提供错误高亮, 通过配置, 可以在自动帮我们修复错误
  2. 详细的配置见: 前端环境 -> 7,自动修复错误

项目运行流程

启动命令执行后, 先执行入口文件, 文件文件会导入根组件, 然后创建Vue实例, 通过实例的render()方法把根组件渲染到模版文件的容器中

组件化

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

好处: 便于维护, 利于复用, 提高开发效率

分类: 普通组件, 根组件

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

组件化

1>组件构成

有三部分组成: template(结构) script(逻辑) style(样式)

结构

<template><div><!-- vue2中有且只能有一个根元素 -->... ...</div>
</template>

样式

<style>/*如果需要less支持,1安装: yarn add less less-loader2开启: lang="less"*/
</style>

样式隔离

  • 组件中的样式默认是全局样式, 影响所有组件, 容易造成组件样式冲突
  • 添加scoped属性, 开启样式隔离, 让组件样式只影响自己 (局部样式)

scoped原理

  • 为当前组件的所有标签添加一个自定义属性, 格式: data-v-hash值
  • css选择器都会被自动添加 [data-v-hash值] 的属性选择器
  • 最终结果: 必须是当前组件的元素, 才会有对应的自定义属性, 样式才会生效

样式覆盖

  1. 问题: 由于组件存在样式隔离, 当使用第三方组件库,并且有修改第三方组件默认样式的需求时, 直接修改无效
  2. 解决: 需要用 /deep/ 深度选择器 的方式修改样式
  3. 使用: 在选择器之前加上深度选择器就行了, 达到样式穿透的效果

行为

<script>
// 导出配置对象 
export default {name: 'App',data(){return {}}
}
</script>

data配置项

  • 在组件中, data配置项必须是一个函数
  • 保证每个组件实例. 维护独立的一份数据对象
  • 每次创建新的组件实例. 都会执行一次data函数, 得到一个新对象

2>组件注册

局部注册

只能在注册的组件内使用

  1. 创建组件, 使用大驼峰命名法(HmHeader)
  2. 引入组件, import 组件对象 from 'vue文件路径'
  3. 注册组件, 在 components 配置项中注册组件
  4. 使用组件, <组件名></组件名>

全局注册

所有的组件内都能使用

  1. 创建组件, 使用大驼峰命名法(HmButton)
  2. 在main.js中引入组件,
  3. 注册组件, Vue.component('组件名', 组件对象)
  4. 一次只能注册一个组件
  5. 使用组件, <组件名></组件名>
  6. 技巧: 一般都用局部注册, 发现组件多处使用, 再抽离到全局

3>组件拆分
  1. 分析页面, 按模块拆分组件, 搭架子
  2. 根据设计图, 编写html结构css样式
  3. 拆分封装通用小组件

4>动态组件

动态组件: 根据组件名称切换组件

// 定义动态组件
<component :is="comName"></component>// 渲染Left组件, 改变属性值即切换组件
data() {return {comName: "Left",};
},

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

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

相关文章

设计模式-设计模式分类

概述 23 种设计模式&#xff0c;分为创建型模式、结构型模式和行为型模式。另外&#xff0c;近来这一清单又增加了一些类别&#xff0c;例如&#xff0c;并发型模式、线程池模式、Java EE 企业技术的多层应用程序上的模式等。 一、创建型模式 1.工厂方法模式(Factory Method…

Tensorflow音频分类

tensorflow https://www.tensorflow.org/lite/examples/audio_classification/overview?hlzh-cn 官方有移动端demo 前端不会 就只能找找有没有java支持 注意版本 注意JDK版本 package com.example.demo17.controller;import org.tensorflow.*; import org.tensorflow.ndarra…

2024年5月文章一览

2024年5月编程人总共更新了7篇文章&#xff1a; 1.2024年4月文章一览 2.《自动机理论、语言和计算导论》阅读笔记&#xff1a;p215-p351 3.《自动机理论、语言和计算导论》阅读笔记&#xff1a;p352-P401 4.《自动机理论、语言和计算导论》阅读笔记&#xff1a;p402-p427 …

05 Linux 内核启动流程

1、阅读 Linux 内核源码 学习 Linux 有两种路线: 1)按照 Linux 启动流程,梳理每个子系统。 2)把 Linux 所有用到的子系统学会,再组合起来。 博主选择第一种方式,可以快速上手,知道自己在学什么东西,在什么阶段起作用。 阅读 Linux 和 Android 源码: https://elix…

2013.8.5-2024.5.10碳排放权交易明细数据

2013.8.5-2024.5.10碳排放权交易明细数据 1、时间&#xff1a;2013.8.5-2024.5.10 2、来源&#xff1a;各碳排放交易所 3、范围&#xff1a;各交易所城市 4、指标&#xff1a;行政区划代码、地区、所属省份、交易日期、交易品种、开盘价_元、最高价_元、最低价_元、成交均价…

列举Spring的IoC和AOP的特点

Spring框架的IoC&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;和AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是两个核心特性&#xff0c;它们各自具有显著的特点。 IoC&#xff08;控制反转&#xff09;的特点 解耦…

杂项——编码器控制小车走固定距离(stm32)

先算出轮子转一周编码器的数值&#xff08;假设为1000&#xff09;&#xff0c;再算出轮子一周的周长&#xff08;假设为10cm&#xff09;。 那么要前进1米只需要转1米/10cm等于10圈&#xff0c;10圈编码器数值为10000。 我们只需要在代码里面写出编码器数值如果<10000则让…

nltk下载报错

捣鼓voice_clone时报错&#xff1a; 报错信息&#xff1a; mport nltk nltk.download(‘cmudict’)For more information see: https://www.nltk.org/data.htmlAttempted to load tokenizers/punkt/PY3/english.pickleSearched in: - ‘/home/zhangshuai/nltk_data’ - ‘/hom…

【机器学习基础】Python编程08:五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言,它在机器学习领域中的重要性主要体现在以下几个方面: 简洁易学:Python语法简洁清晰,易于学习,使得初学者能够快速上手机器学习项目。 丰富的库支持:Python拥有大量的机器学习库,如scikit-learn、TensorFlow、Keras和PyTorch等,这些…

在线OJ项目测试(selenium+Junit5)

目录 在线OJ项目测试的思维导图 在线OJ的UI自动化测试 测试一&#xff1a;检查未登录时的页面访问以及一些未登录时的非法操作 测试二&#xff1a;测试注册界面 测试三&#xff1a;测试登录界面 测试四&#xff1a;测试题目列表界面 测试五&#xff1a;测试题目详情界面…

【python】unindent does not match any outer indentation level错误的解决办法

【Python】"unindent does not match any outer indentation level"错误的解决办法 在Python编程中&#xff0c;缩进是定义代码块的关键。与其它编程语言使用花括号或特定关键字不同&#xff0c;Python完全依赖缩进来区分代码结构。如果你在编码时遇到了错误信息unin…

解释Hibernate框架的作用和与JDBC的区别

Hibernate框架的作用以及它与JDBC&#xff08;Java Database Connectivity&#xff09;的区别可以从以下几个方面来解释&#xff1a; Hibernate框架的作用 Hibernate是一个流行的Java持久层框架&#xff0c;它提供了对象关系映射&#xff08;ORM, Object-Relational Mapping&…

【HashMap】保证HashMap线程安全的几种方式

在Java中&#xff0c;HashMap是线程不安全的&#xff0c;这意味着如果多个线程并发地访问和修改同一个HashMap实例&#xff0c;可能会导致数据不一致和其他线程安全问题。为了确保线程安全性&#xff0c;可以考虑以下几种方法&#xff1a; 1. 使用 Collections.synchronizedMa…

【C++进阶】深入STL之list:模拟实现深入理解List与迭代器

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;初步了解 list &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STL之list &#x1f4d2;1. list…

源码、反码和补码

对于有符号数而言&#xff0c;原码就是一个数的二进制表示。二进制的最高位是符号位&#xff0c;0 表示正数&#xff0c;1 表示负数。 计算机用数的原码进行显示&#xff0c;数的计算和存储是用补码进行的。 正数的原码&#xff0c;反码和补码都一样&#xff0c;即正数三码合…

nomachine使用记录以及录包

录包命令&#xff1a; rosbag record 话题名字&#xff08;可以是原相机话题和执行程序的话题&#xff09;rosbag play 包名&#xff08;可以离线播放包的数据&#xff09; rqt_image_view 话题可视化

FileZilla:不安全的服务器,不支持 FTP over TLS 原因与解决方法

今天在用FileZilla Client连接某个主机的FTP的时候&#xff0c;主机地址、账号、密码、端口确定百分之百正确的情况下&#xff0c;结果报错如下&#xff1a; 状态: 正在解析 x.x.x 的地址 状态: 正在连接 x.x.x.x:21... 状态: 连接建立&#xff0c;等待欢迎消息... 状态: 不安全…

Unreal Engine项目结构与关卡设置详解

引言 Unreal Engine 是一款功能强大的游戏引擎&#xff0c;为开发者提供了丰富的工具来创建和管理游戏项目。本文将详细介绍一个基本的 Unreal Engine 项目结构&#xff0c;并讲解如何在 Unreal 编辑器中进行关卡设置与操作。 Unreal Engine 项目结构 一个基本的 Unreal Eng…

RHEL - 订阅、注册系统和 Yum Repository(新版界面)

《OpenShift / RHEL / DevSecOps 汇总目录》 演示环境说明 本文需要有 redhat.com 账号以及包含 RHEL 的有效订阅。 演示环境使用了通过 minimal 方式安装的 RHEL 7.6 环境&#xff0c;RHEL 可以访问互联网。 红帽网站 access.redhat.com 针对新用户提供了新版界面&#xff0…

建构信任基石:揭秘Web3的去中心化信任体系

在传统的互联网时代&#xff0c;信任往往建立在中心化的机构和第三方平台之上&#xff0c;而这种中心化的信任体系往往面临着数据泄露、信息滥用等问题。然而&#xff0c;随着区块链技术的发展&#xff0c;Web3时代正在向我们展示一种全新的信任体系&#xff0c;即去中心化的信…