webpack、webpack 后续问题

框架 / Vue
Word count: 3.7k   |   Reading time≈ 16 min

# Vue 第六天学习

file-loader（解决 webpack 打包图片路径问题，字体路径问题）

webpack 中 babel 的配置（处理高级的 es6 语法或者 es7 语法）

Vue 中的 render 函数

在 webpack 构建的项目中，使用 Vue 进行开发

export default 和 export 的使用方式

结合 webpack 使用 vue-router

组件中 style 标签 lang 属性和 scoped 属性的介绍

抽离路由模块

一个人如果不想输，就要不断学好眼前的东西，它们将来都会大有用处…

# webpack 后续问题

# 问题：Webpack 打包图片路径问题

mark

mark

# 在页面中引入图片有两种方式

  • img 标签引入
  • css 引入

# 解决方案：Webpack 使用 file-loader 处理图片

# 安装：file-loader 包

  1. 运行 npm i url-loader file-loader -D 来安装 file-loader 包

mark

​

  1. 配置 webpack.config.js 文件

mark

  1. 运行 npm run dev

mark

# file-loader 参数

  • limit 给定的值，是图片的大小，单位是 byte，如果我们引用的 图片，大于 给定的值，则会被转为 base64 格式 的字符串，如果，图片 ** 小于或等于 ** 给定的 limit 值，则不会被转为 base64 的 字符串
    mark

    mark

    mark

  • name 属性 使图片路径 url 不变

mark

mark

# 处理字体文件 路径问题

使用 file-loader

问题描述：引入 bootstrap 字体图标库，但报错！

mark

解决方案：

  1. 配置 webpack.config.js
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//这是 处理 字体文件的 loader

mark

  1. 运行 npm run dev

# webpack 中 babel 的配置

babel 介绍

问题描述：

  1. webpack 中默认只能处理一部分 es6 语法，一些更高级的 es6 语法或者 es7 语法 webpack 处理不了，这时候就需要借助第三方 loader 帮助 webpack 处理这些语法
  2. class 是 es6 中提供的语法，是用来实现 es6 中面向对象编程的方式，class 和 static 与 Java 中类似

mark

解决方案：

  1. 通过 babel 可以将高级语法转化为低级语法
  2. 安装，运行两个命令，安装两套包，去安装 babel 相关的功能
  • 第一套包： npm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 第二套包： npm i babel-preset-env babel-preset-stage-0 -D
  1. 打开 webpack 配置文件，在 module 节点写的 rules 数组中添加一个新的匹配规则
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

mark

