• vite脚手架简单使用

    脚手架是一个可以实现开发框架快速搭建的一个命令

    现在的开发框架不仅仅包含技术框架，还包括了构建框架

    常见的构建框架

    随着我们的业务发展，项目开发越来越大，业务越来越复杂，为了项目的可维护性、可伸缩性，所以会采用最新的技术去开发项目，但是浏览器不认识代码比如:.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]                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

    1. import Vue from 'vue'
    2. import App from './pages'
    3. // createApp方法来构建实例 -- vue3偏函数式编程
    4. // new Vue方法来创建实例 -- vue2就是OOP
    5. new Vue({
    6.   render (createElement) {
    7.     return createElement(App)
    8.   }
    9. }).$mount('#app')

    事件总线用法与区别

        父子组件传值有两种方法

            props + $emit

            实例方法：$parent、$children、$refs

        $emit可以触发自定义事件

            它是的谁的方法？vue实例的方法

        要做全局事件总线，那么这里的this必须是全局的vue实例

    在main.js作为入口

    // vue3 的事件总线需要在全局配置对象上添加一个Emitter实例对象
    // cnpm i -S mitt库，然后在config上进行配置

    1. // 这里的Vue是全局的Vue
    2. Vue.prototype.eventBus = new Vue() //法一
    3. new Vue({
    4.   // 因为这里是项目的主入口，那么这里的new Vue是根 root，所以可以通过this.$root获取当前的实例对象
    5.   data() {
    6.     return { //法二
    7.       test: 10,
    8.       myEventBus: new Vue()
    9.     }
    10.   },
    11.   render (createElement) {
    12.     return createElement(App)
    13.   }
    14. }).$mount('#app')
    2. <script>
    3.     export default {
    4.         data() {
    5.             return {
    6.                 count: 1
    7.             }
    8.         },
    9.         methods: {
    10.             sendValue() {
    11.                 this.count ++
    12.                 this.eventBus.$emit('pageb-event', this.count) //法一
    13.                 this.$root.myEventBus.$emit('my-pageb', this.count) //法二
    14.             }
    15.         }
    16.     }
    17. script>

    2. <script>
    3.     export default {
    4.         data() {
    5.             return {
    6.                 parentValue: ''
    7.             }
    8.         },
    9.         mounted() {
    10.             this.eventBus.$on('pageb-event', function(num) { //法一
    11.                 console.log('pageb组件传递过来的参数', num)
    12.             })
    13.             this.$root.myEventBus.$on('my-pageb', function(num) { //法二
    14.                 console.log('data 数据和root实例来实现', num)
    15.             })
    16.         },
    17.         methods: {
    18.             dispatchParentFunc() {
    19.                 this.$parent.sendAvalue()
    20.             }
    21.         }
    22.     }
    23. script>

    组件继承 extends 只能单继承

    --原理采用ES6模块化继承原理

    1.     import List from './List.vue'
    2.     import Paging from './Paging'
    3.     export default {
    4.         // 继承父组件 -- 采用的原理就是ES6的模块化继承原理
    5.         extends: List, //法一 只能单继承
    6.         mixins: [List, Paging] //混合 法二
    7.     }

    注册全局组件

    1. //main.js
    2. import MyPaging from './components/MyPaging.vue'
    3. Vue.component('MyPaging', MyPaging)

      

    过滤器 filters

    有对象式和函数式（推荐）

    使用过滤器 用 | 隔开

    1. //使用过滤器 用 | 隔开
    2. <p> 时间：{{time | timeFormat('MM-dd hh时mm分')}} 权限：{{rights | 过滤器名字}}p>
    3. <script>
    4.     data(){
    5.         return {
    6.             right:'C'
    7.         }
    8.     },
    9.     filters:{ 
    10.     //过滤器第一个参数为使用过滤器的地方绑定数据值
    11.         过滤器名字(val){
    12.     //需要把正确的数据返回给页面渲染
    13.             return val == 'R' ? '只读':'创建'
    14.          },
    15.     // 可以使用过滤器来实现数组转换，仅用于页面展示，不会修改原来的指
    16.     // 要注意的：vue3没有过滤器
    17.         filters: {
    18.             timeFormat(val, type) {
    19.                  let d = new Date(val),
    20.                      yyyy = d.getFullYear(),
    21.                      MM = d.getMonth() + 1,
    22.                      dd = d.getDate(),
    23.                      hh = d.getHours(),
    24.                      mm = d.getMinutes(),
    25.                      ss = d.getSeconds()
    26.                   let obj = {yyyy, MM, dd, hh, mm, ss}
    27.                  // return yyyy + '年' + MM + `月${dd}日 ${hh}时${mm}分${ss}秒`
    28.                  // return MM + `月${dd}日 ${hh}时${mm}分`
    29.                  return type.replace(/(yyyy)|(MM)|(dd)|(hh)|(mm)|(ss)/g, function(key) {
    30.                      return obj[key]
    31.                  })
    32.             } 
    33.     }
    34. script>

    指令directive vue2/3都有

    分为两种 函数指令（推荐）和对象指令

    对象有完整的生命周期从：instered ->bind -> update ->componentUpdated -> unbind 结束

    bind会有入参：第一个为标签元素对象el，第二个为当前指令的所有参数

    指令使用的时候，参数一定要写在修饰符前

    实现一个插件

    新建components文件夹，新建index.js文件和MyPlugin.vue

    在index.js文件里引入MyPlugin文件

    1. import MyPaging from './MyPaging.vue'
    2. // PluginObject  //对象式
    3. // const plugin = {
    4. //     // 所有的对象插件必须有一个install属性，它的值必须是一个函数，并且这个函数会入参一个VueConstructor(VC)
    5. //     // install: function() {
    6. //     install(VC) {
    7. //         VC.component('MyPaging', MyPaging)
    8. //     }
    9. // }
    10. // PluginFunction
    11. function plugin(VC) {  //函数式
    12.     VC.component('MyPaging', MyPaging)
    13.     VC.directive(
    14.         'font',
    15.         function(el, bindData) {
    16.             console.log(arguments)
    17.             // 设置字体大小
    18.             let style = ''
    19.             if (bindData.value) style += 'font-size: ' + bindData.value + 'px;'
    20.             if (bindData.arg) style += 'color: ' + bindData.arg + ';'
    21.             
    22.             for (let i = 0;i < 100;i ++) {
    23.                 if (bindData.modifiers[i]) {
    24.                     style += 'letter-spacing: ' + i + 'px'
    25.                     break
    26.                 }
    27.             }
    28.             el.setAttribute('style', style)
    29.         }
    30.     )
    31.     VC.filter(
    32.         'timeFormat',
    33.         function(val, type) {
    34.             let d = new Date(val),
    35.                 yyyy = d.getFullYear(),
    36.                 MM = d.getMonth() + 1,
    37.                 dd = d.getDate(),
    38.                 hh = d.getHours(),
    39.                 mm = d.getMinutes(),
    40.                 ss = d.getSeconds()
    41.             let obj = {yyyy, MM, dd, hh, mm, ss}
    42.             return type.replace(/(yyyy)|(MM)|(dd)|(hh)|(mm)|(ss)/g, function(key) {
    43.                 return obj[key]
    44.             })
    45.         }
    46.     )
    47. }
    48. export default plugin

     MyPlugin.vue 分页

    1. <template>
    2.     <div>
    3.         <span class="paging-btn"
    4.             v-for="num in Math.ceil(total / size)"
    5.             :key="num"
    6.             @click="$emit('pagingEvt', num)">{{num}}span>
    7.     div>
    8. template>
    9. <script>
    10.     export default {
    11.         props: {
    12.             total: {
    13.                 type: Number,
    14.                 required: true
    15.             },
    16.             size: {
    17.                 type: Number,
    18.                 required: true
    19.             }
    20.         }
    21.     }
    22. script>

    在main.js实现插件 

    1. // 实现一个插件 main.js
    2. // use(plugin: PluginObject | PluginFunction)
    3. import MyPlugin from './components'
    4. 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]   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 vite

    2.取名字

    3.跟随指令

    cd 文件名

    4.启动项目

    yarn dev

  • 相关阅读:
    leetcode 342. Power of Four（4的次方)
    古人会“温酒”，为什么当代人喝酒不烫了？喝酒伤肝如何缓解？
    MySQL中什么情况下会出现索引失效？如何排查索引失效？
    C++基础知识要点--函数(Primer C++ 第五版 · 阅读笔记)
    node.js环境搭建
    大数据-kafka学习笔记
    【Linux】常见指令(二)
    想知道PDF转Word软件哪个好？向你推荐3个自用软件
    新电脑到手如何验机？保姆级攻略来了
    飞天使-sql查询基础
  • 原文地址：https://blog.csdn.net/qq_63354840/article/details/127749725