模块化和webpack模块化打包
2021-12-25 13:07
323 查看
模块化和webpack模块化打包:
一、❀ 模块化 [导入import-----导出export]
1、为什么需要模块化?
JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,造成了很多问题:全局变量冲突、函数命名冲突、引入js文件顺序等等
二、webapck中配置Vue(安装vue依赖)和Vue组件化开发引入:
(1)webpack模块化vue(安装vue依赖):
步骤一:通过npm安装Vue : npm install vue --save
步骤二:在webpack.config.js中添加上 resolve(Vue runtime-compiler版本)
注意:去vue官网找安装命令和配置代码
(2)Vue组件化开发引入:
1) 需要安装:安装vue-loader、 vue-template-compiler和修改webpack.config.js的配置文件
2)Vue组件化开发引入的好处:
■ 对比cpn组件(js文件)和cpn组件(Vue文件),显然Vue文件的结构更加清晰
3)代码对比:
① js文件的Vue组件【可以看到模板template,属于html的,跟Vue(js)混在一起】://将模板以默认(匿名)对象的方式导出 export default{ template: ` <div> <button @click="btnClick">点w</button> <input type="text" /> <h1>{{message}}</h1> </div> `, data(){ return { message: '配置Vue啦~' } }, methods: { btnClick(){ console.log('感谢你点我哈~'); } } }② Vue文件的Vue组件【html、css、js代码分离,结构清晰】:
<template> <div> <button class="btnColor" @click="btnClick">小儿子</button> <h5>{{message}}</h5> </div> </template> <script> export default { name: "cpn", data(){ return { message: '配置Vue啦~' } }, methods: { btnClick(){ console.log('感谢你点我哈~'); } } } </script> <style scoped> .btnColor{ background-color: greenyellow; } </style>
相关文章推荐
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
- 9.Vue之webpack打包基础---模块化思维
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
- webpack打包非模块化js的方法
- 前端模块化实践----使用webpack打包js代码
- webpack 前端资源模块化管理和打包工具
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
- webpack的使用方法深入学习模块化打包(vue脚手架相关配置)
- 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
- Webpack打包简单的使用ECharts,模块化处理的简单演示
- Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案
- 详解webpack模块化管理和打包工具
- webpack模块化打包,结合react-route实现分文件打包,按需加载
- 使用vue-cil构建vue2项目,webpack打包项目
- webpack2--4多页面支持& 公共组件单独打包
- html-webpack-plugin打包后没有html文件生成
- cordova打包vue2(webpack)android、ios app
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- webpack打包编译学习记录
- Vue项目webpack打包部署到服务器