一、vue单文件组件

①文件扩展名为 .vue 的 就是single-file components(单文件组件)

②参考文档:单文件组件

二、webpack加载第三方包

①项目中,如果需要用到一些第三方包,比如vue.js,jQuery.js,bootstrap.js等等,如果使用一般的方法,直接import加载使用,然后打包成一个bubdle.js文件的话,因为第三方包的体积过大,最终会造成bundle.js的文件过大,所以一般不打包第三方包,而是通过script标签的方式把第三方资源引入到页面(单纯的引入是报错或者没有效果的),还需要通过以下配置,这里以jQuery为例

②下载第三方包,默认是安装在node_modules文件夹下

npm install jquery

③在index.html页面中引入资源(这里只是在测试阶段需要这样,实际项目上线的时候,src里的文件会在根目录里,node_modules通过安装生产环境依赖的目录也是在根目录里,或者可以使用配置虚拟内存,把之前webpack-dev-server的配置contentBase里的路径直接改为 ./ ,这样就会在根目录开启一个虚拟的内存运行打包后的index.html,所以最终这里还是得src="node_modules...."这样写)

    <!-- 注意:测试阶段这里的路径以最终打包目录dist下的index.htmtl位置为准 -->
<script src="../node_modules/jquery/dist/jquery.js"></script>

④配置webpack.config.js中的externals模块

    externals:{
// 这里配置的含义:当代码中import jquery的时候,不会把jquery打包到bundle中,而是使用指定的全局中的jQuery对象
// key是第三方包名称,value是全局中的jQuery($)对象
jquery:'jQuery'
},

⑤加载使用

⑥打包测试,打开dist里的index.html

npm run build

三、webpack打包vue单文件组件

①按照以上步骤,安装配置vue的第三方包

npm install vue
    devServer:{
// 配置webpack-dev-server的www目录,配置虚拟内存
contentBase:'./'
},
    <div id="app"></div>
<script src="node_modules/vue/dist/vue.min.js"></script>
  externals:{
// 加载第三方资源
vue:'Vue'
},

②安装vue依赖vue-loader和vue-template-compiler

npm install --sav-dev vue-loader vue-template-compiler

③配置(注意:vue-loader15版本以后需要配置VueLoadPlugin)

// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin') // 导出一个具有特殊属性配置的对象
module.exports = {
entry:['babel-polyfill','./src/main.js'],/* 入口文件模块路径 */
output:{
path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录,必须是一个绝对路径 */
filename:'bundle.js'/* 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录,配置虚拟内存
contentBase:'./'
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录,跟着bundle走
// 同时也会自动在index.html中注入script引用链接,并且引用的资源名称,也取决于打包的文件名称
new htmlWebpackPlugin({
template:'./index.html'
}),
new VueLoadPlugin()
],
externals:{
// 加载第三方资源
vue:'Vue'
},
module:{
rules:[
{
test:/.css$/,
use:[
//注意:这里的顺序很重要,不要乱了顺序
'style-loader',
'css-loader'
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
'file-loader'
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:'babel-loader',
options:{
presets:['env'], //转码规则
plugins:['transform-runtime']
}
}
},
{
test:/.vue$/,
use:[
'vue-loader'
]
}
]
}
}

④测试

⑤打包运行(webpack-dev-server --open)

npm run dev

四、组件热更新

①热更新或者又叫热重载,热替换,就是组件在不刷新页面的情况下被替换,可以参考vue文档webpack文档

②配置

// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack') // 导出一个具有特殊属性配置的对象
module.exports = {
entry:['babel-polyfill','./src/main.js'],/* 入口文件模块路径 */
output:{
path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录,必须是一个绝对路径 */
filename:'bundle.js'/* 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录,配置虚拟内存
contentBase:'./',
hot:true
},
mode:'development',
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录,跟着bundle走
// 同时也会自动在index.html中注入script引用链接,并且引用的资源名称,也取决于打包的文件名称
new htmlWebpackPlugin({
template:'./index.html'
}),
new VueLoadPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
externals:{
// 加载第三方资源
vue:'Vue'
},
module:{
rules:[
{
test:/.css$/,
use:[
//注意:这里的顺序很重要,不要乱了顺序
'style-loader',
'css-loader'
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
'file-loader'
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:'babel-loader',
options:{
presets:['env'], //转码规则
plugins:['transform-runtime']
}
}
},
{
test:/.vue$/,
use:[
'vue-loader'
]
}
]
}
}

③测试运行:当修改vue单文件组件时,可以不刷新问修改html页面

npm run dev

五、加载vue-router

①下载,默认位置在node_modules目录

npm install vue-router

②引用资源

    <div id="app"></div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>

③配置

    externals:{
// 加载第三方资源
'vue':'Vue',
'vue-router':'VueRouter'
},

④在router.js文件中加载使用

⑤在main.js中配置路由对象,在App.vue中设置路由进口和出口

⑥运行测试

npm run dev

webpack打包vue单文件组件的更多相关文章

  1. webpack构建vue单文件组件

    1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...

  2. webpack对vue单文件组件的解析

    vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...

  3. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  4. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  5. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  6. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  7. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  8. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  9. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

随机推荐

  1. IDEA忽略编译报错

    设置Intellij IDEA忽略部分类编译错误 File——Settings——Compiler——Java compiler修改:Use complier:将Javac改为Eclipse在Ecli ...

  2. 【转载】C#中ArrayList集合类使用RemoveAt方法移除指定索引的元素

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,任何数据类型的变量都可加入到同一个ArrayList集合中,在Array ...

  3. 21、解决关于 vue项目中 点击按钮路由多了个问号

    在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的默认事件,就 ...

  4. 创建mybatis的逆向工程

    1.mybatis的逆向工程(我使用的是maven仓库创建) 工作原理:反向工程(通过数据库中的表和字段信息去生成对应的增删改查方法) 其实就是一个自动生成工具 生成实体类(pojo)和映射文件(ma ...

  5. JAVA - Eclipse不能打断点的解决方法

    今天调试eclipse程序,莫名的就遇到这种问题. 解决: 在run菜单里面,把 “skip all breakpoints”  选项勾去即可. 如下图:

  6. Android常用五种布局

    1. FrameLayout(框架布局) 这个布局可以看成是墙脚堆东西,有一个四方的矩形的左上角墙脚,我们放了第一个东西,要再放一个,那就在放在原来放的位置的上面,这样依次的放,会盖住原来的东西.这个 ...

  7. Css3动画(一) 如何画3D旋转效果或者卫星围绕旋转效果

    如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...

  8. Docker以http访问Harbor私有仓库(一)

    1 说明 前文Centos7搭建Harbor私有仓库(一)我们成功搭建Harbor,本篇我们主要配置Docker以http方式访问私有仓库 2 Docker配置 2.1 Mac系统 2.1.1 配置D ...

  9. windows 下安装 composer

    友情链接 1. PHP 5.6 以上 2. php.ini 开启 : extension=php_openssl.dll extension=php_mbstring.dll extension=ph ...

  10. Docker搭建Redis

    1.拉取redis镜像: docker pull redis 2.创建容器: docker run -d --restart=always -v /opt/redis/data:/data --nam ...