Vue学习随笔+商城项目【下】

最新推荐文章于 2023-12-18 14:31:28 发布
最新推荐文章于 2023-12-18 14:31:28 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： 实用推荐 web网站 文章标签： javascript vue.js es6 webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47654010/article/details/113786212
版权

更新日期：2021-2-10 晚 【新年快乐】
先看这里：Vue学习随笔+商城项目【上】

目录

（十二）组件化高级

12.1 slot-插槽的基本使用

概念:

  • 组件的插槽是为了让我们封装的组件更具有扩展性
  • 让使用者可以决定组件内部的一些内容到底展示什么

思想：

  • 抽取共性，保留不同
  • 我们在使用组件的时候有时候希望，在组件内部定制化内容，例如京东这样。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K8jb2Pe0-1612964660653)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.1-1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izzIOxgP-1612964660654)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.1-2.png)]

  • 这两个都是导航栏，组件的思想是可以复用的，把这个导航栏看做一个组件。

  • 这个组件都可以分成三个部分，左边/中间/右边，如果可以分割组件，就可以定制化组件内容了。

  <!-- 父组件 -->
  <div id="app">

    <cpn></cpn>
    <cpn>
      <span style="color:red;">这是插槽内容222</span>
    </cpn>
    <cpn>
      <i style="color:red;">这是插槽内容333</i>
    </cpn>
    <cpn></cpn>

  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <div>
        {
  {message}}
      </div>
      <!-- 插槽默认值 -->
      <slot><button>button</button></slot>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息"
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

简单使用插槽，定义template时候使用slot

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <div>
        {
  {message}}
      </div>
      <!-- 插槽默认值：<button>button</button> -->
      <slot><button>button</button></slot>
    </div>
  </template>

插槽可以使用默认值，<button>button</button>就是插槽的默认值。

<cpn></cpn>
<cpn><span style="color:red;">这是插槽内容222</span></cpn>

使用插槽，<span style="color:red;">这是插槽内容222</span>将替换插槽的默认值

上述代码结果如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMgM66ey-1612964660655)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.1-3.png)]

替换了两次插槽，两次未替换显示默认的button。

如果想实现组件分成三部分就可以使用三个<slot></slot>来填充插槽了。

12.2 slot-具名插槽的使用

  • 具名插槽，就是可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列。
<!-- 父组件 -->
  <div id="app">

    <cpn>
      <span>没具名</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>


    </cpn>


  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>

      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息"
        }
      },
      components: {
    
        cpn
      },
    })
  </script>

如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ea5pNbW-1612964660657)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.2-1.png)]

没有具名的插槽排在最后，因为在定义组件的时候，排在了最后，如果有多个按顺序排列。具名插槽按照自定义的顺序排列。

定义具名插槽，使用name属性，给插槽定义一个名字。

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

使用具名插槽，在自定义组件标签内使用slot="left"，插入指定插槽

  <!-- 父组件 -->
  <div id="app">
    <cpn>
      <span>没具名</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>
    </cpn>
  </div>

注意：此处有是三种写法，获取指定插槽。

12.3 编译的作用域

  • 前面说过组件都有自己的作用域，自己组件的作用在自己组件内。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>编译的作用域</title>
</head>
<body>
  <!-- 父组件 -->
  <div id="app">
    <!-- 使用的vue实例作用域的isShow -->
    <cpn v-show="isShow"></cpn>
  </div>
<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>哈哈哈</p>
      <!-- 组件作用域，使用的子组件的作用域 -->
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          isShwo:false
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          message: "我是父组件消息",
          isShow:true
        }
      },
      components: {
    
        cpn
      },
    })
  </script>
</body>

</html>

结果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ol0Mc4rI-1612964660658)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.3-1.png)]

子组件使用的是子组件的isShow，子组件为false，所以button没显示，被隐藏。

12.4 作用域插槽案例

  • 目的：父组件替换插槽的标签，但是内容是由子组件来提供。

  • 同一组数据，不同展示方式

  • 当组件需要在多个父组件多个界面展示的时候，将内容放在子组件插槽中，父组件只需要告诉子组件使用什么方式展示界面。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域插槽案例</title>
</head>

