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