Vue笔记_03_使用Vue脚手架

  • 第三章 使用Vue脚手架
    • 初始化脚手架
      • 说明
      • 具体步骤
    • 项目文件分析
      • pack-lock-json
      • assets文件夹
      • components文件夹
      • main.js
      • index.html
      • main.js里面的render
      • 关于不同版本的Vue
    • 脚手架的默认配置
      • 不能改的配置
      • 调整默认配置时
      • 修改默认入口
      • 关闭语法检查
    • 一些特殊的标签属性和配置项
      • ref属性
      • props配置项
      • mixin混入
    • 插件
    • 写Style标签的一个技巧
    • Todo-list案例
      • **组件化编码流程（通用）**
    • 浏览器本地存储
    • 组件自定义事件
      • 绑定事件
      • **一个扩展知识：**
      • 解绑事件
      • 全局事件总线
    • 消息订阅与发布
    • `$nextTick`（常用）
    • 过渡与动画
      • 动画效果
      • 过渡效果
      • 集成第三方动画
      • Vue封装的过渡与动画

第三章 使用Vue脚手架

初始化脚手架

cli(command line interface)

命令行接口工具

说明

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
  2. 文档：https://cli.vuejs.org/zh/

具体步骤

  1. 全局安装@Vue/cli（仅第一次执行）

    npm install -g @vue/cli

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

    vue create xxx

  3. 启动项目

​ npm run serve

备注：

  1. 如出现下载缓慢请配置npm淘宝镜像：

    npm config set registry https://registry.npm.taobao.org

  2. Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：vue inspect > output.js，output.js只能看不能修改

项目文件分析

pack-lock-json

版本锁定配置文件，用来锁定项目依赖包的版本

assets文件夹

静态资源文件夹，用来存放一些图片，音频等

components文件夹

组件文件夹，用来存放组件（.vue文件）的文件夹

main.js

/* 该文件是整个项目的入口文件
*/ // 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'// 关闭Vue的生产提示
Vue.config.productionTip = false// 创建Vue的实例对象----vm
new Vue({// 渲染结果render: h => h(App),
}).$mount('#app')

index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器的一个特殊配置，含义是告诉IE浏览器以最高的渲染级别渲染页面 --><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中的东西就会被执行 --><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>

main.js里面的render

render(createElement) {return createElement('h1', '你好呀')
}
// 由于没有用到this，所以可以写成箭头函数
render:(createElement)=> {return createElement('h1', '你好呀')
}
// 箭头函数由于只有一个参数，所以可以省略括号
render:createElement=> {return createElement('h1', '你好呀')
}
// 由于箭头函数里面没有语句，只return了一个createElement('h1', '你好呀')，所以可以简写为
render:creatElement=>createElement('h1', '你好呀')

关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别

    1. vue.js是完整版的Vue，包含：核心功能和模板解析器
    2. vue.rintime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去指定具体内容

脚手架的默认配置

不能改的配置

  1. public文件夹
  2. favicon.ico文件
  3. index.html文件
  4. src文件夹
  5. main.js文件

调整默认配置时

查文档！！！

写个vue.config.js文件修改默认配置，vue.config.js所在位置应该与package.json同层

修改默认入口

module.exports = {pages: {index: {entry: '入口文件地址'}}
}

关闭语法检查

module.exports = {lintOnSave: false
}

一些特殊的标签属性和配置项

ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实的DOM元素，应用在组件标签上的是组件实例对象（vc）

获取的时候：

