脚手架是一个可以实现开发框架快速搭建的一个命令
现在的开发框架不仅仅包含技术框架，还包括了构建框架
常见的构建框架
随着我们的业务发展，项目开发越来越大，业务越来越复杂，为了项目的可维护性、可伸缩性，所以会采用最新的技术去开发项目，但是浏览器不认识代码比如:.vue文件、样式预处理器、ES6高级语法、Typescript等文件
所以需要一个编译器来执行编译，把浏览器不认识的代码编译成浏览猾认识代码，那么不同的语法需要不同的编译器，比如lesa需要less编译器，vue需要less编泽胜所以les:的编译器叫less-loader，vue的编译器叫vue-loader".
vue文件会被vue-loader进行编译，template会被编译成render方法，使用h函数渲染，样式也会被编译成一个js代码
那么就需要一个平台来把所有编译器集中起来，然后去对编写的代码进行编译，最终输出一个浏览器可执行的文件，这个平台现在叫webpaoka或则rollup
通过平台可以把所有开发框架 vue/react/angular等和样式与处理，ts等高级语法等进行整合项目开发，就可以更大程度上保证项目的开发效率，可维护性。
webpack
实现一个项目的构建，它可以把我们写的一些无序的代码进行整理，实现文件的拼接，把写的ES6代码编译成ES5，实现开发服务器搭建。
webpack第一次编译时全量编译
rollup
实现一个模块的构建，按需进行编译
所有的其它脚手架都是基于这两个平台
vue2 脚手架
vue这个框架，现在有6个脚手架
vue2+vue3 -》vue-cli基于webpack的脚手架5个版本，主要使用的版本是3、4、5
首先需要安装脚手架: vue-cli 后来改为 @vue/cli (cli === command line 命令行)
cnpm i -g @vue/cli
需要使用 vue -h来测试全局脚手架命令是否安装成功
初始化一个vue项目
create [options] <app-name> create a new project powered by vue-cli-service
vue create vue-lesson 创建项目的方法命令
步骤：
1、Manually select features 选择自定义规则
2、Check the features needed for your project 选择在项目中需要使用到的预处理器等功能
3、Choose a version of Vue. 选择vue版本
4、Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 选择样式的预处理器
5、Pick a linter / formatter config: Standard 选择eslint版本 eslint(是一个代码检查机制，可以实时的对编写的代码规则等进行检查)
6、Pick additional lint features lint执行时机，当执行代码保存的时候就开始做代码检查-- lint on save => lintOnSave
7、Where do you prefer placing config for Babel, ESLint, etc.? webpack(vue脚手架)的额外配置在那里编写 In dedicated config files
vue3 -》vite基于rollup平台
vite脚手架不需要安装
yarn create vite
1.清理文件夹
2.在main.js构造实例
createApp方法来构建实例 -- vue3偏函数式编程
new Vue方法来创建实例 -- vue2就是OOP
import Vue from 'vue'
import App from './pages'
// createApp方法来构建实例 -- vue3偏函数式编程
// new Vue方法来创建实例 -- vue2就是OOP
new Vue({
render (createElement) {
return createElement(App)
}
}).$mount('#app')事件总线用法与区别
父子组件传值有两种方法
props + $emit
实例方法：$parent、$children、$refs
$emit可以触发自定义事件
它是的谁的方法？vue实例的方法
要做全局事件总线，那么这里的this必须是全局的vue实例
在main.js作为入口
// vue3 的事件总线需要在全局配置对象上添加一个Emitter实例对象
// cnpm i -S mitt库，然后在config上进行配置
// 这里的Vue是全局的Vue
Vue.prototype.eventBus = new Vue() //法一
new Vue({
// 因为这里是项目的主入口，那么这里的new Vue是根 root，所以可以通过this.$root获取当前的实例对象
data() {
return { //法二
test: 10,
myEventBus: new Vue()
}
},
render (createElement) {
return createElement(App)
}
}).$mount('#app')<template>
<div class="box">
<h4>Page B。。。</h4>
<p>
数据： {{count}} <button @click="sendValue">发送数据给A组件</button>
</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 1
}
},
methods: {
sendValue() {
this.count ++
this.eventBus.$emit('pageb-event', this.count) //法一
this.$root.myEventBus.$emit('my-pageb', this.count) //法二
}
}
}
</script><template>
<div class="box">
<h4>Page A。。。</h4>
<p>
<button @click="dispatchParentFunc">调用父组件的方法</button>
</p>
<p>
接收的父组件的数据: {{parentValue}}
</p>
</div>
</template>
<script>
export default {
data() {
return {
parentValue: ''
}
},
mounted() {
this.eventBus.$on('pageb-event', function(num) { //法一
console.log('pageb组件传递过来的参数', num)
})
this.$root.myEventBus.$on('my-pageb', function(num) { //法二
console.log('data 数据和root实例来实现', num)
})
},
methods: {
dispatchParentFunc() {
this.$parent.sendAvalue()
}
}
}
</script>组件继承 extends 只能单继承
--原理采用ES6模块化继承原理
import List from './List.vue'
import Paging from './Paging'
export default {
// 继承父组件 -- 采用的原理就是ES6的模块化继承原理
extends: List, //法一 只能单继承
mixins: [List, Paging] //混合 法二
}注册全局组件
//main.js
import MyPaging from './components/MyPaging.vue'
Vue.component('MyPaging', MyPaging)
过滤器 filters
有对象式和函数式（推荐）
使用过滤器 用 | 隔开
//使用过滤器 用 | 隔开
<p> 时间：{{time | timeFormat('MM-dd hh时mm分')}} 权限：{{rights | 过滤器名字}}</p>
<script>
data(){
return {
right:'C'
}
},
filters:{
//过滤器第一个参数为使用过滤器的地方绑定数据值
过滤器名字(val){
//需要把正确的数据返回给页面渲染
return val == 'R' ? '只读':'创建'
},
// 可以使用过滤器来实现数组转换，仅用于页面展示，不会修改原来的指
// 要注意的：vue3没有过滤器
filters: {
timeFormat(val, type) {
let d = new Date(val),
yyyy = d.getFullYear(),
MM = d.getMonth() + 1,
dd = d.getDate(),
hh = d.getHours(),
mm = d.getMinutes(),
ss = d.getSeconds()
let obj = {yyyy, MM, dd, hh, mm, ss}
// return yyyy + '年' + MM + `月${dd}日 ${hh}时${mm}分${ss}秒`
// return MM + `月${dd}日 ${hh}时${mm}分`
return type.replace(/(yyyy)|(MM)|(dd)|(hh)|(mm)|(ss)/g, function(key) {
return obj[key]
})
}
}
</script>指令directive vue2/3都有
分为两种 函数指令（推荐）和对象指令
对象有完整的生命周期从：instered ->bind -> update ->componentUpdated -> unbind 结束
bind会有入参：第一个为标签元素对象el，第二个为当前指令的所有参数
指令使用的时候，参数一定要写在修饰符前
实现一个插件
新建components文件夹，新建index.js文件和MyPlugin.vue
在index.js文件里引入MyPlugin文件
import MyPaging from './MyPaging.vue'
// PluginObject //对象式
// const plugin = {
// // 所有的对象插件必须有一个install属性，它的值必须是一个函数，并且这个函数会入参一个VueConstructor(VC)
// // install: function() {
// install(VC) {
// VC.component('MyPaging', MyPaging)
// }
// }
// PluginFunction
function plugin(VC) { //函数式
VC.component('MyPaging', MyPaging)
VC.directive(
'font',
function(el, bindData) {
console.log(arguments)
// 设置字体大小
let style = ''
if (bindData.value) style += 'font-size: ' + bindData.value + 'px;'
if (bindData.arg) style += 'color: ' + bindData.arg + ';'
for (let i = 0;i < 100;i ++) {
if (bindData.modifiers[i]) {
style += 'letter-spacing: ' + i + 'px'
break
}
}
el.setAttribute('style', style)
}
)
VC.filter(
'timeFormat',
function(val, type) {
let d = new Date(val),
yyyy = d.getFullYear(),
MM = d.getMonth() + 1,
dd = d.getDate(),
hh = d.getHours(),
mm = d.getMinutes(),
ss = d.getSeconds()
let obj = {yyyy, MM, dd, hh, mm, ss}
return type.replace(/(yyyy)|(MM)|(dd)|(hh)|(mm)|(ss)/g, function(key) {
return obj[key]
})
}
)
}
export default pluginMyPlugin.vue 分页
<template>
<div>
<span class="paging-btn"
v-for="num in Math.ceil(total / size)"
:key="num"
@click="$emit('pagingEvt', num)">{{num}}</span>
</div>
</template>
<script>
export default {
props: {
total: {
type: Number,
required: true
},
size: {
type: Number,
required: true
}
}
}
</script>在main.js实现插件
// 实现一个插件 main.js
// use(plugin: PluginObject | PluginFunction)
import MyPlugin from './components'
Vue.use(MyPlugin)vue脚手架
最开始叫vue-cli （命令行）-> @vue/cli 都是基于webpack平台，启动有些慢
vite 基于rollup进行封装得到的一个开发库
vue-cli
- cnpm安装：npm install cnpm -g --registry=https://registry.npm.taobao.org
- @vue/cli 这个库可以在本地进行安装，然后调用命令来进行项目开发框架:cnpm i -g @vue/cli
- 可以执行命令：vue h //帮助命令
- 创建新项目：create [options] <app-name> create a new project powered by vue-cli-service vue create old-vue-cli-demo
1、Please pick a preset: Manually select features 选择项目初始化方式，可以是默认的，也可以是自己配置的
2、选择自己配置：选择是否使用ts、预处理器、路由、状态管理器等
3、Choose a version of Vue.js that you want to start the project with 3.x 选择vue的版本
4、代码检查规则：Pick a linter / formatter config: Standard
5、检查代码的时机：Pick additional lint features: Lint on save
6、对脚手架进行额外配置在哪个文件进行：Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
7、然后保存进行开发框架安装
vite的用法
不需要在本地安装vite这个命令，直接使用yarn库运行即可
虚拟dom是由一堆的虚拟节点(VNode)组成的dom对象，它是一个普通的js对象，它描述了真实dom的结构
1.安装yarn：
cnpm i -g yarn测试：yarn -h
yarn create vite2.取名字
3.跟随指令
cd 文件名4.启动项目
yarn dev
扫一扫
4663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
