Vue学习笔记三

1、作用域插槽的使用——父组件访问子组件的数组

2、ES模块化的导入和导出

3、commonjs模块的导入和导出

4、webpack中使用css文件的配置（在webpack.config.js文件中配置）

5、 webpack中使用less文件的配置(和css文件类似)

6、ES6转ES5的babel（下载babel-loader，配置参考官网）

 

 

 

 

 

 

 

1、作用域插槽的使用——父组件访问子组件的数组

<div id="app">
        <cpn></cpn>
        <cpn>
            <template slot-scope="slot">
                <!-- 获取子组件中的数组 -->
                <span>{{slot.data.join('--')}}</span>
            </template>
        </cpn>
    </div>


    <template id="tem">
        <slot :data='books'>
            <ul>
                <li v-for='item in books'>{{item}}</li>
            </ul>
        </slot>
    </template>


    <script>
        const app = new Vue({
            el: '#app',
            methods: {

            },
            components: {
                cpn: {
                    template: '#tem',
                    data() {
                        return {
                            books: ['java', 'C#', 'C', 'Python'],
                        }
                    },
                }
            }
        })
    </script>

2、ES模块化的导入和导出

//导出方法一
let flag=false
function sum(a,b){
    return a+b
}

export {flag,sum}

//导出方法二
export let flag=false
export function sum(a,b){
    return a+b
}


//导入模块

import {flag,sum} from 'js文件路径'

 3、commonjs模块的导入和导出

function add(a,b){
    return a+b;
}
function plus(a,b)
{
    return a-b;
}
module.exports={
    add,plus
}


const {add,plus}=require('./Example')

1）首先在根目录创建webpack.config.js文件

2）配置webpack.config.js

3）在控制台输入npm init命令生成package.json文件，配置package.json文件 

4）为package.json建立依赖（右键package.json，建立依赖)

const path=require('path')

module.exports={
    entry:'./src/main.js',
    output:{
        //动态的获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'packed.js'
    }
}

 4、webpack中使用css文件的配置（在webpack.config.js文件中配置）

1）首先下载style-loader，css-loader

2）在webpack.config.js文件中配置

具体见webpack官网  

注：如果报错：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

原因是loader版本过高，参考：https://blog.csdn.net/qq_43377853/article/details/108485499

const path=require('path')

module.exports={
    entry:'./src/main.js',
    output:{
        //动态的获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'packed.js'
    },
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
      
    }
}

5、 webpack中使用less文件的配置(和css文件类似)

webpack图片文件的处理（下载url-loader，file-loader，配置参考官网）

const path=require('path')

module.exports={
    entry:'./src/main.js',
    output:{
        //动态的获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'packed.js',
        publicPath:'dist/',//涉及到URL可以用到
    },
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 102400,
                    name:'img/[name].[hash:8].[ext]'
                  },
                  
                }
              ]
            },
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name:'img/[name].[hash:8].[ext]',
                  }
                }
              ]
            },
      
      
          ]
      
    }
}

6、ES6转ES5的babel（下载babel-loader，配置参考官网）

webpack使用Vue的配置

1）首先安装Vue（使用命令npm install vue --save）

2）在webpack.config.js中配置Vue文件

3）使用（import Vue from 'vue'）

 

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    //动态的获取路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'packed.js',
    publicPath: 'dist/',//涉及到URL可以用到
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 102400,
              name: 'img/[name].[hash:8].[ext]'
            },

          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]',
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  //配置Vue文件
  resolve: {
    //别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'//指定Vue文件
    }
  }
}