Vue2 —— 学习(六)

一、Vue 脚手架

(一)介绍

Vue 脚手架是 Vue 官方提供的标准化开发工具 (开发平台)

脚手架版本最新版本 是 4.x

文档可以查看 http://cli.vuejs.org/zh/

就是vue 官网文档中 的 vue.cli command line interface

(二)脚手架启动

1.全局安装

进第一次执行全局安装 @vue/cli

npm install -g @vue/cli

2.切换目录

切换到你要创建的目录 然后使用命令创建项目

要在哪里使用创建脚手架就 在终端进入哪个目录下 不要直接就创建

vue create xxx

babel 是用来将 es6 转成 es5 的 

eslint 是进行语法检查的

然后回车等待创建成功

3.启动项目

 进入我们创建的脚手架 cd vue_test

然后运行

npm run serve

然后等待 给我们开启了一个服务器端口是 8080 我们直接访问这个网址就行了

自己用就用 第一句 里面的 

别人也想用就用 下面的 然后就创建完成了 

(三)脚手架内部文件介绍

1.外层文件夹文件

.gitignore 哪些文件夹不想被git 所管理在里面写好

Babel.config.js babel 的控制文件 里面用现成的配置就行不用自己写

package-lock.json 

package.json 包说明书 里面有文件的版本 名字

里面的 serve 就是帮我们创建一个服务器 进行初始化工作我们在准备阶段写的那个npm run serve命令的完整命令就是这个 build 是当我们所有代码都写完了 然后要发给下一个人的时候需要 build

一下是最后进行的编译 lint 是进行语法检查

readme 就是一些注意事项

2.src 文件夹:

main.js

前面我们学习过它是我们创建的 vue 实例 vm 很重要 当我们执行完前面的 npm run serve 就直接运行这个文件了 该文件是整个项目的入口文件

先引入外部的 vue 直接用 import 方法就行,脚手架帮我们下载好了 直接写第一句话就行

然后引入 App 组件 它是所有组件的父组件

第三行是关闭 vue 的生产提示

render 那行先不看 后面单独讲 实现了将 App 组件放入容器中

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
})
assets

静态资源 可以把一些图片视频 放上去 大家一起使用

app.vue 

就不说了 是放所有组件的 父组件

components

把所有的子组件放进去

3.public 文件夹:
favicon.ico

网站的页签图标

index.html 我们的页面 是整个应用的界面

 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 是针对 ie 浏览器的特殊配置 让ie 浏览器以最高优先级渲染界面

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

开启移动端的理想视口

 <link rel="icon" href="<%= BASE_URL %>favicon.ico"

不用./ 直接使用 它给的格式能避免许多错误

 <title><%= htmlWebpackPlugin.options.title %></title>

标签里面一长串的意思是 直接去 package.json 找到 name 属性当标题 是 webpack 中的插件用法

配置网页的标题

 <noscript>

如果浏览器不支持 js 那么里面的内容就会出现到浏览器上 如果支持是不渲染的

 <div id="app"></div>

容器!

<!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>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(四)render 函数

如果不用 render 的写法 用之前的写法会报错的 因为会提示我们没有引入完整版的 vue 引入的是残缺版的 vue,不能解析模板

1.为什么我们不用完整的 vue 来解析

因为我们只有在程序员开发的时候使用模板解析器 最后的时候 webpack 直接发送解析好的文件 模板解析器 还在里面就多余了 而且占的内存很大 三分之一 我们直接用残缺的 加上 render 更好,让打包完的文件体积更小

2.vue.js 和 vue.runtime.xxx.js 的区别

vue.js 是完整版的 Vue 包含核心功能 和 模板解析器

文件名带 runtime 的都是 残缺的 vue 文件 没有模板解析器

esm 是使用了 es6 语法的

引入残缺的 Vue 没有模板解析器 所以不能配置 template 配置项 得用 render 函数来进行解析

3.用法

里面必须写 rander 函数 而且必须有返回值 不然会报错

而且这个函数能接受参数createElement  这个参数是一个方法,很重要能创建元素 并放入内容,这样就能解析模板了

render(createElement) {
   return createElement('h1','你好啊') 
  }

简化代码  因为函数内部只有一个参数我们能写成箭头函数的形式 只有一个返回值我们直接省略

