灵活使用vue单文件组件之--最少配置打包.vue组件

forrest23 发布于2019-08-02 16:00 / 1439人阅读

摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。

对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main.js开始打包项目中的依赖(通常main.js中引用App.vue，作为页面最高层级的组件，我们自己写的组件会在App.vue中引用)，build的结果会生成打包好的静态js/css文件以及index.html，这对于写单页应用来说非常方便，但是，变化的需求总是很多的~

如果我只想在html页面里用到我写的vue组件（同时个人也更加偏向使用html页面的写法），而不是构建一整个单页应用，在vue-cli里可以吗？？？当然可以做到，了解其中的配置，修改成自己想要的样子，我们可以做到只打包一个组件的效果。

但是，面对辣么多的配置文件，还是从0开始自己来吧，毕竟我只想打包一个.vue组件。在正式开始写示例代码之前，为了文章的完整性，先简单介绍一下几个工具。

webpack

webpack是干嘛的？他是一个模块打包器，他的目标就是将JavaScript文件都打包到一起，用于在浏览器中使用，即可以通过 现在正式开始

先建立一个文件夹：testproject;

命令行进入到testproject ,运行 npm init,根据命令行提示，进行项目的一些初始化操作;

完成之后，我们的项目中就会有package.json文件，打开package.json，配置打包需要的一些dependence，这里我就是从一个vue-cli项目的package.json文件中拷过来一些基本的依赖，如下：
其中dependencies里就是拷过来依赖的部分

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "css-loader": "^0.28.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "file-loader": "^1.1.4"
  }
}

运行 npm install,稍等片刻，我们需要的模块就ok了。
这里说明一下，npm包之间也存在依赖关系，如果存在有‘依赖的依赖’ 你没有写到配置的dependencies中，命令行会有提示，注意看。为什么说这个，因为我在拷贝依赖的时候，就略过了‘file-loader’，
so sad.^_^

现在可以写我们的示例内容了，这里我们设定我们要写的组件为hello.vue，组件打包后的名字叫hellobundle.js,我们在sayhello.html中要引用的组件就是打包后的hellobundle.js，直接在testproject目录下新建相关文件，内容如下：





  
  Title

很简单的内容，现在我们想要打包hello.vue这个组件，对于打包我们选择使用script命令+webpack.config.js的方式（这里不了解可以移至webpack官方指南，说明很详细），还是在根目录，新建webpack.config.js文件，内容如下：

//webpack.config.js
const path = require("path")
module.exports = {
  entry  : "./hello.vue",             //入口文件
  output : {
    filename : "hellobundle.js",     //出口文件名
    path     : path.resolve(__dirname),    //当前目录
    library  : "hello"       // 打包后模块的名称
  },
  module : {     
    rules : [    //定义不同类型的文件使用的loader
      {
        test   : /.vue$/,
        loader : "vue-loader"
      },
      {
        test   : /.js$/,
        loader : "babel-loader"
      }
    ]
  }
}

这里差不多是最简化的配置，hello.vue作为我们打包的入口文件，配置出口文件的名称、路径以及最终模块对外的名称，写好了这个，再在package.json中加上一条script命令，如下：

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"webpack"     //<-------就四这行，，
  },

写好了.vue组件文件、webpack的配置文件，现在我们运行npm run build, 结果如下：

在testproject目录下，我们也如愿得到了hello.vue打包后的hellobundle.js，整个testproject结果如下

终于，我们可以来验证这个打包后的hellobundle.js是否可用了，在浏览器打开sayhello.html:

ofcourse you can see yellow hello,,这里说一下我们的sayhello页面中，注册组件时用到的是：
components:{

  hello:hello.default    //这里我们后面会解释为什么这样写
}

其实在一开始的时候，我用的是webpack配置的hello变量，然后打开sayhello页面时并没有出现预期的效果，于是在控制台打印了一下我们hellobundle.js输出的hello变量：

so,就更正了一下hello的引用。

结语

本着最简原则，示例中的项目结构没有按照src/dist这样规范的目录结构来写，写到这一步之后，我们可以继续深入完善我们的打包功能，对webpack使用命令行参数动态打包文件、hot-reloading等，这样的话，就又复杂了，不再赘述。--end 欢迎指正^_^

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54503.html

灵活使用vue单文件组件之--最少配置打包.vue组件

摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...

izhuhaodev 2019-08-22 11:16 评论0 收藏0
灵活使用vue单文件组件之--最少配置打包.vue组件

摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...

Charles 2019-08-26 11:29 评论0 收藏0
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 评论0 收藏0
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

Backache 2019-08-22 18:29 评论0 收藏0
前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0