Vue学习(6)-插槽、模块化导入导出、webpack基础配置使用

一、插槽的基本使用

• 插槽的基本使用:

  <slot></slot>

• 插槽的默认值：例

  <slot><button>101</button></slot>

• 如果有多个值，同时放入到组件中进行替换时，一起作为替换元素。

<div id="app">
<cpn></cpn>
<cpn>
<div>是替换的值</div>
<button>200</button>
</cpn>
</div>

<template id="cpn">
<div>
<div>
我是子组件默认值
</div>
<slot>
<button>1111</button>
</slot>
</div>
</template>

具名插槽

可以有多个插槽，并且对专门的其中一个插槽进行修改时就需要用到具名插槽：

<div id="app">
<cpn>
<div slot="center">中中</div>
</cpn>
</div>

<template id="cpn">
<div>
<div>
我是子组件
</div>
<slot name="left">
<button>前</button>
</slot>
<slot name="center">
<button>中</button>
</slot>
<slot name="right">
<button>后</button>
</slot>
</div>
</template>

父组件模版的所有东西都会在父级作用域内编译；子组件模版的所有东西都会在子级作用域内编译。

插槽方面在新版本里使用v-slot，不过好像不经常用以后再补。。。

二、模块化的导入和导出

ES6

• 使用

  export

  指令导出模块对外提供的接口，再通过

  import

  命令来加载对应的模块

• 先在HTML中引入两个js文件，并且类型设置module

  <script src="main.js" type="module"></script>

想要导出时：

let flag = ture;

function sum(num1, num2){
return num1 + num2
}

export {
flag, sum
}

//或另一种
export let flag = ture;

export function sum(num1, num2){
return num1 + num2
}

导入时：

import {flag} from "导入信息原文件地址"

if(flag){
console.log('flag为ture')
}

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而是让导入者可以自己来命名，那么就可以使用

export default

:

export default function () {

}

import xxx from "./"
//不需要大括号

export default

在同一个模块中不允许存在多个。

Commonjs

• 导出

  module.exports = {
  flag: ture,
  test(a, b) {
  return a + b
  },
  demo(a, b) {
  return a * b
  }
  }

• 导入

  //CommonJs模块
  let {test, demo, flag} = require('moduleA');
  
  //等同于
  let _mA = require('moduleA');
  let test = _mA.test;
  let demo = _mA.demo;
  let flag = _mA.flag;

三、webpack

• 从本质上来说，webpack是一个现代的JavaScript应用的静态模块打包工具

• webpack依赖node环境，node环境通过npm（node packages manager）工具来管理各种包

  局部安装webpack

  –save-dev是开发时依赖，项目打包后不需要继续使用的

  cd 对应目录
  npm install webpack@3.6.0 --save-dev

• 使用时在终端中输入：

  webpack ./src/main.js ./dist/bundle.js

  通过这样对模块化开发的js文件进行打包使得网页再使用js时直接调用打出来的包就可以，不用一个一个的导入。

• 文件和文件夹的解析：

  dist文件夹：用于存放之后打包的文件
• src文件夹：用于存放源码 main.js：项目的入口文件。
• mathUtils.js：定义了一些数学工具函数，可以在其他地方引用使用。

index.html：浏览器打开展示的首页html

package.json：通过npm init生成的，npm包管理的文件。

webpack.config.js文件

为了每次使用webpack时不用写上入口和出口参数，就通过这个文件

const path = require('path')//引用path

module.exports = {
//入口：可以是字符串/数组/对象
entry:'./src/main.js',
//出口：通常是一个对象，里面至少包含两个重要的属性，path和filename
output: {
path: path.resolve(__dirname, 'dist'),//path通常绝对路径
filename: 'bundle.js'
}
}

这时直接在终端里输入

webpack

即可打包。

package.json文件

如何生成该文件：在终端输入

npm init

若是局部安装webpack的话就要到webpack路径下调用才行，不过可以通过package.json中定义启动。

{
"name": "meetwebpack",
...
"scripts": {
"build": "webpack"//在这里面定义脚本
},
...
}

这时只用在终端中输入

npm run build

，即可调用局部webpack。

若package.json文件中有需要依赖的东西就在终端中输入

npm install

来下载

loaders

可以用来解析各种文件给webpack方便打包，因为webpack无法识别全部文件。

• 例如需要一起打包css文件

  安装

  npm install css-loader --save-dev

  ，

  npm install style-loader --save-dev

• 在webpack.config.js中

  module.exports = {
  entry: '',
  output: {
  path: ,
  filename: '',
  },
  module: {
  rules: [
  {
  test: /\.css$/,
  //css-loader只负责将css文件进行加载
  //style-loader负责将钥匙添加到DOM中
  //使用多个loader时，是从右向左的
  use:['style-loader','css-loader']
  }
  ]
  }
  
  }

更多见：https://www.webpackjs.com/

使用vue的配置过程

在终端中输入

npm install vue --save

安装上vue

使用

import Vue from 'vue'

new Vue({
el: '#app',
data: {
name: 'code'
}
})

在打包时因为Vue不同版本的构建会报错，runtime-only和runtime-compiler的区别，因此要在webpack中的module.exports添加配置：

resolve: {
alias: { //别名
'vue$': 'vue/dist/vue.esm.js'
}
}

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1

• 点赞
• 收藏
• 分享
• 文章举报

Ming-hl 发布了7 篇原创文章 · 获赞 0 · 访问量 251 私信 关注