然后参数不用那么长的 我们随便定义一个变量 h 当成这个函数变量 里面放上我们 App 组件即可

render: h => h(App)

(五)修改默认参数

vue inspect 能显示默认的参数值 output.js 文件打开就能查看 ,但是不能在这个文件里直接进行修改,这个就是给人看的 并不是真的具体的配置过程

就好像 main.js 是入口函数 是里面默认的参数 指定的 如果修改 名字,就会显示我们 找不到 main.js 它只认 main 这个名

 

红色的部分都是不能改的部分 粉色可以进行任意修改 但是路径也要相应的改变

所有能修改的配置项都在官网中的配置参考中 别的就都不能进行修改了

如果想修改就放在 vue.config.js 文件中 就在最外层

如果修改了里面的属性一定要重新启动这个服务

二、一些属性

(一)ref

用来给元素和子组件注册有用信息是 id 的替代者

就是用来标识 标签的 如果写在 html 标签中 我们获得的是真实的 dom 元素

 <h1 ref="title"></h1>

使用下面的属性进行调用 我们定义的ref 都写在 vc 的原型对象中的 $refs 的对象属性中

我们获得 的是一个真实的 dom 元素

this.$refs.title

如果写在 我们的组件标签一个 id 标签 

  <MySchool id="sch"></MySchool>

我们获得的是  school 组件对应的完整的 dom 结构

如果我们 写的是 ref 标签

  <MySchool ref="sch"></MySchool>

我们获得的是  school 组件的实例对象

this.$refs.sch

 

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

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

相关文章

ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年4月&#xff0c;更强版本的ChatGPT4.0上线&#xff0c;文本、语音、图像等多模态交互方式使其在…

开源!工厂数字化项目会用到的地理信息系统

软件介绍 QGIS&#xff08;Quantum GIS&#xff09;是一款免费、开源、跨平台的地理信息系统&#xff08;GIS&#xff09;软件&#xff0c;适用于Unix平台、Windows和MacOS。提供了强大且用户友好的功能&#xff0c;使其成为地理信息处理领域的热门选择。 功能特点 1.空间数据管…

DRF多表关联的序列化和反序列化

DRF多表关联的序列化和反序列化 目录 DRF多表关联的序列化和反序列化序列化定制字段source一对多的序列化 多表关联的序列化方式1&#xff1a;在表模型中定义方法方式2&#xff1a;定制返回格式SerializerMethodField方式3&#xff1a;子序列化 多表关联的反序列化反序列化保存…

Java---搭建junit4.x单元测试环境,并进行测试

搭建junit4.x单元测试环境 1.选择Project Structure 2.选择Modules&#xff0c;选择要加入测试环境的模块&#xff0c;选择Dependencies,可以看到当前模块都有哪些依赖。 3.点击 后选择第一个 4.找到你安装IDEA的文件夹&#xff0c;进入到IntelliJ IDEA 2018.3.4\lib目录下…

桥接模式:解耦抽象与实现的设计艺术

在软件设计中&#xff0c;桥接模式是一种结构型设计模式&#xff0c;旨在将抽象部分与其实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过提供更加灵活的代码结构帮助软件开发人员处理不断变化的需求&#xff0c;特别是在涉及多平台应用开发时。本文将详细介绍桥接…

规则引擎之LiteFlow应用

官网地址&#xff1a;LiteFlow DEMO 整体结构 1.引入maven依赖 <dependency><groupId>com.yomahub</groupId><artifactId>liteflow-spring-boot-starter</artifactId><version>2.11.4.2</version> </dependency> 2. 配置yml …

Visual Studio code无法正常执行Executing task: pnpm run docs:dev

最近尝试调试一个开源的项目&#xff0c;发现cmd可以正常启动&#xff0c;但是在vs中会报错&#xff0c;报错内容如下 Executing task: pnpm run docs:dev pnpm : 无法加载文件 E:\XXXX\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 http…

jmeter实验 模拟:从CSV数据到加密请求到解密返回数据再到跨越线程组访问解密后的数据

注意,本实验所说的加密只是模拟加密解密,您需要届时写自己的加解密算法或者引用含有加密算法的相关jar包才行. 思路: 线程组1: 1.从CSV文件读取原始数据 2.将读取到的数据用BeanShell预习处理器进行加密 3.HTTP提取器使用加密后的数据发起请求 4.使用BeanShell后置处理器…

