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. javascript位操作符右移>>>的妙用

    var len=arr.length>>>0; 在arr.length为null或undefined的时间,强制转换为0;

  2. SCN 时间戳的相互转换

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...

  3. &lt;九度 OJ&gt;题目1545：奇怪的连通图

    题目描写叙述: 已知一个无向带权图,求最小整数k.使仅使用权值小于等于k的边,节点1能够与节点n连通. 输入: 输入包括多组測试用例.每组測试用例的开头为一个整数n(1 <= n <= 1 ...

  4. Mongodb集群之副本集

    上篇咱们遗留了几个问题 1主节点是否能自己主动切换连接? 眼下须要手动切换 2主节点读写压力过大怎样解决 3从节点每一个上面的数据都是对数据库全量拷贝,从节点压力会不会过大 4数据压力达到机器支撑不了 ...

  5. [NOI2002] Robot 解题报告(数论+DP)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1408 Description 3030年,Macsy正在火星部署一批机器人. 第1秒,他 ...

  6. 6.CPU调度

    总论:所有的程序都是CPU和I/O等待交替执行 CPU调度器的操作时机 调用CPU调度器的时机,通常发生在 某一进程从执行状态转化为等待状态 某一进程从执行状态转化为就绪状态 某一进程从等待状态转为就 ...

  7. GPU开发笔记（一）

    首先我想到的是把安装好的CUDA下的programdata里面的demo都找一找,看看有没有自己需要的demo程序. 然后去CSDN或者pudn上去找找开源的代码. 至于GITHUB还没找过. 其次是 ...

  8. 关于servlet的@WebServlet注解

    @WebServlet注解用于标注在一个继承了HttpServlet类之上,属于类级别的注解. 1.jsp页面 通过action提交到RegistServlet 类: <form action= ...

  9. codeforces 540 B School Marks【贪心】

    题意:一共n个数,给出其中k个数,要求这n个数的中位数为y,这n个数的和不超过x,补全剩下的n-k个数 先统计给出的k个数里面比中位数小的数, 如果cnt<=n/2,说明中位数还没有出现,把这n ...

  10. caffe(11) 图像数据转换成db文件

    在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格式的,而且有可能图片的大小还不一致.而在caffe中经常使用的数据类型是lmdb或leveldb,因此就 ...