<body>


  <!-- 父组件 -->
  <div id="app">
    <cpn></cpn>
    <!-- 目的是获取子组件数据 -->
    <cpn>
      <!-- 2.5以下必须使用template -->
      <template slot-scope="slot">
        <!-- <span v-for="(item, index) in slot.data" :key="index">{
   {item}}-</span> -->
        <span>{
  {slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
        <!-- 2.5以下必须使用template -->
        <template slot-scope="slot">
          <!-- <span v-for="(item, index) in slot.data" :key="index">{
   {item}}*</span> -->
          <span>{
  {slot.data.join(' * ')}}</span>
        </template>
      </cpn>
  </div>

<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <slot :data="pLanguage">
          <ul>
              <li v-for="(item, index) in pLanguage" :key="index">{
  {item}}</li>
            </ul>
      </slot>

    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
    
      template: "#cpn",
      data() {
    
        return {
    
          isShwo:false,
          pLanguage:['JavaScript','Java','C++','C']
        }
      },
    }
    const app = new Vue({
    
      el: "#app",
      data() {
    
        return {
    
          isShow:true
        }
      },
      components: {
    
        cpn
      },
    })
  </script>
</body>

</html>

组件中使用slot-scope="slot"**（2.6.0已经废弃）**给插槽属性命名，在通过slot调用绑定在插槽上的属性。也可以使用v-slot="slot"。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWchwHTW-1612964660659)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\12.4-1.png)]

（十三）Vue实例的生命周期

13.1 生命周期图

​ Vue实例的生命周期中有多个状态。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TdyfidhJ-1612964660660)(C:\Users\86136\Desktop\repository\DailyCode\source_BASIS\Stage10.0-Vue\VueLearnNotes-master\VueLearnNotes-master\13-Vue实例的生命周期\images\lifecycle1.png)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue实例的生命周期</title>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>测试生命周期</h1>
        <div>{
  {msg}}</div>
        <hr>
        <h3>测试beforeUpdate和update两个钩子函数</h3>
        <button @click="handlerUpdate">更新数据</button>
    </div>
    <script>
        var app = new Vue({
    
            el:"#app",
            data:{
    
                msg:"12345"
            },
            methods: {
    
                handlerUpdate:function(){
    
                    this.msg=this.msg.split("").reverse().join("");
                },
            },//按照示意图依次调用
            beforeCreate:function(){
    
                console.log("调用了beforeCreate钩子函数");
            },
            created:function () {
    
                console.log("调用了created钩子函数");
            },
            beforeMount: function () {
    
                console.log('调用了beforeMount钩子函数')
            },
            mounted: function () {
    
                console.log('调用了mounted钩子函数')
            },
            beforeUpdate: function () {
    
                console.log("调用了beforeUpdate钩子函数")
            },
            updated: function () {
    
                console.log("调用了updated钩子函数");
            },
            beforeDestroy: function () {
    
                console.log("调用了beforeDestroy钩子函数")
            },
            destroyed: function () {
    
                console.log("调用了destroyed钩子函数");
            },
        });
    </script>
</body>
</html>

如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rtw1k0lD-1612964660661)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\1.png)]

初始化页面依次调用了：

  1. 调用了beforeCreate钩子函数
  2. 调用了created钩子函数
  3. 调用了beforeMount钩子函数
  4. 调用了mounted钩子函数

点击更新数据后：

12345变成了54321，此时调用了：

  1. 调用了beforeUpdate钩子函数
  2. 调用了updated钩子函数

打开F12控制台
直接输入app.$destroy()主动销毁Vue实例调用：

  1. 调用了beforeDestroy钩子函数
  2. 调用了destroyed钩子函数

13.2 再探究

13.2.1 beforeCreate之前

初始化钩子函数和生命周期

13.2.2 beforeCreate和created钩子函数间的生命周期

在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件。
生命周期展示图

13.2.3 created钩子函数和beforeMount间的生命周期

对于created钩子函数和beforeMount有判断：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pysh2brU-1612964660665)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\2.png)]

13.2.3.1el选项对生命周期影响
  1. 有el选项
new Vue({
    el: '#app',
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})

结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g88IvsmO-1612964660667)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\3.png)]

  1. 无el选项
new Vue({
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TEokYau-1612964660669)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\4.png)]

