目录
2.vue.js 和 vue.runtime.xxx.js 的区别
一、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
三、props 配置
我们创建的 Student 组件里面的内容都是写好的，但是我们要是来了另一个学生 怎么录入他的信息呢，我们就不能 直接在data 中写死数据了，我们应该从外部传入数据
就应把下面data 的部分清空掉
<template>
<div class="demo">
<h1>{{msg}}</h1>
<h2>学生姓名{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "MySchool",
data() {
return {
msg: '我是一个学生',
name: "张三",
sex: "男",
age: 18,
};
},
};
</script>
<style>
</style>（一）传入数据
我们第一步应该在 App 组件中给每个使用的组件标签加上对应的属性
<template>
<div>
<Student name="李四" sex="女" age="20" />
<Student name="张三" sex="男" age="100" />
<Student name="张五" sex="男" age="10" />
</div>
</template>
<script>
import Student from "./components/Student.vue";
export default {
name: "app",
components: {
Student,
},
};
</script>
<style>
</style>（二）接收数据
1.简单接收（只接收）
然后再回到 Student 组件里面使用 props 配置 我们要回应刚才在 App 内定义的属性
用 props （data 同级的配置项）是数组的形式，接收 这三个属性，即可
我们外部引入的属性 和原本就有的属性 msg 有区别 在开发者工具中能看出来
下面是一种简单接收
<template>
<div class="demo">
<h1>{{ msg }}</h1>
<h2>学生姓名{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "MySchool",
data() {
return {
msg: "我是一个学生",
};
},
props: ["name", "age", "sex"],
};
</script>
<style>
</style>但是我们发现 传入的年龄是 字符串形式而不是数字，我们可以在 Student 中 {{ age*1 }} 进行强制类型转化 但不推荐
我们可以 在 App 中 在我们定义的属性值前面加上一个 冒号就能解决 v-bind 会解析冒号里面的东西，将最后的值进行返回 所以是 数字 20
<template>
<div>
<Student name="李四" sex="女" :age="20" />
</div>
</template>
2.限制数据类型接收
为了防止上面出现的传入数据类型错误的问题，我们可以 使用更规范的接收 只接受要求类型的数据 把刚才的数组类型的 props 改成 对象形式的数据 就行了 后面对应的就是我们要这个数据对应的数据类型， 如果不对浏览器会进行报错，这样就知道数据对不对
接收的同时对数据进行类型限制
props:{
name: String,
age:Number,
sex:String
}3.高级接收
还有更高级的写法 把里面的属性也写成对象的形式 三个配置项
type：指定数据类型 就是上面方法的功能
required： 指定必须要传入这个参数值
default：如果没传东西就给个默认值
接收的同时对数据 进行类型限制，默认值限制，必要性的限制
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
default: 99,
},
sex: {
type: String,
required: true,
},
},（三）对外部传入数据修改
外部传入的数据不能进行更改
如果想强行更改传入的数据可以在data 里面写一个新的变量 然后把传入的变量赋值给 这个新变量
然后 在里面显示 {{新变量}} 然后直接对新变量修改即可
这是因为 如果data 里面出现 一个和传入变量相同名字的变量时 我们会优先显示 外部传入的变量
外部变量优先级高
<template>
<div class="demo">
<h1>{{ msg }}</h1>
<h2>学生年龄：{{ myAge }}</h2>
<button @click="updateAge">点我增加年龄</button>
</div>
</template>
<script>
export default {
name: "MySchool",
data() {
return {
msg: "我是一个学生",
myAge: this.age,
};
},
props:{
age: {
type: Number,
default: 99,
},
},
methods: {
updateAge() {
this.myAge++;
},
},
};
</script>
<style>
</style>四、mixin 混入
（一）介绍
多个组件共享一个配置 的行为就叫混入
如下 Student 组件和 School 组件 里面都有name 属性 而且都有 showName 方法
这个方法一模一样 我们就可以把这俩方法变成一个公用的方法 然后再 在这两个组件里面 引入就行
（二）实现
1.新建文件
export const maxin = {
methods: {
showName(){
alert(this.name)
}
},
}
新建一个 mixin js 文件
2.文件内容
写入内容，把公用的方法 写入进去 因为我们后面要用 import 引入 所以要暴露
我们在前面 加上 export 采用分别暴露的形式
export const maxin = {
methods: {
showName(){
alert(this.name)
}
},
}
3.引入方法
局部引入
先引入 mixin 使用 import 因为我们采用了分别暴露 所以引入的内容得 加大括号 {}
import {mixin} from ’../mixin‘
然后我们就能使用引入的 mixin 方法了
然后再加入一个 和 data 并列 的配置项 mixins 后面是数组形式
mixins:[mixin] 后面是我们写的函数名
<template>
<div class="demo">
<h2 @click="showName">学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>
</template>
<script>
import {mixin} from '../mixin'
export default {
name: "School",
data() {
return {
name: "一个学校",
address: "北京",
};
},
methods: {
showName() {
alert(this.name);
},
},
mixins:[mixin]
};
</script>
<style>
</style>里面也能写 data 等同级的配置项
export const hunhe = {
data() {
return {
a: 1,
b: 2
}
},
}
然后再在里面引入，查看vue 工具 里面 School 组件里面 的data 里面既有原来的 name address 属性还有我们 外部引入的 a，b 属性，这个 data 里面的数据是混合的
<script>
import {mixin,hunhe} from '../mixin'
export default {
name: "School",
data() {
return {
name: "一个学校",
address: "北京",
};
},
methods: {
showName() {
alert(this.name);
},
},
mixins:[mixin,hunhe]
};
</script>全局引入
把上面 引入的句子写到 main.js 里面去
然后在使用 Vue 中的一个方法
Vue.mixin(mixin) 这样就能实现全局引入
写完这个全局 就都有里面的东西了就不用再引入了
import Vue from 'vue'
import App from './App.vue'
import { mixin, hunhe } from './mixin'
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(hunhe)
new Vue({
el: '#app',
render: h => h(App),
})
五、插件
（一）介绍
用于增强 Vue
Vue 插件本质上来说就是一个对象
但是里面必须包含一个方法 就是 install 安装
要写在单独的文件里面
（二）使用
先在 plugins.js 文件里面写上我们的插件
里面必须有 函数 install 函数 里面有一个参数 它是Vue 的构造函数，后面也能带参数
install(Vue,x,y,z)
x y z就是 Vue.use(plugins,1,2,3) 传入的后面的1 2 3
export default {
install(Vue) {
console.log('@@@install',Vue)
}
}然后在 main.js 里面引入 这个文件 然后使用Vue 提供给我们的 API Vue.use(plugins)
就能调用我们插件了
import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'
Vue.config.productionTip = false
Vue.use(plugins)
new Vue({
el: '#app',
render: h => h(App),
})
我们在插件的install 函数里面写上我们之前学过的一些东西，全局过滤器，定义全局指令，定义混入，给Vue原型上添加一个方法 这些东西全都放进去
然后就都可以使用了
export default {
install(Vue) {
Vue.filter('myslice', function () {
return value.slice(0, 4)
})
Vue.directive('fbind', {
bind(element, binding) {
element.value = binding.value
},
inserted(element, binding) {
element.focus()
},
update(element, binding) {
element.value = binding.value
},
})
Vue.mixin({
data() {
return {
x: 100,
y: 200,
};
},
})
Vue.prototype.hello = () => { alert('你好啊') }
}
}六、脚手架编写样式的小技巧
（一）问题提出
无论是 School 组件里面写的样式 还是 Student 里面写的样式到最后都会汇总到一起，有相同类名的就会被改成一样的格式
两个文件中都有 demo 类名 而且都对类名里面设置了 背景颜色 以引入的最后一次为主 后引入的css 会覆盖前一个 相同类名的 css
import Student from "./components/Student.vue";
import School from "./components/School.vue";
<template>
<div>
<School />
<Student />
</div>
</template>
<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
name: "app",
components: {
Student,
School,
},
};
</script>
<style>
</style>（二）解决办法
在每一个组件的 style 标签中加入一个 scoped 属性 就是添加作用域的意思
这样 css 只会修改本组件中的 标签内容 和其他组件的类名冲突也不会互相影响了
但是不要在 App 组件的 style 的标签中加入 scoped 属性，App 就是要管所有的组件我们写入里面就是想让 所有组件的某个元素实现相同的状态
<style scoped>
</style>style 标签里面还能写指定什么写法 我们可以不用css 写可以用 less 等其他的方法写
style 就得用 less 的写法了
不写 lang 就是默认 css 写法
<style lang='less'>
</style>
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