外贸公司应该怎么选择企业邮箱?哪个企业邮箱最好?

外贸公司业务的特殊性需要他们频繁进行跨国的沟通交流&#xff0c;那么外贸公司应该如何选择适合的企业邮箱呢&#xff1f;首先&#xff0c;传输邮件的稳定安全是前提&#xff0c;另外由于沟通多是国外客户&#xff0c;邮件的翻译也成为外贸公司企业邮箱的刚需。小编今天就详细…

怎么用Vivado做覆盖率分析

关注公众号FPGA开源工坊获取更多内容。 在做仿真的时候往往会去做代码覆盖率和功能覆盖率的分析&#xff0c;来保证仿真是做的比较充分完备的。 在Vivado里面也支持我们做这项操作&#xff0c;现在就来看一下流程吧。 第一步&#xff1a;选择设置 第二步&#xff1a;在仿真选…

每日一题---OJ题: 环形链表 II

片头 嗨! 小伙伴们,大家好! 我们又见面啦,在上一篇中,我们学习了环形链表I, 今天我们继续来打boss,准备好了吗? Ready Go ! ! ! emmm,同样都是环形链表,有什么不一样的地方呢? 肯定有, 要不然也不会一个标记为"简单" ,一个标记为"中等"了,哈哈哈哈哈 …

《AI创业浪潮:展望未来,解锁颠覆性创新机遇》

在科技革命的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;犹如一艘引领航向的旗舰&#xff0c;以其强大的变革力量重塑各行各业。随着技术的日益成熟与应用场景的不断拓宽&#xff0c;AI技术为创业者铺就了一条充满机遇与挑战的道路。本文将深入探讨未来AI技术领域的…

1.3 字符设备驱动

1、字符设备驱动工作原理 2、file_operations结构体 struct file_operations { struct module *owner; //拥有该结构的模块的指针&#xff0c;一般为THIS_MODULES loff_t (*llseek) (struct file *, lof…

10 Php学习:循环

在 PHP 中&#xff0c;提供了下列循环语句&#xff1a; while - 只要指定的条件成立&#xff0c;则循环执行代码块do…while - 首先执行一次代码块&#xff0c;然后在指定的条件成立时重复这个循环for - 循环执行代码块指定的次数foreach - 根据数组中每个元素来循环代码块 当…

(学习日记)2024.04.15:UCOSIII第四十三节:任务消息队列

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

橱窗带货真的能赚到钱吗?橱窗带货素材哪里找?什么是橱窗带货?

什么是橱窗带货&#xff1f; 橱窗带货&#xff0c;一种以货架电商为基础的营销手段&#xff0c;可类比线下实体店的展示柜和窗口。橱窗的曝光量较高&#xff0c;因此通常展示店铺中的重点产品和推荐系列商品。短视频已经积极进军电商领域&#xff0c;虽然一开始主打直播电商&a…

newman下载安装

postman是专为接口测试而生&#xff0c;Newman是专为postman而生。newman可以让我们的postman的脚本通过非GUI(命令行)的方式。 1. 安装node.js 安装步骤 查看已安装版本 node -v 2. 安装 Newman 运行命令:npm install -g newman&#xff0c;即可完成安装操作。 或者 npm i…

(Oracle)SQL优化案例:隐式转换优化

项目场景 项目现场的某个kettle模型执行非常缓慢&#xff0c;原因在于某个SQL执行效率非常的低。甲方得知此事要求公司赶紧优化&#xff0c;负责该模块的同事对SQL优化并不熟悉。所以作为一个立志成为优秀DBA的ETL工程师&#xff0c;我自告奋勇&#xff1a;不是DBA&#xff0c;…

两步解决 Flutter Your project requires a newer version of the Kotlin Gradle plugin

在开发Flutter项目的时候,遇到这个问题Flutter Your project requires a newer version of the Kotlin Gradle plugin 解决方案分两步: 1、在android/build.gradle里配置最新版本的kotlin 根据提示的kotlin官方网站搜到了Kotlin的最新版本是1.9.23,如下图所示: 同时在Ko…

人事|基于SpringBoot+vue的人事管理系统设计与实现(源码+数据库+文档)

人事管理系统目录 基于SpringBootvue的人事管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xff0c;…