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

一、插槽的基本使用

• 插槽的基本使用:
• 插槽的默认值：例101
• 如果有多个值，同时放入到组件中进行替换时，一起作为替换元素。

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

<template id="cpn">
  <div>
    <div>
      我是子组件默认值
    div>
    <slot>
      <button>1111button>
    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 [email protected] --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