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. 深入了解JWT以及JWT的执行机制

    1.JWT以什么样的形式存在? eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9 ...

  2. red hat linux之Samba、DHCP、DNS、FTP、Web的安装与配置

    本教程是在red hat linux 6.0环境下简单测试!教程没有图片演示,需要具有一定Linux基础知识,很多地方的配置需要根据自己的情况修改,照打不一定可以配置成功.(其他不足后续修改添加) y ...

  3. 【BZOJ 1296】 [SCOI2009]粉刷匠

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] f[i][j][k]表示第i行前j列刷了k次,最大满意度 f[][j][k]=max{f[i][l][k],f[i][l][k-1] ...

  4. openSessionInView的使用原理及性能分析

    看到好多项目中用到了openSessionInView,这种做法无非是开发方便,能够在JSP页面中操作数据库层方面的业务. 下边说下openSessionInView的使用方法及性能问题. 使用: 1 ...

  5. Android学习路线（十二）Activity生命周期——启动一个Activity

    DEMO下载地址:http://download.csdn.net/detail/sweetvvck/7728735 不像其他的编程模式那样应用是通过main()函数启动的.Android系统通过调用 ...

  6. 使用client对象模型读取SharePoint列表数据

    使用client对象模型读取SharePoint列表数据 client对象模型提供了强有力的方式.从远程client应用程序管理列表. 1. 管理员身份打开VS,新建项目Windows窗口应用程序,命 ...

  7. Logical Operators (Transact-SQL)

    https://docs.microsoft.com/en-us/sql/t-sql/language-elements/logical-operators-transact-sql Logical ...

  8. Windows下VS2013+Caffe无GPU配置

    Windows版本的caffe工具包下载地址: 点击打开链接 1. 将下载的caffe-master.zip解压到 D:\Software\Caffe 文件夹下,把 D:\Software\Caffe ...

  9. zookeeper的理解与概述

    文章转自https://www.cnblogs.com/likehua/p/3999600.html  感谢博主 文章转自:http://www.aboutyun.com/thread-9266-1- ...

  10. Mvc前后端显示不同的404错误页

    最近做的系统前端是移动端的,后端是PC端,然后404页面不能用通一个,so  查找了一些资料,找到了一个解决办法 在Global.asax文件夹下添加Application_EndRequest事件处 ...