排除 node_module 目录的原因:

  • 如果排除 node_module，babel 会把 node_module 目录下的所有第三方 js 文件都打包编译，这会非常消耗 CPU，同时打包速度非常慢
  • babel 把 node_module 中的 js 文件转化完毕项目也无法正常运行
  1. 在项目的根目录中新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于 json 格式
{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

mark

报错：

mark

** 解决方案：** 执行 npm i babel-loader@7

mark

报错：

mark

啊啊啊啊～～崩溃！！

# 修改之后还是跑不起来 ---- 醉了！！

mark

mark

报错：

mark

# 升级总结（来自百度）

# -babel 升级 7.X 踩坑记录

  1. babel 包名改变，以前安装是 npm i babel-* 现在安装 babel 系列需要写成 npm i @babel/*
  2. .babelrc 文件写法改变， preset plugins 等全部写成 @babel/* 的形式
npm:
- babel-preset-env
+ @babel/preset-env
- babel-preset-react
+ @babel/preset-react
- babel-preset-stage-0

.babelrc:
- "presets": ["react", "env", "stage-0", "mobx"]
+ "presets": ["@babel/preset-react", "@babel/preset-env", "mobx"]

除了上述的 preset ，我还用了 babel-preset-mobx
但是没找到 @babel/preset-mobx ，从 babel-preset-mobx git 提交日志上看，作者已经支持了最新的 babel 。在之后的测试中，发现 mobx 的功能也能正常使用。
另外，stage-* 已弃用

# 使用 Vue 实例的 render 方法

Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

* 基本使用 **

<div id="app"></div>
<script>
  let login = {
    template: "<h1>login 组件</h1>",
  };

  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {},
    render(createElement) {
      return createElement(login);
    },
  });
</script>

mark

# 在 webpack 构建的项目中，使用 Vue 进行开发

  • 在普通网页中如何使用 Vue
    • 1. 使用 script 标签，引入 Vue 的包
    • 2. 在 index 页面中，创建 一个 id 为 app div 容器
    • 3. 通过 new Vue 得到一个 vm 的实例

# 重点：在 webpack 中 尝试 使用 Vue

  1. 直接导入 Vue 包：

mark

结果报错：

mark

mark

# - 回顾 ：包的 查找 规则

  1. 找 项目根目录中有没有 node_modules 的文件夹
  2. 在 node_modules 中，根据包名，找对应的 vue 文件夹
  3. 在 vue 文件夹中，找 一个叫 package.json 的包配置文件
  4. 在 package.json 文件中，查找 一个 main 属性【mian 属性指定了这个包在被加载的时候的入口文件】

解决方案 1：

mark

解决方案 2：

mark

解决方案 3（更优雅）：

mark

# 定义 文件形式 vue 组件 加载到页面上

例如：

mark

报错：

mark

原因：

  • 默认，webpack 无法打包 .vue 文件，需要安装 * 相关的 loader

解决方案：

  1. 安装：执行 npm i vue-loader vue-template-compiler -D 命令

  2. 配置 webpack.config.js 文件

{test:/\.vue$/,use:'vue-loader'} 	//处理 .vue后缀名的 loader

mark

结果：还是报错

mark

# 原因：Vue-loader 在 15.* 之后的版本都是 vue-loader 的使用都是需要伴生 VueLoaderPlugin 的.

解决：在 webpack.config.js 中加入

const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  devtool: "sourcemap",
  entry: "./js/entry.js",
  output: {
    filename: "bundle.js",
  },
  plugins: [new VueLoaderPlugin()],
  module: {},
};

mark

使用 render 函数 ：

markmark

# 总结梳理：

# 总结梳理： webpack 中如何使用 vue

  1. 安装 vue 的包： cnpm i vue -S

  2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader ，执行命令： cnpm i vue-loader vue-template-complier -D

  3. 在 main.js 中，导入 vue 模块 import Vue from ‘vue’

  4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style

  5. 使用 import login from ‘./login.vue’ 导入这个组件

  6. 创建 vm 的实例 var vm = new Vue ({el: ‘#app’, render: c => c (login) })

  7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

# export default 和 export 的使用方式

基本使用：

<template>
  <div>
    <h3>这是登录组件，vue 文件定义出来的--{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "哈哈哈",
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的show 方法！");
    },
  },
};
</script>

<style></style>

mark

# export，import ，export default 是什么？

ES6 模块主要有两个功能：export 和 import
export 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import 用于在一个模块中加载另一个含有 export 接口的模块。
也就是说使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块（文件）。这几个都是 ES6 的语法。

  • 注意：export default 向外暴露的成员，可以使用任意的变量来接受
  • 注意：在一个模块中，export default 只允许向外暴露一次
  • 注意：在一个模块中，可以同时使用 export 和 export default 向外暴露成员
在 Node中，使用 var 名称= require('模块标识符')

module.exports和 exports 来暴露成员

# export 与 export default

上面讲的是 export 和 import，但是 export 跟 export default 有什么区别呢？如下：

  1. export 与 export default 均可用于导出常量、函数、文件、模块等
  2. 你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块) 名的方式，将其导入，以便能够对其进行使用
  3. 在一个文件或模块中，export、import 可以有多个，export default 仅有一个，export default 只能导出一个默认模块，这个模块可以匿名（ 引入的时候可以给这个模块取任意名字，例如 “obj”，且不需要用大括号括起来。）

export ：

//demo1.js
export const str = "hello world";

export function f(a) {
  return a + 1;
}

对应的引入方式：

//demo2.js
import { str, f } from "demo1";

export default：

//demo1.js
export default {
  a: "hello",
  b: "world",
};

对应的引入方式：

//demo2.js
import obj from "demo1";
  1. 通过 export 方式导出，在导入时要加 { }，export default 则 不需要

这样来说其实很多时候 export 与 export default 可以实现同样的目的，只是用法有些区别。注意第四条，通过 export 方式导出，在导入时要加 { }，export default 则不需要。使用 export default 命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

例如：

var name="李四";
export { name }
//import { name } from "/.a.js"
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

# 说明与比较：new Vue () 和 export default {}？

在生成、导出、导入、使用 Vue 组件的时候，像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么，又有什么异同呢？

首先，Vue 是什么？ po 主的理解是 Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：

new Vue({
    el: '#app'
    ...
})

那么 export default {} 又是来干嘛的？

这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export ** ，在文件 B 中引入 import ** ，然后再生成一个 Vue 实例 new Vue (**) ，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

# 结合 webpack 使用 vue-router

  1. 安装 npm i vue-router -S

例：

目录结构：

mark

main.js：

//在 webpack 构建的项目中，使用Vue 进行开发
import Vue from "../node_modules/vue/dist/vue.js";
//1. 导入 vue-router 包
import VueRouter from "vue-router";

//2. 手动安装
Vue.use(VueRouter);

//导入app组件
import app from "./App.vue";
//导入 Account 组件
import account from "./main/Account.vue";
//导入 GoodsList 组件
import goodslist from "./main/GoodsList.vue";

//3. 创建路由对象
let router = new VueRouter({
  routes: [
    { path: "/account", component: account },
    { path: "/goodslist", component: goodslist },
  ],
});

let vm = new Vue({
  el: "#app",
  data: {
    msg: "12322",
  },
  render: (c) => c(app),
  router,
});
//注意：App 这个组件，是通过 VM 实例的 render 函数，渲染出来的，render 函数如果要渲染 组件渲染出来的组件，只能是 el ：'#app' 所指定的 元素中

//Account 和 GoodsList 组件，是通过 路由匹配监听到的，所以，这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去

App.vue:

<template>
  <div>
    <h1>这是app组件</h1>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script></script>
<style></style>

mark

# webpack - 路由嵌套

目录结构：

mark

main.js:

//在 webpack 构建的项目中，使用Vue 进行开发
import Vue from "../node_modules/vue/dist/vue.js";
//1. 导入 vue-router 包
import VueRouter from "vue-router";

//2. 手动安装
Vue.use(VueRouter);

//导入app组件
import app from "./App.vue";
//导入 Account 组件
import account from "./main/Account.vue";
//导入 GoodsList 组件
import goodslist from "./main/GoodsList.vue";

import login from "./son/login.vue";
import register from "./son/register.vue";

//3. 创建路由对象
let router = new VueRouter({
  routes: [
    {
      path: "/account",
      component: account,
      children: [
        { path: "login", component: login },
        { path: "register", component: register },
      ],
    },
    { path: "/goodslist", component: goodslist },
  ],
});

let vm = new Vue({
  el: "#app",
  data: {
    msg: "12322",
  },
  render: (c) => c(app),
  router,
});
//注意：App 这个组件，是通过 VM 实例的 render 函数，渲染出来的，render 函数如果要渲染 组件渲染出来的组件，只能是 el ：'#app' 所指定的 元素中

//Account 和 GoodsList 组件，是通过 路由匹配监听到的，所以，这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去

App.vue:

<template>
  <div>
    <h1>这是app组件</h1>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script></script>

<style></style>

Account:

<template>
  <div>
    <h1>这是Account组件</h1>

    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>

<script></script>

<style></style>

mark

# 组件中 style 标签 lang 属性和 scoped 属性的介绍

**scoped：** 在子组件中设置 style 属性，如果不加 scoped 属性，如果是单页面程序，样式就会作用到全局中去，加了 scoped 属性以后，表示限制了该样式作用域只在该组件中。

<template>
  <div>
    <h1>这是goods组件</h1>
  </div>
</template>

<script></script>

<style scoped>
div {
  color: red;
}
</style>

**lang 属性：** 普通的 style 标签只支持普通的样式，如果想启用 scss 或 less, 需要为 style 设置 lang 属性

<template>
  <div>
    <h1>这是account组件</h1>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
body {
  div {
    font-style: italic;
  }
}
</style>

# 抽离路由模块

目录结构：

mark

main.js:

//在 webpack 构建的项目中，使用Vue 进行开发
import Vue from "../node_modules/vue/dist/vue.js";
//1. 导入 vue-router 包
import VueRouter from "vue-router";

//2. 手动安装
Vue.use(VueRouter);

//导入app组件
import app from "./App.vue";
//导入 自定义路由模块
import router from "./router.js";

let vm = new Vue({
  el: "#app",
  data: {
    msg: "12322",
  },
  render: (c) => c(app),
  router,
});
//注意：App 这个组件，是通过 VM 实例的 render 函数，渲染出来的，render 函数如果要渲染 组件渲染出来的组件，只能是 el ：'#app' 所指定的 元素中

//Account 和 GoodsList 组件，是通过 路由匹配监听到的，所以，这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去

router.js:

import VueRouter from "vue-router";

//导入 Account 组件
import account from "./main/Account.vue";
//导入 GoodsList 组件
import goodslist from "./main/GoodsList.vue";

import login from "./son/login.vue";
import register from "./son/register.vue";
//3. 创建路由对象
let router = new VueRouter({
  routes: [
    {
      path: "/account",
      component: account,
      children: [
        { path: "login", component: login },
        { path: "register", component: register },
      ],
    },
    { path: "/goodslist", component: goodslist },
  ],
});

export default router;
Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2015-2021 zhou chen
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信