vue-loader
　　1.)首先创建项目目录

　　　　--vue-loader文件夹
　　　　|-index.html 　　 入口文件
　　　　|-main.js 　　　　 入口文件
　　　　|-App.vue 　　　　 Vue文件
　　　　|-package.json 　　 工程文件
　　　　|-webpack.config.js webpack　　配置文件
　　2.)基于webpack模块化开发ES6
　　　　关于项目前准备工作
　　　　　　①、建一个文件夹，文件夹就是你的项目名称，然后把必须的问价加在其中
　　　　　　　　|-index.html
　　　　　　　　|-main.js
　　　　　　　　|-App.vue
　　　　　　　　|-package.json(生成方法，在问价夹中打开命令行工具，输入命令：npm init --yes)
　　　　　　　　|-webpack.config.js

　　　　　　②、在index.html中，在body中添加一个标签(组件)，例如：<App></App>(官方建议大写开头)。
　　　　　　③、配置webpack,
　　　　　　　　module.exports={
　　　　　　　　　　entry:'./main.js', 　　 //规定入口(官方推荐名字：main.js)
　　　　　　　　　　output：{
　　　　　　　　　　　　path:__dirname,　　 //得到当前的目录，是把当前路径变为绝对路径
　　　　　　　　　　　　filename:'bundle.js' 　　 //出口文件(官方推荐名字：bundle.js)
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　·在index.html中引入bundle.js
　　　　　　·webpack需要下载的模块 webpack 、webpack-dev-server

　　　　　　·修改package.json的scripts的参数为
　　　　　　　　"script":{
　　　　　　　　　　"dev":"webpack-dev-server --inline --hot"　　 //这个就是我们保存完修改的代码后，浏览器自动刷新热加载，如果端口被占用，可以在后面加 --port 8801(端口号自己定义)
　　　　　　　　　}

　　　　④、.vue文件由三部分组成
　　　　　　<template></tenplate> //放html代码
　　　　　　<script></scritp> //放js代码
　　　　　　<style></style> //放css代码
　　　　　　想要把这些代码转译成正常的html、css、js代码，需要配置下载一系列模块(--save-dev可以默认配置你的配置文件)
　　　　　　配置这些文件需要在webpack.config.js中添加一个
　　　　　　　　module：{
　　　　　　　　　　loaders：{
　　　　　　　　　　　　{test:/|.vue$/,loader:'vue'} //以.vue结尾的文件用vue-loader来转译
　　　　　　　　　　　}
　　　　　　　　}
　　　　　　vue-loader 、vue-style-loader 、vue-html-loader 、vue-hot-reload-api 、css-loader(这些是用来编译css，html，js代码的)
　　　　　　babel-core 、babel-loader 、babel-plugin-transform-runtime 、babel-preset-es2015 、babel-runtime (这些是必备的配置)
　　　　⑤、编辑入口文件main.js文件，import App from './App.vue'，默认进去打开App.vue

一、项目结构图

二、具体代码

　　index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

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

     <script src="build.js"></script>

 </body>

 </html>

　　main.js

 import Vue from 'vue'

 import App from './App.vue'

 new Vue({

     el:'body',

     components:{

         app:App

     }

 });

　　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",

     "webpack":"^1.13.3",

     "webpack-dev-server":"^1.16.2"

   },

   "dependencies": {

     "vue": "^1.0.28"

   }

 }

　　App.vue

<template>

    <h1>welcome Vue</h1>

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

    <my-menu></my-menu>

</template>

<script>

    import News from './components/News.vue'  //新组建的链接位置

    export default{

        data(){

            return {

                msg:'welcome to sunsanfeng home'

            }

        },

        methods:{

            change(){

                this.msg='是你改变了我'

            }

        },

        components:{

            'my-menu':News  //又定义了一个新的 组件

        }

    }

</script>

<style>

    body{

        background: #ccc

    }

</style>

　　webpack-config.js

 module.exports={

     entry:'./main.js',

     output:{

         path:__dirname,

         filename:'build.js'

     },

     module:{

         loaders:[

             {test:/\.vue$/, loader:'vue'}, //规定以.vue结尾的文件，用vue-loader来解析

             {test:/\.js$/, loader:'babel', exclude:/node_modules/} //以.js结尾的文件用vue-hot-reload-api解析，除了node_nodules文件夹里的文件

         ]

     },

     babel:{

         presets:['es2015'],

         plugins:['transform-runtime']

     }

 };

以上代码中的注释在项目中会报错，粘走时不要删掉注释，对于node_nodules里面的配置，我们直接npm install一下就可以了

demo下载地址：　　http://pan.baidu.com/s/1qYfm0VE

webpack vue 配置的更多相关文章

  1. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  2. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  3. vue 一些webpack的配置详解

    最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...

  4. vue中webpack的配置理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  5. 快速配置webpack+vue项目

    第一步:初始化项目 1.npm init 2. package name: (webpack+vue) webpackvue version: (1.0.0) description: this is ...

  6. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  7. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  8. webpack常用配置总结

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  9. Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

随机推荐

  1. TypeScript入门-高级类型

    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...

  2. 一个大数据平台省了20个IT人力——敦奴数据平台建设案例分享

    认识敦奴 敦奴集团创立于1987年,主营服装.酒店.地产,总部位于中国皮都-海宁.浙江敦奴联合实业股份有限公司(以下简称"敦奴")是一家集开发.设计.生产.销售于一体的大型专业服装 ...

  3. [笔记]我的Linux入门之路 - 04.Eclipse安装

    首先,要安装ecliose自然是先要有Java环境.在上一篇已经安装好了,不再赘述. 一.下载 Eclipse官网 下载下来的文件":eclipse-inst-linux64.tar.gz ...

  4. [刷题]算法竞赛入门经典(第2版) 5-4/UVa10763 - Foreign Exchange

    题意:有若干交换生.若干学校,有人希望从A校到B校,有的想从B到C.C到A等等等等.如果有人想从A到B也刚好有人想从B到A,那么可以交换(不允许一对多.多对一).看作后如果有人找不到人交换,那么整个交 ...

  5. myeclipse10.7安装git插件

    如果想把github上的一些开源项目导入到myeclipse中,一种方法是从github网站上将开源项目下载下来,另一种是使用myeclipse的egit插件直接从github网站上down下来,下面 ...

  6. 最新的chart 聊天功能（ webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7）

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. 不依赖浏览器控制台的JavaScript断点调试方法

    随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...

  8. flask-login ----系统权限设计部分小结

    tips: 事实证明.开发是一项苦力活.但是代码只有自己写的才是令人感到放心的.不过仅仅是从开发角度来说.从维护和安全角度来说,当然还是引入模块比较爽 但是引入的模块总会有一些问题.碰到的最大问题就是 ...

  9. Thread in Java

    References: [1]. http://www.javaworld.com/article/2074481/java-concurrency/java-101--understanding-j ...

  10. CCNP第一课：默认路由（路由黑洞，路由终结）

    一:功能实现 R1的环回口由R3控制下放,下放之后R4才可以ping通 代码: R1: 只需要一条静态路由,能回包就行了 ip route 20.1.1.0 255.255.255.0 10.1.1. ...