一 vue-loader

我们先不管脚手架,只说vue-loader,简单讲就是可将.vue文件打包,实现组件化开发,即一个.vue文件就是一个组件,开发中只需要引入这个.vue组件就可以了!

然后.vue文件的特性:

,

即一个.vue中包含了模板,js,css三个模块来描述这个组件!

二 新建webpack项目(超级多坑,一一来说)

首先新建demo目录,初始化 npm init --yes,然后安装webpack和webpack-dev-server,因为我这里没有指定版本,所以直接安装了最新的4.5.0版本,导致有许多配置的坑!,然后建立项目结构,如下图:

,

然后安装一些必要的组件:

vue-loader@14.2.2  ,这个我在实践中先安装的8.5.4,然后一直报错无法读取'vue',文件错误显示是vue-loader/lib下面的js,根据经验肯定是版本不对导致了,

这个时候两种解决办法:

一 要么修改webpack的版本,

二 要么修改vue-loader的版本

这里我采用修改vue-loader的版本,亲测如果是webpack@4.5.0,vue-loader@14.2.2.其他版本基本全部报错,真是坑!

然后就是其他的laoder:

,然后还有一点,如果是想用import的话还要安装babel:

,

最后--save安装vue,注意前面的最好都要--save-dev安装,然后再安装html-webpack-plugin插件便于html打包

三 webpack配置

配置如下:

const path=require('path')

const htmlPlugin=require('html-webpack-plugin')

module.exports={

    entry:{

        entry:'./src/index.js' //入口文件

    },

    output:{

        path:path.resolve(__dirname,'dist'),//dist的绝对路径,node的语法

        filename:'./js/[name].js',   //打包后的js文件名

    },

    resolve: {

        extensions: [ '.js', '.vue'],  //同时打包.vue文件

        alias:{

            'vue$':'vue/dist/vue.js'    //启用别名,这样可以直接引用 'vue'

        }

    },

    module:{

        rules:[

            //配置vue-loader,以,vue结尾的文件都使用vue-loader打包

            {

                test:/\.vue$/,

                use:{

                    loader:'vue-loader'

                }

            },

            //配置babel,所有.js文件使用babel转换

            {

                test:/\.js$/,

                use:{

                    loader:'babel-loader',

                    options:{

                        presets:[

                            "es2015"  //解析es6

                        ]

                    }

                },

                //排除插件安装目录

                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//

            }

        ]

    },

    //html打包插件

    plugins:[

        new htmlPlugin({

            hash:true,

            template:'./src/index.html'

        })

    ],

    devServer:{

        //监听服务的路径,3.6以上版本自动热更新

        contentBase:path.resolve(__dirname,'dist'),

        host:'localhost',

        compress:true,

        port:8082

    }

}

配置完成之后,新建.vue组件文件,然后简单写个例子:

这里有个坑:

,

不能直接写123,template标签里面必须写一个元素标签包裹,否则会报错

新建之后再引入,index.js入口文件如下:

import Vue from 'vue'

import App from './App.vue'   //引入,vue组件

new Vue({

    el:'#vue',

    data:{

        msg:'haha'

    },

    components:{

        'app':App   //引入模块化的.vue文件的组件

    }

});

{

    alert(123);

}

这里还有另一个坑,引入vue的时候现在这个版本好像不能直接'vue',而是'vue/dist/vue.js',除非在配置文件中配置别名,我上面已经配置过了,所以这里可以直接使用别名

,然后新建html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>vue</title>

    </head>

    <body>

        <div id="vue">

                {{msg}}

            <app></app>

        </div>

    </body>

</html>

,最后打包进行观察结果,发现.vue已经能成功使用,如果我们还想要一个组件,可以继续新建.vue组件开发,一个组件就是一个模块!抛开脚手架不说,这种开发方式和思想值得细细品味,哈哈!这个简单例子就到这里,其他的css样式什么的可以自己去尝试!

另外说一点,webpack3.6以上的版本会自动支持热更新,不需要其他配置,4.0以上版本,打包和运行命令多了一个--mode选项,而且是必须写:

即现在package.json的命令里我是这样配置的:

"scripts": {
　　"server": "webpack-dev-server --mode development --open",
　　"build": "webpack --mode development"
},
npm run server 直接运行
npm run  build; 打包!
运行结果:

webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及版本问题中踩的一些大坑!!!的更多相关文章

  1. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  2. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  3. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  4. vue.js原生组件化开发（一）——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  5. vue.js原生组件化开发（二）——父子组件

    前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...

  6. vue（9）—— 组件化开发 - webpack（3）

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  7. webpack（8）vue组件化开发的演变过程

    前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...

  8. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  9. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

随机推荐

  1. python的N个小功能(找到要爬取的验证码链接，并大量下载验证码样本)

    # -*- coding: utf-8 -*- """ Created on Mon Mar 21 11:04:54 2017 @author: sl "&qu ...

  2. springmvc+mybatis 处理图片(一)：上传图片

    一直觉得上传图片文件之类的很难,所以最后才处理图片,发现也并没有那么难,开始正文. 思路:将前台上传的file存到MutipartFile类型字段中,再将MulipartFile转换为pojo类中的b ...

  3. [二十七]SpringBoot 之 Restful接口的跨域请求

    什么是跨域 简单的说即为浏览器限制访问A站点下的js代码对B站点下的url进行ajax请求.比如说,前端域名是www.abc.com,那么在当前环境中运行的js代码,出于安全考虑,访问www.xyz. ...

  4. winrar 授权破解过期解决

    RAR registration data Federal Agency for Education 1000000 PC usage license UID=b621cca9a84bc5deffbf ...

  5. 【BZOJ4205】卡牌配对

    Description 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值互质,且 ...

  6. com.android.support:appcompat-v7 版本号问题

    supportLibVersion 的头数字是和targetSdkVersion 版本一样的. ext { supportLibVersion = '22.2.1'} compile "co ...

  7. bzoj5210最大连通子块和

    题解: 考虑朴素的dp:$$f_{u} = max(\sum_{v} f_{v} + w_{u} , 0)  \ \ \ \ h_{u} = max( max_{v} \{ h_{v} \}  , h ...

  8. PHP 压缩图片质量

    $imageFileName = './test2.jpg';$uploadfile_resize = $imageFileName;$pic_width_max = 1000;$pic_height ...

  9. python之旅：面向对象的程序设计

    一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/moyand/p/8784210.html 二 什么是面向对象的程序设计及为什么要有它 面向过程的 ...

  10. Python之旅：数据类型、字符编码、文件处理

    一 引子 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 以下每个类型都是有详细介绍链接的 ...