身为使用 Vue 的开发者听到这样的消息当然感到相当开心，但同时也不禁感到好奇，CodePen 是如何做到不须透过 webpack 编译 vue 档案，就可以将 .vue 的 component 如实显示到网页中。
大家都知道，在网页开发的世界中，前端是没有秘密的。 打开了开发工具，才知道原来是透过 http-vue-loader 这个工具做到的。
http-vue-loader
这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 Build 的步骤。
用法很简单，首先在网页上载入 Vue 与 http-vue-loader，如下
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
接著，假设我们有一个 my-component.vue 的档案：
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
</script>
<style>
.hello {
background-color: #ffe;
</style>
那麽，我们就可以在 components 内透过 httpVueLoader 来载入我们的子元件：
<div id="my-app">
<my-component></my-component>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
</script>
当然，httpVueLoader 也提供了类似 Vue.component('my-component', { ... }) 的宣告方式:
httpVueLoaderRegister(Vue, 'my-component.vue');
new Vue({
components: [
'my-component'
或是將 httpVueLoader 當作 Plugin 來使用：
Vue.use(httpVueLoader);
new Vue({
components: {
'my-component': 'url:my-component.vue'
甚至是 Array 的形式也可以：
new Vue({
components: [
'url:my-component.vue'
:warning: Vue3支持： : :warning:
http-vue-loader
直接从html / js加载.vue文件。 没有node.js环境，没有构建步骤。
my-component.vue < template>
< div xss=removed>Hello {{who}}</ div>
</ template>
< script >
module . exports = {
data : function () {
return {
who : ' world '
</ script >
< style >
.hello {
background-color : #ffe ;
</ style >
index.html
<!doctype html >
< html lang =" en " >
< script src =" https://unpkg.com/vue " > </ scri
npm install markdown-to-vue-loader vue-loader webpack --save-dev
在您的webpack配置对象中，您需要将markdown-to-vue-loader添加到模块列表中，如下所示：
module: {
rules : [
test : / \. md $ / ,
use : [
'vue-loader' ,
loader : 'markdown-to-v
Vue单独的文件Webpack加载器
快速创建.vue单个文件组件，使您可以拥有清晰分离的组件文件，并仍然享受优势。
按文件名处理文件（而不是将所有文件加载到文件夹中）并动态创建.vue文件（而不是创建物理文件）
允许通过options.global ， options[FILE_TYPE]和options[TAG_NAME]添加自定义属性
允许按组件具有scoped样式
允许定义对其他文件扩展名/类型的支持
允许定义装载机的测试条件（例如.vue.等）
基于这些想法， 和 。
请参阅存储库。
npm i -D vue-separate-files-webpack-loader
yarn add -D vue-separate-files-webpack-loader
VueLoader v15及更高版本由于在版本15中引入了强制性插件用法，
在您的webpack.config.js
var VueBuilder = require ( 'vue-builder-webpack-plugin' ) ;
module . exports = {
// ...
plugins : [
new VueBuilder ( {
path : 'src'
每当您以正常或监视模式运行w
md-vue-loader
md-vue-loader是一个Webpack加载器，用于将Markdown文件作为Vue组件导入。
:person_raising_hand: 为什么？
:raising_hands: 从与Vue公司的任何版本兼容解耦（ / vue-template-compiler ）！
:woman::artist_palette: Vue代码渲染将Vue代码块渲染为嵌入式演示！
:gear: 可定制的将您的演示配置为语法突出显示或包装在任何组件中！
:rocket: 安装
npm i -D md-vue-loader
:vertical_traffic_light: 快速设置
添加到您的Webpack配置中：
module.exports = {
module: {
rules: [
+ {
+ test: /\.md.vue$/,
+ use: [
+ 'vue-loader',
本篇博客基于Vue2.x
官方文档：https://cn.vuejs.org/v2/guide/instance.html
最近和同学合作一个设备信息管理的小项目，而同学找的模板不是前后端分离的
因此只能学习一下在 html文件中如何使用Vue，并学习一些之前没有理清的概念。
1. Vue实例
在Vue的官方教程中，也是从在html中使用Vue起步的， 下面是一个简单的Hello World 例子。
<!DOCTYPE html>
http-vue-loader这套工具可提供开发者直接在网页环境中载入.VueFile，无需透过nodeJS环境编译，也不需要Build的步骤。在index的mounted中无法访问引入的组件但是在methods通过事件可以操作组件的数据。用法很简单，首先在网页上载入Vue与http-vue-loader，...
const Header = httpVueLoader('./Header.vue');
//全局注册
Vue.component('my-header', Header);
本文展示使用传统的前端开发方式使用vuejs，不使用webpack的如何使用vuejs开发前端工程。一方面可以对比两者的差异，一方面学习一种新的思路（或者是老路）。在做一个小型的前端工程时，可以考虑这种轻量化的方案。本示例使用了boostrap、jquery、vue、vue-router组件，创建了一个SPA单页示例。
先闲扯几句。最近vuejs 3.0 开始beta，相信不久（也不好说是多久）就...
安装并引入插件插件
既然是单页面使用,最简单快捷的就是直接script引用了,这里我就直接把文件放出来自取好了,今天百度网盘有点卡分享不出来,文件又比较长,就放文章最末尾吧
<script src="./lib/httpVueLoader.js" type="text/javascript"
我们将会选择使用一些vue周边的库vue-cli, vue-router,vue-resource,vuex
1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发PS：本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-ro...
