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. ES6 学习3 函数

    1.函数默认参数 在ES5我们给函数定义参数默认值是怎么样? function action(num) { num = num || 200 //当传入num时,num为传入的值 //当没传入参数时, ...

  2. python购物车系统

    购物车系统模拟:product_list = [ ('java',100), ('python',200), ('键盘',500), ('电脑',4000), ('mac Book',7000),]S ...

  3. SpringBoot实战（二）Restful风格API接口

    在上一篇SpringBoot实战(一)HelloWorld的基础上,编写一个Restful风格的API接口: 1.根据MVC原则,创建一个简单的目录结构,包括controller和entity,分别创 ...

  4. HTTP——学习笔记(1)

    名词解释: 协议: HTTP:HyperText Transfer Protocol,超文本传输协议,属于应用层的协议 FTP:File Transfer Protocol,文件传输协议,相比于HTT ...

  5. Qt之表单布局（QFormLayout）

    简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:Q ...

  6. Qt之图形（绘制漂亮的圆弧）

    简述 综合前面对二维绘图的介绍,想必我们对一些基本绘图有了深入的了解,下面我们来实现一些漂亮的图形绘制. 简述 圆形 效果 源码 弧形 效果 源码 文本 效果 源码 旋转 效果 源码 圆形 经常地,我 ...

  7. ios xcode真机调试获取屏幕截屏

    非常多时候我们须要在调试的过程中把手机屏幕截图发给其它人看,在android开发中我们能够非常方便的截图保存.而xcode开发ios的时候发现这个需求却如此困难.网上大部分都是介绍的以下这个方案.可是 ...

  8. jsp布局中关于&lt;iframe&gt;标签的使用

    iframe 元素会创建包括另外一个文档的内联框架(即行内框架). 注意:在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素. & ...

  9. Java常用知识（长期更新）

    1.0转义符 \n:换行 ,\n的作用和print后面的ln相同,可酌情使用 \t:一个制表位(一系列空格) 例: public class Schedule{ public static void ...

  10. sass08 if while for each

    scss @function getzIndex($layer: default){ $zindexMap: (default: 1, modal: 1000, dropdown: 500, grid ...