美文网首页
webpack+vue学习笔记

webpack+vue学习笔记

作者: truman12 | 来源:发表于2020-07-03 17:17 被阅读0次

路径中引用中的@符号是什么意思?

在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号
import one from '@/views/one.vue'
那这里的@符号到底表示什么意思呢?
这其实利用了webpack的 resolve.alias 特性,webpabk.config.js 的配置代码如下,在webpack打包时,会把路径引用中的@符号,转换为相对应的路径。

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, '..', dir);
}
 
module.exports = {
    resolve: {
        extensions: ['*', '.js', '.vue'],
        alias:{
            'vue$': 'vue/dist/vue.common.js',
            '@': resolve('src')  // 通过这里的配置,@符号等同于src
        }
    }
}

module.exports与exports,export与export default之间的关系和区别

注意,这是 CommonJS模块规范ES6模块规范 的两种不同的概念。

- CommonJS模块规范

  • Node应用由模块组成,采用CommonJS模块规范。
  • CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的> - exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性
  • require方法用于加载模块。
  • 指令有:exports 、module.exports
    用法:
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

关于exports 与 module.exports

为了方便,Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。
var exports = module.exports;
于是我们可以直接在 exports 对象上添加方法,表示对外输出的接口,如同在module.exports上添加一样。

exports:首先对于本身来讲是一个变量(对象),它不是module的引用,它是{}的引用,它指向module.exports的{}模块
module.exports:首先,module是一个变量,指向一块内存,exports是module中的一个属性,存储在内存中,然后exports属性指向{}模块
exports只能使用.语法向外暴露内部变量 例 :exports.xxx=xxx
module.exports既可以通过点语法,也可以直接赋值一个对象,例:
module.exports.xxx=xxx
module.exports=xxx

- ES6模块规范

  • 不同于CommonJS,ES6使用 export 和 import 来导出、导入模块。
  • 需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
  • 指令有:export 、export default
    用法有:
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// export-default.js
export default function () {
  console.log('foo');
}

参考:

  1. https://www.cnblogs.com/fayin/p/6831071.html
  2. https://blog.csdn.net/namechenfl/java/article/details/81026813

相关文章

  • webpack+vue学习笔记

    路径中引用中的@符号是什么意思? 在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号import...

  • webpack+vue

    webpack+vue创建简单项目 https://blog.csdn.net/winnergod/article...

  • vue学习:webpack+vue(组件学习)

    这篇文章主要简单的讲一下vue组件: -1- vue 组件分为全局组件和局部组件,我们先来说一下全局组件: 这里我...

  • vue学习:webpack+vue(路由)

    自己做了一个vue前端项目 因为工作中没有h5项目,慢慢的离h5越来越远,所以狠下心来做一个h5项目,就仿照简书h...

  • vue学习:webpack+vue(一)

    初学习vue ——生产环境搭建 之前用angular+webpack搭建了一个前端项目,但是感觉angular有点...

  • vue-loader简介

    在最初使用webpack+vue时,看到vue里面各种语法,包括import,export,html和css的写作...

  • webpack+vue

    安装node 根据不同的系统安装node环境 全局安装webpack和vue-cli npm install we...

  • 还是觉得webstorm用着舒服

    最近试着用webpack+vue做小项目,发现webstorm版本老(2016),对vue文件支持不好,在vue文...

  • webpack

    从 0 到 1 搭建 webpack2+vue2 自定义模板详细教程 最详细的 webpack+vue 构建指南。...

  • webpack+vue页面构建简介

    利用webpack+vue页面构建说明简介 使用平台: win7(其他平台请自行查找相关参考资料) 安装服务:安装...

网友评论

      本文标题:webpack+vue学习笔记

      本文链接:https://www.haomeiwen.com/subject/uevsqktx.html