证明没有el选项，则停止编译，也意味着暂时停止了生命周期。生命周期到created钩子函数就结束了。而当我们不加el选项，但是手动执行vm.$mount(el)方法的话，也能够使暂停的生命周期进行下去，例如：

var app = new Vue({
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})
app.$mount('#app')

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TrT6qNzn-1612964660671)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\3.png)]

13.2.3.2 template

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zwfebznN-1612964660673)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\5.png)]

同时使用template和HTML，查看优先级：

    <h1>测试template和HTML的优先级</h1>
    <div id="app">
        <p>HTML优先</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"template优先"
            },
            template:"<p>{
  {msg}}</p>",
        });
    </script>

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGmcwHkY-1612964660674)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\6.png)]

结论

  1. 如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
  2. 如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高
  3. 如果1,2条件都不具备，则报错

注意

  1. Vue需要通过el去找对应的template，Vue实例通过el的参数，首先找自己有没有template，如果没有再去找外部的html，找到后将其编译成render函数。
  2. 也可以直接调用render选项，优先级：render函数选项 > template参数 > 外部HTML。
new Vue({
    el: '#app',
    render (createElement) {
        return (....)
    }
})

13.2.4 beforeMount和mounted钩子函数间的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8sx37we-1612964660675)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\7.png)]

beforeMount

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Dom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

Mount

载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到DOM节点中去

这里两个钩子函数间是载入数据。

13.2.5 beforeUpdate钩子函数和updated钩子函数间的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zqu4DhzU-1612964660676)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\8.png)]
在Vue中，修改数据会导致重新渲染，依次调用beforeUpdate钩子函数和updated钩子函数

如果待修改的数据没有载入模板中，不会调用这里两个钩子函数

var app = new Vue({
    el: '#app',
    data: {
        msg: 1
    },
    template: '<div id="app"><p></p></div>',
    beforeUpdate: function () {
        console.log('调用了beforeUpdate钩子函数')
    },
    updated: function () {
        console.log('调用了updated钩子函数')
    }
})
app.msg = 2

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpI4PVU3-1612964660678)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\9.png)]
如果绑定了数据，会调用两个钩子函数：

<h1>测试有数据绑定修改数据，钩子函数调用情况</h1>
<div id="app">
</div>
<script>
    var app = new Vue({
        el:"#app",
        template:"<p>{
  {msg}}</p>",
        data:{
            msg:"原数据"
        },
        beforeUpdate: function () {
            console.log("调用了beforeUpdate钩子函数")
        },
        updated: function () {
            console.log("调用了updated钩子函数");
        },
    });
    app.msg = "数据被修改了";
</script>

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2GK8LgEH-1612964660678)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\10.png)]

注意只有写入模板的数据才会被追踪

13.2.6 beforeDestroy和destroyed钩子函数间的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4h8rCwr-1612964660679)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\11.png)]

13.2.6.1 beforeDestroy

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

13.2.6.2 destroyed

销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件

总结

  • beforecreate : 可以在这加个loading事件
  • created ：在这结束loading，还做一些初始数据的获取，实现函数自-执行
  • mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
  • beforeDestroy： 你确认删除XX吗？
  • destroyed ：当前组件已被删除，清空相关内容

（十四）前端模块化

14.1 为什么要有模块化

  • 随着前端项目越来越大，团队人数越来越多，多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目，小明定义一个aaa.js，小张定义了一个bbb.js。

aaa.js

//小明开发
var name = '小明'
var age = 22

function sum(num1, num2) {
   
  return num1 + num2
}
var flag = true
if (flag) {
   
  console.log(sum(10, 20));
}
  • 此时小明的sum是没有问题的。

bbb.js

//小红
var name = "小红"
var flag = false
  • 此时小明和小红各自用各自的flag你变量没问题。

但是此时小明又创建了一个mmm.js

//小明
if(flag){
   
  console.log("flag是true")
}
  • 在index.html页面导入这些js文件
  <script src="aaa.js" ></script>
  <script src="bbb.js" ></script>
  <script src="ccc.js" ></script>
  • 此时小明知道自己在aaa.js中定义的flag是true，认为打印没有问题，但是不知道小红的bbb.js中也定义了flag为true，所以mmm.js文件并没有打印出“flag是true”。

这就是全局变量同名问题。

14.2 使用导出全局变量模块解决全局变量同名问题