<template><div><h1 v-text="msg" ref="title"></h1><button ref='btn' @click="showDOM">点我输出上方的DOM元素</button><School ref="sch"></School></div>
</template><script>import School from './components/School'export default {name:'App',components: {School},data() {return {msg:'欢迎学习Vue'}},methods: {showDOM() {console.log(this.$refs.title) // 真实DOM元素console.log(this.$refs.btn) // 真实DOM元素console.log(this.$refs.sch) // School组件的实例对象}}}
</script>

props配置项

功能：让组件接收外部传来的数据

  1. 传递数据

    <Demo name="xxx"></Demo>

  2. 接收数据

    • 第一种方式（只接收）

      <script>export default {name:'Student',props['name']}
</script>

    • 第二种方式（限制类型）

      <script>export default {name:'Student',props: {name: String}}
</script>

    • 第三种方式（限制类型，限制必要性，指定默认值）

      <script>export default {name:'Student',props: {name: {type:String, // 类型required:true, // 必要性default:'老王' // 默认值}}}
</script>

      备注：

      props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务中需求确实需要修改，那么请赋值一份props的内容到data中一份，然后去修改data中的数据

      <script>export default {name:'Student',data() {return {MyName:n}},props: {name:{type:String,required:true}}}
</script>

mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

// 第一步定义混合
{data() {},methods() {}
}// 第二步使用混入
1. 全局混入：Vue.mixin(xxx)
2. 局部混入：mixins:['xxx']

在mixin文件里：

export mixin = {data() {return {name:'GZU'}},methods: {showName() {alert(this.name)}}
}

在Vue文件里

<script>// 局部混入import {mixin} from 'xxxx'export default {name:'School',mixins:['mixin'] // 局部混入}
</script><script>// 全局混入import {mixin} from 'xxxx'Vue.mixin(mixin) // 全局混入export default {name:'School',}
</script>

插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以及以后的参数是插件使用者传递的数据

定义插件：

对象.install = function(Vue, options) {// 1. 添加全局过滤器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 配置全局混入Vue.mixin(...)// 4. 添加实例方法Vue.prototype.$myMethod = function() {}
}

使用插件：

Vue.use()

在plugins文件里：

export default {install() {// 1. 添加全局过滤器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 配置全局混入Vue.mixin(...)// 4. 添加实例方法Vue.prototype.$myMethod = function() {}}
}

在main.js文件里

// 引入Vuw
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import plugins from './plugins'// 关闭Vue的生产提示
Vue.productionTip = false// 应用插件
Vue.use(plugins)// 创建vm
new Vue({render: h=>h(App),
}).$mount('#app')

写Style标签的一个技巧

// 加上scoped可以保证样式表不会冲突
// 但是在App文件里面一般不添加这个
<style scoped></style>// 可以用less书写
// 用less书写的时候要安装less-loader
<style lang="less"></style>

// 安装less-loader的时候报错是因为版本不兼容的问题
// node
// 查看版本
npm view less-loader version// 安装7版本，默认是7版本中的最新版本
npm i less-loader@7

Todo-list案例

组件化编码流程（通用）

  1. 实现静态组件：抽取组件，使用组件实现静态效果
  2. 展示动态数据：
    1. 数据的类型，名称是什么？
    2. 数据保存在那个组件？
  3. 交互—从绑定事件监听开始

数据在哪里，操作就在哪里

  1. 组件化编码流程：

    1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
    2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
      1. 一个组件在用：放在自身即可
      2. 一些组件在用：放在他们共同的父组件上（状态提升）
    3. 实现交互：从绑定事件开始
  2. props适用于：
    1. 父组件==>子组件通信
    2. 子组件==>父组件通信（要求父先给子一个函数）
  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这么做

浏览器本地存储

  1. 存储内容大小一般支持5MB左右（不同浏览器可能害不一样）
  2. 浏览器端通过Window.localStorage和Window.sessionStorage属性来实现本地存储机制
  3. 相关API：见下方的代码
  4. 备注：
    1. sessionStorage存储的内容会随着浏览器窗口关闭而消失
    2. localStorage存储的内容，需要手动清除才会消失
    3. localStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem获取的返回值是null
    4. JSON.parse(null)的结果依旧是null

在localStorage.html文件里:

<!DOCTYPE html>
<html lang="en">
<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"><title>localStorage</title>
</head>
<body><h2>localStorage</h2><button onclick="saveData()">点我保存数据</button><button onclick="readData()">点我读取数据</button><button onclick="deleteData()">点我删除数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = {name:'张三', age:18}// 保存数据到本地function saveData() {// 如果传入的第二个参数不是字符串，会默认使用`toString`方法localStorage.setItem('msg', 'hello')localStorage.setItem('person', JSON.stringify(p))}// 读取本地保存的数据function readData() {console.log(localStorage.getItem('msg'))const result = localStorage.getItem('person')// JSON.parse()方法将数据转换成javascript对象console.log(JSON.parse(result))}// 删除本地的数据function deleteData() {localStorage.removeItem('msg')}// 清空保存在本地的数据function deleteAllData() {localStorage.clear()}</script>
</body>
</html>

在sessionStorage.html文件里：

<!DOCTYPE html>
<html lang="en">
<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"><title>sessionStorage</title>
</head>
<body><h2>sessionStorage</h2><button onclick="saveData()">点我保存数据</button><button onclick="readData()">点我读取数据</button><button onclick="deleteData()">点我删除数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = {name:'张三', age:18}// 保存数据到本地function saveData() {// 如果传入的第二个参数不是字符串，会默认使用`toString`方法sessionStorage.setItem('msg', 'hello')sessionStorage.setItem('person', JSON.stringify(p))}// 读取本地保存的数据function readData() {console.log(sessionStorage.getItem('msg'))const result = sessionStorage.getItem('person')// JSON.parse()方法将数据转换成javascript对象console.log(JSON.parse(result))}// 删除本地的数据function deleteData() {sessionStorage.removeItem('msg')}// 清空保存在本地的数据function deleteAllData() {sessionStorage.clear()}</script>
</body>
</html>

组件自定义事件

绑定事件

从School组件中传数据给App组件：

在App组件中：

<template><div id="app"><!-- 这是第一种绑定写法 --><!-- 当School组件中触发mine事件的时候，执行回调函数getSchoolName --><School v-on:mine="getSchoolName"/><!-- 给Student绑定一个ref属性 --><Student ref="student"/></div>
</template><script>
import School from './components/School.vue'
import Student from './components/Student.vue'export default {name: 'App',components: {School,Student},methods: {getSchoolName(name) {console.log(name)},getStudentName(name) {console.log(name)}},mounted() {// 这是第二种绑定写法// 给拥有student这个ref属性的组件添加一个自定义属性，当自定义属性触发的时候执行getStudentName这个回调函数this.$refs.student.$on('mine', this.getStudentName)},
}
</script>

在School组件中：

<template><div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><!-- 点点击的时候，执行sendSchoolName回调函数 --><button @click="sendSchoolName">点击发送学校名</button></div>
</template><script>
export default {name:'School',data() {return {schoolName:'Gzu',address:'GuiYang'}},methods: {sendSchoolName() {// 触发组件上的mine自定义事件，将this.schoolName作为参数传回去this.$emit('mine', this.schoolName)}},
}
</script>

在Student组件中：

<template><div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">点击发送学生名</button></div>
</template><script>
export default {name:'Student',data() {return {studentName:'SoLi',age:17,sex:'remale'}},methods: {sendStudentName() {// 触发组件上的mine自定义事件，将this.studentName作为参数传回去this.$emit('mine', this.studentName)}},
}
</script><style></style>

一个扩展知识：

function fn(value, ...arr) {} // 这种函数的定义，在调用的时候，如果传的参数有多个，除了第一个参数传给value之外，其他参数传递给arr作为数组成员
  • 组件上也可以使用原生DOM事件，需要使用native修饰符 21

解绑事件

在Student组件文件中

<template><div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">点击发送学生名</button><button @click="unbind">点击解绑mine事件</button><button @click="death">点击销毁student实例(vc)</button></div>
</template><script>
export default {name:'Student',data() {return {studentName:'SoLi',age:17,sex:'remale'}},methods: {sendStudentName() {// 触发组件上的mine自定义事件，将this.studentName作为参数传回去this.$emit('mine', this.studentName)},unbind() {this.$off('mine') // 解绑一个自定义事件this.$off(['mine', 'xxx', 'xxx']) // 解绑多个自定义事件this.$off() // 解绑全部自定义事件},death() {this.$destroy() // 销毁了当前的Student组件的实例，销毁后所有Student实例的自定义事件全都无效了}},
}
</script>

全局事件总线

<script>
import Search from './components/Search.vue'
import UsersList from './components/UsersList.vue'
import Vue from 'vue'export default {name: 'App',components: {Search,UsersList},// 注册全局事件总线beforeCreate() {Vue.prototype.$bus = this}
}
</script>

消息订阅与发布

  1. 一种组件间通信的方式，适用于任意组件间通信

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入：import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

      methods() {demo(data) {...} // 回调函数
}
...
mounted() {this.pid = pubsub.subscribe('xxx', this.demo); // 订阅信息
}

    4. 提供数据：pubsub.publish('xxx', 数据)

    5. 最好在beforeDestroy钩子中，用pubSub.unsubscribe(pid)去<span style="color:red">取消订阅</span>

$nextTick（常用）

  1. 语法：this.$nextTick(回调函数)

  2. 作用：在下一次DOM更新结束后执行其指定的回调

  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

    this.$nextTick(function() {this.$refs.inputTitle.focus() // 获取焦点
})

过渡与动画

动画效果

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- name属性是为了区分各个动画 appear是为了在网页刷新的时候就启动动画效果 --><!-- 将需要添加动画的地方添加transition标签 --><transition name="hello" appear><h1 v-show="isShow">你好，世界</h1></transition></div>
</template><script>
export default {data() {return {isShow: true,}},
}
</script><style scoped>h1 {background-color: blueviolet;color: #fff;padding: 15px;}.hello-enter-active {animation: move 1s linear;}.hello-leave-active {animation: move 1s linear reverse;}@keyframes move {from {transform: translateX(-100%);}to {transform: translateX(0px);}}
</style>

过渡效果

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- name属性是为了区分各个动画 appear是为了在网页刷新的时候就启动动画效果 --><!-- 将需要添加动画的地方添加transition标签 --><transition name="hello" appear><h1 v-show="isShow">你好，世界</h1></transition><!-- 多个元素需要添加动画，需要使用下面这个标签包裹，需要在元素上使用key值 -->
<!-- <transition-group name="hello" appear><h1 v-show="isShow" key="1">你好，世界</h1><h1 v-show="isShow" key="2">世界，你好</h1></transition-group>--></div>
</template><script>
export default {data() {return {isShow: true,}},
}
</script><style scoped>h1 {background-color: blueviolet;color: #fff;padding: 15px;/* transition: 0.5s linear; */}/* 过渡效果也可以这样写（推荐写法） */.hello-enter-active, .hello-leave-active {transition: 0.5s linear;}/* 进入的起点 */.hello-enter {transform: translateX(-100%);}/* 进入的终点 */.hello-enter-to {transform: translateX(0);}/* 离开的起点 */.hello-leave {transform: translateX(0);}/* 离开的终点 */.hello-leave-to {transform: translateX(-100%);}/* 可以优化一下，进入的起点和离开的终点，进入的终点和离开的起点都是一样的 */
</style>

集成第三方动画

Animate.css

Vue封装的过渡与动画

  1. 作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名

  2. 写法：

    1. 准备好样式：

      1. 进入的样式：

        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      2. 离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

    2. 使用<transition>包裹要过渡的元素，并配置name属性：

      <transition><h1 v-show="isShow">你好呀！</h1>
</transition>

    3. 备注：若有多个元素需要过渡，则需要使用<transition-group>，且每个元素都要指定key值

Vue笔记_03_使用Vue脚手架相关推荐

  1. vue笔记一：Vue技术栈

    目录 vue笔记一:Vue技术栈 1.node.js 2. npm 3.ES6 4.Babel 5.项目构建工具vue-cli 6.路由vue-router 7.状态管理vuex 8.http请求⼯具 ...

  2. Vue笔记-Ant Design Vue构建前端连接后端WebSocket

    运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...

  3. Vue笔记-Ant Design Vue的使用（Vue3）

    这里文档要这样看: 这里 npm install ant-design-vue@2.0.0-rc.3 -savenpm install axios@0.21.0 --save 在main.js中添加a ...

  4. Vue笔记四：Vue获取DOM元素和组件元素的方法

    文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...

  5. vue学习资料：vue笔记ppt整理(vue基础指令vue基础语法)

    vuejs基础语法:

  6. Vue笔记随笔---kalrry

    Vue笔记随笔---kalrry VUE vue框架的两大核心: 一.前端开发历史 二.MV*模式 库 VS 框架 MVC架构模式 MVP架构模式 MVVM架构模式 vue是MVVM 三.开发工具 四 ...

  7. Vue笔记——搭建脚手架并快速创建Vue项目

    现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...

  8. vue安装与配置、脚手架

    目录 一.vue.js开发前为什么要安装node.js  ? vue推荐开发环境 二.node.js安装与配置 1.下载安装node.js 2.配置默认安装目录和缓存日志目录 3.node.js环境配 ...

  9. Vue笔记-尚硅谷-Alex

    Vue笔记 Vue简介 官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 介绍与描述 动态构建用户界面的渐进式 JavaScript 框架 ...

最新文章

  1. 用筛法求之N内的素数。(N 1000000)
  2. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样
  3. oracle ORA-14452错误处理
  4. 机器学习-集成之随机森林算法原理及实战
  5. easyui combobox默认选中项
  6. C# + .net下使用serialPort做串口开发 1
  7. 每个网页设计者都自以为是
  8. python找图是什么模块-python中模块查找的原理与方法详解
  9. 企业云成本浪费高达30%！行云管家、Cloudyn等厂商给出解决方案...
  10. html语言class,HTML DOM
  11. django的命令, 配置,以及django使用mysql的流程
  12. Maven项目中，jar包版本冲突导致运行时报错的问题
  13. OldSkoolVerb Plus for Mac(算法混响插件)
  14. 麦子学院demo（html+css）
  15. 分片（primary shard replica shard）
  16. 【算法】ACO蚂蚁寻路最短路径TSP问题-多篇文章总结
  17. 电脑重装系统后播放视频卡顿怎么办
  18. monty python and the holy grail_monty python and the holy grail - 百度学术
  19. 【100%通过率】华为OD机试真题 Python 实现【士兵过河】【2022.11 Q4 新题】
  20. （附源码）springboot在线考试系统 毕业设计 160935

热门文章

  1. WeGame，请介绍下你自己
  2. 邮箱导航-使用font-awesome实现导航小图标
  3. MacBook使用技巧：如何解决经常死机的问题
  4. 영어 단어 읽기 규칙 - 모음편
  5. Belt Finance 遭闪电贷攻击，Fork Curve 的潘多拉魔盒已打开？
  6. 加拿大深秋看满山红叶
  7. 29岁年轻人离奇死亡：不是生活太苦，是你容易想得太多
  8. 【Python】整理20个Pandas统计函数
  9. 用寄存器HAL库完成LED流水灯程序
  10. 条形码设计软件BarTender实用教程——透明度样本标签