vue-loader:

    其他loader ->  css-loader、url-loader、html-loader.....

    后台: nodeJs（模块化）    ->  require  exports

    broserify  最早提出，模块加载，只能加载js

    webpack   模块加载器， 一切东西都是模块, 最后打包到一块了

    require('style.css');    ->   css-loader、style-loader

    vue-loader基于webpack

.css、.js、.html、.php、.....

a.vue需要webpack编译成浏览器可以看懂的。

    .vue文件:

        放置的是vue组件模块代码

        <template>

            html

        </template>

        <style>

            css

        </style>

        <script>

            js    （平时代码、ES6浏览器兼容性不好）    babel-loader编译成es5代码

        </script>

-------------------------------------

简单的目录结构:

    |-index.html

    |-main.js        入口文件

    |-App.vue        vue文件，官方推荐命名法第一个字母大写

    |-package.json        工程文件(项目依赖、名称、配置)

        npm init --yes 生成

    |-webpack.config.js        webpack配置文件

ES6: 模块化开发

    导出模块：

        export default {}

    引入模块:

        import 模块名 from 地址

--------------------------------------------

webpak准备工作:

    cnpm install webpack --save-dev      //不带服务器版本

    cnpm install webpack-dev-server --save-dev      //带服务器版本

    App.vue    -> 变成正常代码        vue-loader@8.5.4

    cnpm install vue-loader@8.5.4 --save-dev

    cnpm install vue-html-loader --save-dev

    vue-html-loader、css-loader、vue-style-loader、

    vue-hot-reload-api@1.3.2（加载js的）

babel相关插件：

    babel-loader

    babel-core

    babel-plugin-transform-runtime

    babel-preset-es2015

    babel-runtime

最最核心：

下载 "vue": "^1.0.28"

webpack.config.js

module.exports={

    entry:'./main.js',  //入口文件

    output:{  //出口

        path:__dirname,

        filename:'build.js'//官方名称

    },

    module:{

        loaders:[

            {test:/\.vue$/, loader:'vue-loader'},// \.是转义，vue$以vue结尾的文件，用vue-loader编译，

            {test:/\.js$/, loader:'babel', exclude:/node_modules/}//编译js结尾的文件，使用abel-loader来编译，

        ]

    },

    babel:{

        presets:['es2015'],

        plugins:['transform-runtime']

    }

};

package.json

{

  "name": "vue-loader-demo",

  "version": "1.0.0",

  "description": "",

  "main": "main.js",

  "scripts": {

    "dev": "webpack-dev-server --inline --hot --port 8082"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.17.0",

    "babel-loader": "^6.2.5",

    "babel-plugin-transform-runtime": "^6.15.0",

    "babel-preset-es2015": "^6.16.0",

    "babel-runtime": "^6.11.6",

    "css-loader": "^0.25.0",

    "vue-hot-reload-api": "^1.3.2",

    "vue-html-loader": "^1.2.3",

    "vue-loader": "^8.5.4",

    "vue-style-loader": "^1.0.0"

  },

  "dependencies": {

    "vue": "^1.0.28"

  }

}

main.js

import Vue from 'vue'   //下载的 "vue": "^1.0.28"

import App from './App.vue'

new Vue({

    el:'body',

    components:{

        app:App

    }

});

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <app></app>  <!--组件-->

    <script src="build.js"></script>  <!--出口js文件-->

</body>

</html>

App.vue

<template>

    <h1>welcome Vue</h1>

    <h2 @click="change">{{msg}}</h2>

    <my-menu></my-menu>

</template>

<script>

    import Menu from './components/Menu.vue'

    export default{

        data(){

            return {

                msg:'welcome Vue ^_^'

            }

        },

        methods:{

            change(){

                this.msg='wahaha'

            }

        },

        components:{

            'my-menu':Menu

        }

    }

</script>

<style>

    body{

        background: #ccc

    }

</style>

Menu.vue

<template>

    <ul>

        <li>111</li>

        <li>111</li>

        <li>111</li>

    </ul>

</template>

<script>

</script>

vue23:vue-loader的更多相关文章

  1. Vue Loader

    介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...

  2. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  3. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  4. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  5. 配置webpack loader vue 报错：Module build failed: TypeError: this._init is not a function

    单文件组件 引入时报错 配置webpage.config.js中的vue 需要如下写法 { test: /\.vue/, loader: "vue-loader", } 之前写的l ...

  6. vue Module parse failed: Unexpected token You may need an appropriate loader to handle this file type

    1.错误截图: 2.错误原因:webpack 原生只支持 js 文件类型,及 es5 的语法 3.解决方法:在webpack.config.js中,增加以下配置 module: { rules: [ ...

  7. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  8. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  9. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  10. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

随机推荐

  1. java redistemplate

    //添加一个 key ValueOperations<String, Object> value = redisTemplate.opsForValue(); value.set(&quo ...

  2. tf.slice()解释

    转载:https://www.jianshu.com/p/71e6ef6c121b def slice(input_, begin, size, name=None): 其中“input_”是你输入的 ...

  3. autosar

    AUTOSAR – RTE(1)基本概念 1. RTE概述 The Run-Time Environment (RTE) is at the heart of the AUTOSAR ECU arch ...

  4. shell 整数

    []     (())和[[]] -eq    == 或= -ne   != -gt    > -ge   >= -lt    < -le   <= [root@web02 ~ ...

  5. Python: Json串反序列化为自定义类对象

    最近刚接触到python,就想到了如何反序列化json串.网上找了一下,大部分都是用json模块反序列化为python数据结构(字典和列表).如果对json模块不了解的参考菜鸟教程.然后我在此基础上将 ...

  6. WPF打字机效果

    public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); TypewriteTex ...

  7. Camera Calibration 相机标定：原理简介（四）

    4 基于3D标定物的标定方法 使用基于3D标定物进行相机标定,是一种传统且常见的相机标定法.3D标定物在不同应用场景下不尽相同,摄影测量学中,使用的3D标定物种类最为繁杂,如图-1的室内控制场,由多条 ...

  8. exadata(硬件更换文档部分)

    Maintaining Flash Disks Replacing a Flash Disk Due to Flash Disk Failure Each Exadata Storage Server ...

  9. POJ 1743 Musical Theme 后缀数组 不可重叠最长反复子串

    二分长度k 长度大于等于k的分成一组 每组sa最大的和最小的距离大于k 说明可行 #include <cstdio> #include <cstring> #include & ...

  10. vs2012碰到生成时报该错误：项目中不存在目标 “XXXXXX”

    vs2012碰到生成时报该错误:项目中不存在目标 "XXXXXX" 首先打开project文件,找到 以下信息: <Import Project="$(MSBuil ...