ES6模块化

  1. 安装babel

    yarn add @babel/core @babel/cli @babel/preset-env @babel/node
  2. 安装@babel/polyfill依赖包

    yarn add @babel/polyfill
  3. 根目录创建文件babel.config.js

    const presets = [
      [
        "@babel/env",
        {
          targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          },
        },
      ],
    ];
    
    module.exports = { presets };
  4. 运行命令

    npx babel-node file

导入模块

import $ from "jquery"

按需导入与导出

import { name } from 'file.js'

大括号内的名称需要与导出文件导出的名称一致。

直接执行导入的文件

import 'file.js'

WebPack基本使用

  1. 安装webpack包

    yarn add webpack webpack-cli -D
  2. 创建webpack的配置文件并配置文件

    module.exports = {
      // 编译模式
      mode: "development",
    };
  3. 在package新增脚本

    {
      "scripts":{
        "dev":"webpack"
      }
    }
  4. 运行

    yarn run dev

webpack打包的入口和出口

4.x版本中默认约定入口文件为src/index.js,出口文件为/dist/main.js

module.exports = {
    // 入口文件
    entry: path.join(__dirname, "./src/index.js"),
    // 输出文件
    output: {
        path: path.join(__dirname, "./dist"), // 输出文件存放路径
        filename: "bundle.js", // 输出文件的名称
    },
};

配置自动打包

  1. 安装插件

    yarn add webpack-dev-server -D
  2. 修改package.json中的命令

    "scripts":{
        "dev":"webpack-dev-server"
    },
  3. 运行命令

    yarn run dev

image-20201102195016307

这个插件会启动一个服务器,打包生成文件放到了根目录,所以需要将引入的js路径修改为/bundle.js

此插件可能存兼容问题导致无法使用

配置预览页面

  1. 安装插件

    yarn add html-webpack-plugin -D
  2. 配置插件

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const htmlPlugin = new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    });
    module.exports = {
      plugins: [htmlPlugin],
    };
    

此时打开http://localhost:8080/页面即可看到效果

image-20201102195702766

自动打包相关配置

在运行webpack-dev-server时可以添加参数:

  • --open

    打包完成后自动打开浏览器页面

  • --host

    配置IP地址

  • --port

    配置端口号

所以在package.json中就可以修改为如下内容:

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

加载器-loader

简单来说就是将一切浏览器不支持的语言,处理成浏览器可以支持的。

Loader 的工作方式 是从右向左执行,链式地按照顺序进行编译。 loader 链中的第一个返回值给下一个 loader,在最后一个 loader,返回所预期的结果。

loader 可以是同步或异步函数,也可使用 options 对象去接受配置参数。

image-20201102200510596

处理css文件

  1. 安装插件

    yarn add style-loader css-loader -D
  2. 编写规则

    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    • test

      为正则匹配,用于匹配文件名

    • use

      表示使用的loader

打包less文件

  1. 安装插件

    yarn add less-loader less -D
  2. 配置插件

    module: {
        rules: [
            {
                test: /\.less/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
        ],
    },

打包scss文件

  1. 安装插件

    yarn add sass-loader node-sass -D
  2. 配置插件

    module: {
        rules: [
            {
                test: /\.scss/,
                use: ["style-loader", "css-loader", "scss-loader"],
            },
        ],
    },

自动添加兼容性前缀

  1. 安装插件

    yarn add postcss-loader autoprefixer -D
  2. 创建postcss.config.js文件,并初始化

    const autoprefixer = require("autoprefixer");
    
    module.exports = {
      plugins: [autoprefixer],
    };
  3. webpack.config.js中,修改css的loader,新增一个postcss-loader

    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader", "postcss-loader"],
            },
        ],
    },

打包图片和字体

  1. 安装插件

    yarn add url-loader file-loader -D
  2. 配置插件

    module: {
        rules: [
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: "url-loader?limit=16940",
            },
        ],
    },

    ?表示参数,当图片小于16940时会自动转换成base64。

babel转换

  1. 安装插件

    安装转换器相关的包

    yarn add babel-loader @babel/core @babel/runtime -D

    安装插件相关的包

    yarn add @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  2. 创建babel.config.js配置文件,并初始化

    module.exports = {
      presets: ["@babel/preset-env"],
      plugins: [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
      ],
    };
  3. 配置webpack.config.js

    module: {
        rules: [
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/, // 不需要处理这个目录下的文件
            },
        ],
    },

打包VUE单文件

  1. 安装插件

    yarn add vue-loader vue-template-compiler -D
  2. 配置webpack.config.js文件

    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: "vue-loader",
            },
        ],
    },
    plugins: [new VueLoaderPlugin()]

VUE单文件组件

每一个vue单文件都是以后缀名为.vue命名的。vue单文件组件中包含三部分区域

  • template

    组件的模板区域

  • script

    业务逻辑区域

  • style

    样式区域

<template>
<div>
    <h1>这是App根组件</h1>
</div>
</template>

<script>
    export default {
        data() {
            return {}

        }
    }
</script>

<style scoped>
    h1 {
        color: red
    }
</style>>

在webpack项目中使用vue

  1. 安装插件

    yarn add vue -S
  2. 在入口文件中导入包

    import Vue from 'vue'
  3. 创建vue实例对象并通过render函数渲染App根组件

    import App from "./components/App.vue";
    import Vue from "vue";
    const vm = new Vue({
      el: "#app",
      render: (h) => h(App),
    });

打包与发布

  1. package.json中新增一个指令

    "scripts": {
        "build": "webpack -p"
    },
  2. 运行yarn run build命令

    运行此命令后webpack就会读取配置文件,并按照配置文件进行打包

VUE脚手架

  1. 全局安装脚手架

    npm install -g @vue/cli
  2. 查看版本

    vue --version

    image-20201103112331254

利用脚手架创建项目

新版-基于交互式命令创建

vue create my-project

项目名称不能包含特殊字符以及中文

image-20201103112711592

image-20201103112758887

image-20201103112850093

image-20201103112940954

image-20201103113034592

进入项目目录,运行对应的命令即可启动项目。

image-20201103113717626

新版-基于图形化页面创建

vue ui

在面板上按照需求创建即可。

image-20201103114437431

旧版-基于2.x的旧模板创建

npm install -g @vue/cli-init
vue init webpack my-project

找到提示进行安装即可。

image-20201103114737547

脚手架的自定义配置

第一种方式

编辑package.json文件,新增vue的配置。

"vue":{
    "devServer":{
      "port":8888,
      "open":true
    }
  }

第二种方式

创建有个vue.config.js文件,并写入相关配置

module.exports = {
  devServer: {
    open: true,
    port: 8878
  }
};

image-20201103120028176

Element-UI

官方地址:https://element.eleme.cn/#/zh-CN

基本使用

  1. 安装依赖包

    yarn add element-ui -S
  2. 导入相关资源

    // 手动配置Element-ui
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
    
    Vue.use(ElementUI);

如果编辑器设置了自动保存格式化,并且import引入资源被格式化为双引号出现如下报错:

image-20201103122513407

可以尝试将编辑器的自动格式化使用ESLint

image-20201103142744464