aaa.js

//模块对象
var moduleA = (function (param) {
   
  //导出对象
  var obj = {
   }
  var name = '小明'
  var age = 22

  function sum(num1, num2) {
   
    return num1 + num2
  }
  var flag = true
  if (flag) {
   
    console.log(sum(10, 20))
  }
  obj.flag=false
  return obj
})()

mmm.js

//小明
//使用全局变量moduleA
if(moduleA.flag){
   
  console.log("flag是true")
}

这样直接使用aaa.js导出的moduleA变量获取小明自己定义的flag。

14.3 CommonJS的模块化实现

​ CommonJS需要nodeJS的依支持。

aaa.js

//CommonJS需要nodeJS支持
var name = '小明'
var age = 22

function sum(num1, num2) {
   
  return num1 + num2
}
var flag = true
if (flag) {
   
  console.log(sum(10, 20))
}

// module.exports = {
   
//   flag : flag,
//   sum : sum
// }
//导出对象
module.exports = {
   
  flag,
  sum
}

使用module.exports = {}导出需要的对象。

mmm.js

//导入对象,nodejs语法,需要node支持,从aaa.js取出对象
var {
   flag,sum} = require("./aaa")

console.log(sum(10,20));

if(flag){
   
  console.log("flag is true");
}

使用 var {flag,sum} = require("./aaa")获取已经导出的对象中自己所需要的对象。

ES6的模块化实现

​ 如何实现模块化，在html中需要使用type='module'属性。

  <script src="aaa.js" type="module"></script>
  <script src="bbb.js" type="module"></script>
  <script src="mmm.js" type="module"></script>

此时表示aaa.js是一个单独的模块，此模块是有作用域的。如果要使用aaa.js内的变量，需要在aaa.js中先导出变量，再在需要使用的地方导出变量。

14.4.1 直接导出

export let name = '小明'

使用

import {
   name} from './aaa.js'
console.log(name)

./aaa.js表示aaa.js和mmm.js在同级目录。

如图打印结果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ALP9vlME-1612964660680)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\14.4-1.png)]

14.4.2 统一导出

var age = 22
function sum(num1, num2) {
   
  return num1 + num2
}
var flag = true
if (flag) {
   
  console.log(sum(10, 20))
}
//2.最后统一导出
export {
   
  flag,sum,age
}

使用import {name,flag,sum} from './aaa.js'导入多个变量

import {
   name,flag,sum} from './aaa.js'

console.log(name)

if(flag){
   
  console.log("小明是天才");
}

console.log(sum(20,30));

使用{}将需要的变量放置进去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UxKMlUaq-1612964660681)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\14.4-2.png)]

14.4.3 导出函数/类

在aaa.js中添加

//3.导出函数/类
export function say(value) {
   
  console.log(value);
}
export class Person{
   
  run(){
   
    console.log("奔跑");
  }
}

在mmm.js中添加

import {
   name,flag,sum,say,Person} from './aaa.js'

console.log(name)

if(flag){
   
  console.log("小明是天才");
}

console.log(sum(20,30));

say('hello')
const p = new Person();
p.run();

如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUJtzvqf-1612964660682)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\14.4-3.png)]

14.4.4 默认导入 export default

导出

  • 一个模块只允许有一个default
export default {
   
  flag,sum,age
}

导入

//4.默认导入 export default
import aaa from './aaa.js'
console.log(aaa.sum(10,110));

注意：使用默认导出会将所有需要导出的变量打包成一个对象，此时导出一个对象，此时我在mmm.js中导入变量时候命名为aaa，如果要调用变量需要使用aaa.变量。

14.4.5 统一全部导入

使用import * as aaa from './aaa.js'统一全部导入

// 5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag);
console.log(aaa.name);

（十五）webpack

15.1 webpack起步

15.1.1 什么是webpack

webpack是一个JavaScript应用的静态模块打包工具。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FTMlmYuI-1612964660683)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\15-1.png)]

从这句话中有两个要点，模块和打包需要关注。grunt/gulp都可以打包，那有什么区别。

模块化

webpack可以支持前端模块化的一些方案，例如AMD、CMD、CommonJS、ES6。可以处理模块之间的依赖关系。不仅仅是js文件可以模块化，图片、css、json文件等等都可以模块化。

