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. BZOJ 3129 [SDOI2013]方程 (拓展Lucas)

    题目大意:给定一个方程$X_{1}+X_{2}+X_{3}+X_{4}+...+X_{n}=M$,$\forall X_{i}<=A_{i} (i<=n1)$ $\forall X_{i} ...

  2. windows下安装redis以及测试 Window 下安装

    下载地址:https://github.com/dmajkic/redis/downloads. 下载到的Redis支持32bit和64bit.根据自己实际情况选择,将64bit的内容cp到自定义盘符 ...

  3. es-for-Laravel: Composer 包安装, Laravel 最简单的方式操作 Elasticsearch

    composer 安装:composer require ethansmart/es-for-laravel github 地址:https://github.com/roancsu/es-for-l ...

  4. bzoj1497【NOI2006】最大获利

    1497: [NOI2006]最大获利 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 3437  Solved: 1674 [id=1497" ...

  5. 【LeetCode OJ 34】Search for a Range

    题目链接:https://leetcode.com/problems/search-for-a-range/ 题目:Given a sorted array of integers, find the ...

  6. CodeForces 550B Preparing Olympiad(DFS回溯+暴力枚举)

    [题目链接]:click here~~ [题目大意] 一组题目的数目(n<=15),每一个题目有对应的难度,问你选择一定的题目(大于r个且小于l个)且选择后的题目里最小难度与最大难度差不小于x, ...

  7. 语法错误: unexpected ''); ?></span></span></h2> ' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';'

    语法错误: unexpected ''); ?></span></span></h2>' (T_CONSTANT_ENCAPSED_STRING), expe ...

  8. [JZOJ3382] [NOIP2013模拟] 七夕祭 解题报告

    Description 七夕节因牛郎织女的传说而被扣上了「情人节」的帽子.于是TYVJ今年举办了一次线下七夕祭.Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. ...

  9. The in operator

    The operators we have seen so far are all special characters like + and *, but there are a few opera ...

  10. Kali linux 2016.2（Rolling）中metasploit的搜集特定网站的目录结构

    不多说,直接上干货! parent directory site: testfire.net 至于这里怎么FQ,很简单,请见我下面的博客! kali 2.0安装 lantern(成功FQ) shado ...