打包

webpack可以将模块资源打包成一个或者多个包，并且在打包过程中可以处理资源，例如压缩图片，将scss转成css，ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。grunt/gulp也可以打包。

和grunt/glup的对比

  • grunt/glup的核心是Task
    • 我们可以配置一系列的task，并且定义task要处理的事务（例如ES6/TS转化，图片压缩，scss转css）
    • 之后可以让grunt/glup来执行依次这些任务，让整个流程自动化
    • 所以grunt/glup也被称为前端自动化任务管理工具
  • 看一个gulp例子
    • task将src下的js文件转化为ES5语法
    • 并输入到dist文件夹中
const gulp = require('gulp')
    const babel = require('gulp-babel')
    gulp.task('js'()=>
      gulp.src('src/*.js')
        .pipe(babel({
          presets:['es2015']
        }))
        .pipe(gulp.dest('dist'))
    );
  • 什么时候使用grunt/gulp呢？
    • 如果工程依赖简单，甚至没有模块化
    • 只需要进行简单的合并/压缩
    • 如果模块复杂，相互依赖性强，我们需要使用webpack
  • grunt/glup和webpack区别
    • grunt/glup更加强调的是前端自动化流程，模块化不是其核心
    • webpack加强模块化开发管理，而文件压缩/合并/预处理等功能，是附带功能

webpack就是前端模块化打包工具

15.1.2 webpack的安装

  1. webpack依赖node环境。
  2. node环境依赖众多包，所以需要npm，npm（node packages manager）node包管理工具
  3. nvm是node管理工具可以自由切换node环境版本

全局安装webpack

npm install webpack -g
//指定版本安装
npm install webpack@3.6.0 -g

由于vue-cli2基于webpack3.6.0
如果要用vue-cli2的可以使用npm install webpack@3.6.0 -g

局部安装

npm install webpack --save-dev

  • 在终端执行webpack命令，使用的是全局安装。

  • 当在package.json中定义了scripts时，其中包括了webpack命令，那么使用的是局部webpack

15.1.3 起步

新建一个文件夹，新建如下结构的目录：

目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jcq1zAYs-1612964660685)(C:\Users\86136\Desktop\repository\notes\13-Vue\images\15-2.png)]

如图所示在src文件夹（源码文件夹），dist（要发布的文件，已经处理过的）。

1.新建入口js文件main.js和mathUtils.js，main.js依赖mathUtils.js。

mathUtils

//1.新建mathUtils.js，用CommonJs规范导出
function add(num1,num2) {
   
  return num1+num2
}
function mul(num1,num2) {
   
  return num1*num2
}
module.exports = {
   
  add,mul
}

main.js

//2.新建入口js文件main.js 导入mathUtil.js文件，并调用
最低0.47元/天 解锁文章
平平无奇lsr
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
个人学习笔记-非原创-vue相关
weixin_43544065的博客
08-08 282
VUE相关 VUE——基于vue-admin-template的二次开发学习记录 #引言 本笔记依据b站视频：https://www.bilibili.com/video/BV1EE411B7SU?p=12 #安装vue/cli以使用vue ui 在cmd使用以下命令安装vue/cli包： npm install -g @vue/cli 如果之前安装过但是想要卸载可以使用以下命令进行卸载(此步骤依照个人情况忽略)： npm uninstall vue-cli -g 安装完成后使用命令启动vue ui：
Vue实现左边导航栏，右边显示对应内容
Otto的学习笔记
05-03 1万+
使用嵌套路由实现 这里重点要注意使用<router-view></router-view> ，路由出口, 路由匹配到的组件将渲染在这里 导航栏代码userInfo.vue： <template> <el-row type="flex" justify="center" :gutter="8"> <el-col v-if="user" :span="20"> <el-col :span="4">
vue 实现左边导航栏且右边显示具体内容
☆夏の独憶☆
01-21 4880
vue 实现左边导航栏且右边显示具体内容 1.在el-menu-item里面写红框里面的内容 2.在methods里面写跳转 3.在router文件下面的index.js写入路由 4.在home.vue下面引入router-view路由占位符
vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）
cheng9436的博客
11-26 1万+
vue点击击左边的导航栏，实现右边的内容发生改变；左边导航栏，实现右边路由跳转
vueSourceCodeLearn:vue原始码学习-vue source code
03-24
学习Vue 介绍 在染陌（Email： ）的...本项目希望对Vue.js做更进一步的探索与学习，Vue.js基础内容请参考Vue.js官网， //cn.vuejs.org/v2/guide/。 ，欢迎提问题指出，共同学习，共同进步。 目录 原始码相关 随笔杂谈
blog源码java-blog:CentOS服务器配置，NodeJs项目配置，开发随笔，react源码解读,vue源码解读，架构分析，性能优化
05-19
通过分析源码，我们可以深入了解其背后的技术栈和实现原理，同时，它涵盖了CentOS服务器配置、Node.js项目配置以及前端框架如React和Vue的源码解读，这为我们提供了一个全面学习和实践的机会。 首先，让我们深入...
dahong：个人技术随笔
02-03
在这个随笔中，Dahong可能探讨了JavaScript的基础语法、函数、面向对象编程、闭包、原型链、异步编程（Promise、async/await）等主题，并分享了实际项目中的应用案例。 【CSS】是层叠样式表，用于描述HTML或XML...
Own-learning-note:自己学习前端所阅读的书籍及笔记，框架原始资料，知识点思维导图，项目开发过程整理，随笔等
03-10
而项目开发过程的整理则能让你了解实际开发流程，学习如何从需求分析到代码实现，再到测试和部署。 总之，JavaScript是前端开发的基石，理解并掌握其核心概念和库框架，对于成为一名优秀的前端开发者至关重要。通过...
左侧菜单栏控制右侧页面内容切换
01-18
本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
vue.js实现左边导航切换右边内容
10-16
主要为大家详细介绍了vue.js实现左边导航切换右边内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
web随笔代码
05-21
【标题】：“Web随笔代码”通常指的是与Web开发相关的代码片段、实验项目或教学示例，这些内容可能涵盖HTML、CSS、JavaScript等基础技术，也可能涉及到更高级的框架如React、Vue或Angular，以及后端开发技术如PHP、...
前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮
chenchuang0128的博客
06-23 2508
前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?-- menuArr:导航菜单栏 @leftClick: 左导航按钮事件点击 @rigClick: 右导航按钮事件点击-->-- menuArr:导航菜单栏 @leftClick: 左导航按钮事件点击 @rigClick: 右导航按钮事件点击-->"menu": "手机","menu": "升学",
Vue3点击侧边导航栏完成切换页面内组件（WEB）
热门推荐
li-xun的博客
10-23 1万+
Vue3点击侧边导航栏完成切换页面内组件（WEB）
左右菜单联动：轻松实现网页导航的高效与便捷！
最新发布
CRMEB小程序商城的博客
12-18 1422
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
Vue的安装
weixin_54812237的博客
07-05 614
一、安装Vue 1.安装node.js 2. 安装npm:npm install -g cnpm --registry=https://registry.npm.taobao.org 3. 使用cnpm安装vue:cnpm install vue -g 4. 安装vue命令行工具：cnpm install vue-cli -g 5. 安装vue-devtools调试工具： 6. 创建vue脚手架:vue init webpack myproject: vue init webpack myproject
vue+elemen ui实现左侧导航栏，右侧内容变化
qq_30815659的博客
12-17 5918
一、首先编写导航栏组件 我的页面是大项目中的一部分，项目之前已经安装了路由等。 首先在component中添加guide.vue文件。 选择element的一个组件，示例代码如下 <template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"&g...
快速创建vue+vite+ts项目
05-30
你可以使用以下命令来快速创建 Vue.js + Vite + TypeScript 项目： 1. 首先，你需要安装 Node.js 和 npm。 2. 打开命令行终端并创建一个新的项目文件夹： ``` mkdir my-project ``` 3. 进入项目文件夹并初始化 npm： ``` cd my-project npm init -y ``` 4. 安装 Vite： ``` npm install vite --save-dev ``` 5. 使用 Vite 创建一个新的 Vue.js + TypeScript 项目： ``` npx create-vite-app --template vue-ts my-project ``` 6. 进入项目文件夹并安装依赖： ``` cd my-project npm install ``` 7. 启动开发服务器： ``` npm run dev ``` 这样，你就可以开始在 Vue.js + Vite + TypeScript 项目中开发了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值