css js写在一起 vue_Vue模板、JS、CSS分离实现

最新推荐文章于 2023-04-27 09:02:54 发布
最新推荐文章于 2023-04-27 09:02:54 发布
阅读量1k 收藏 4
点赞数
文章标签： css js写在一起 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35055546/article/details/114492180
版权
本文探讨了在Vue.js项目中如何处理复杂的组件，通过使用vue-builder-webpack-plugin插件实现模板、CSS和JS的分离，提高代码的可维护性和模块化。通过插件安装、Webpack配置改造，实现了细粒度的组件分治，并提供了自动化创建模板文件的解决方案。
摘要由CSDN通过智能技术生成

我们知道，Vue.js文件默认由 template 、 style 、 script 三种标签将 HTML 、CSS、JS混合到一个文件当中。

8ed36ad7167c20ca9b18eb6c850a4759.png

相信作者尤大这么设计的作用显而易见，有它一定的优势，即：当单个VUE文件如果样式、逻辑、模板相对简单时以上结构能很大程度上降低逻辑复杂度，页面功能和整体结构也一目了然。但是，当页面功能内容偏多，交互逻辑复杂，模板嵌套多层时将会出现如下图这种况。几百上千行的代码杂柔在一个文件中，当涉及到重构，维护时将会是个焦油坑。例如下图(733行，所有的css/js/html杂柔在一起，不利于维护，逻辑非常不清晰)：

34926dda1894f9187da9e96dd3300412.png

这种情况可以通过3种情况来改善：

1.将JS逻辑通过公共组件方式抽离再引入

2.将css通过@import方式抽离再引入

3.将css/js/html全部抽离，只保留模块主入口文件再引入

前面1，2种都不能彻底解决模块划分，内聚模块分治问题，本文讨论的是第3种解决方案，最终效果如下:

最低0.47元/天 解锁文章
荷小爱
关注
vue 实现 js css html分离
weixin_43966635的博客
10-19 1569
方法一 分别创建 index.js, index.css index.vue 代码 <template> .... </template> <script> //index.js 的相对路径 import index from "./index.js";// 名字可以任取 export default index; </script> <style scoped> //index.css 的相对路径 @import "./index.cs
vue实现动态css,巧用 CSS 动画实现动态气泡背景__Vue.js__CSS__前端
weixin_35672512的博客
08-03 1276
今天是节后上班第一天，早上醒来一睁眼，嗯？啊…？什么…？这是哪？我是谁？上什么班？然鹅，还是被昨晚特意设置的八个闹钟⏰吵醒，冬天早上起床的难度…想必各位都心有体会 ????，抱着一万个不情愿起床早早地来到了办公室，还是熟悉的环境，还是熟悉的味道。。。还有，熟悉的任务需求????。今天的第一个任务是写个登录页面，老大给了我一个参(chao)考(xi)案例，大家点击链接就能看到。嗯，这个登录页面确实很简洁、大方，...
VueJs--单页面js、css的分离
前端
12-18 7973
vueJs页面的分离 想要将.vue文件中的js、css拆分出来，使得文件的内容结构更加清晰 在.vue文件中使用之前的引入方式似乎存在问题，经测试后发现： .js文件的引入 js文件仍旧使用script标签，使用src属性指向文件所在位置 .css文件的引入 css文件的引入使用的是标签style,使用的属性是src,如果想要样式只作用 与当前页面，可以直接在标签上添加scoped属性 示例如下...
vue中CSS与JS代码分离
偷得浮生半日闲
03-16 1857
前言 一个vue页面有着 HTML、CSS和JS代码，看起来代码过多，不好管理，所以就需要分开写CSS和JS 教程 在 assets 下创建 css 和 js 文件夹，在页面中引入 <script src="@/assets/js/home.js"/> <style lang="less" src="@/assets/css/home.less"/> 或者 <script src="../assets/js/home.js"/> <style lang="
vue项目单独剥离css文件并在项目中进行引入
rainbowyx的博客
03-11 1528
【1】自己项目中的css文件 1)新建一个css文件，把所有的css都写到里面。注意里面不用写<style></style> 2)在需要引入vue里面的<script></script>里面写入引入路径即可
41.el和template区别 ＆ VUE实现分离写法
Bi-Hu的博客
08-03 271
如果我们希望将data中的数据显示在界面中，就必须是修改index.html,如果我们后面自定义了组件，也必须修改index.html来使用组件,但是html模板在之后的开发中，并不希望手动的来频繁修改. 定义template属性： 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容，我们吧index,html中的代码删...
vue-im-master_html_js_css_vue_
10-01
总的来说，“vue-im-master”项目展示了如何在Vue.js环境中集成极光API，实现一个功能完整的前端聊天应用。这涉及到HTML的结构设计、JavaScript的动态功能实现以及CSS的界面美化。理解并掌握这些技术，对于提升Web...
vue计算器_howevernzn_html_js_计算器_css_
09-30
Vue.js 计算器是一个基于前端技术实现的交互式应用，它使用了 HTML、CSS 和 JavaScript 作为基础架构，同时结合 Vue.js 框架来处理数据绑定和组件化。这个计算器有两个工作模式，能够进行准确的计算，并且拥有一个...
vue文件html、css、js分离
weixin_44849078的博客
08-06 5376
vue文件html、css、js分离
vue-builder-webpack-plugin:Webpack插件自动构建vue文件
05-13
vue-builder-webpack-plugin Webpack插件自动构建vue文件 在处理vue文件时，编辑器是否存在问题？ 这个给你 您是否要分离vue文件？ 这个给你 您只是不喜欢拥有vue文件？ 这个给你 您可以使用此插件自动生成.vue文件。 安装 $ npm install vue-builder-webpack-plugin --save-dev 用法 在您的webpack.config.js var VueBuilder = require ( 'vue-builder-webpack-plugin' ) ; module . exports = { // ... plugins : [ new VueBuilder ( { path : 'src' } ) ] } ; 每当您以正常或监视模式运行w
将JS从Vue中分离出来作为单JS文件,批量处理Vue页面过长的问题
最新发布
Harry Blog
04-27 1248
https://github.com/haryy-1012/Vue-Separate-Js
vue html js css写在一起,vue文件html、css、js分离
weixin_33628144的博客
06-18 1726
vue文件默认格式如下html代码js代码css代码1、全部分离2、部分分离html内容或者@import url("./main.scss");@import "./main.scss";全局引入css在main.js中引入import './main.css'//注意'./'一定要加不然会报错js第一种方式，在main中引入，在组件中使用新建common.js在main.js中引入import...
Vue中html、css、js分离
WebDestiny的博客
08-29 2713
一：首先，在 .vue文件中设置如下：（用webpack和vue-cli的话不建议使用该方法） <template src="./record.html"></template> <script src="./record.js"></script> <style src="./record.scss"lang="scss">&...
vue项目性能优化5，优化：CSS文件过大
公z号：职场爱学习
06-20 2787
基于webpack 3、vue 2和vue-cli 2的性能优化。 一般CSS文件不会过大，而且也没什么可优化的，毕竟CSS只是描述样式，没有逻辑，所以不会像JS出现重复引用的问题。 经过把css改成CDN加速之后，变小了一点，最后文件还是很大，打开文件查看，发现是图片的base64字符串被打包到css文件中了。不能继续优化了。 解决图片被转换成base64的问题，可以把图片上传到文件服务器，在项目里直接应用图片的链接，可以有效减小css文件的大小。 1、CDN加速 2、搜索整个项目，删除
vue 打包后app.css,verondor.js文件过大
Macdull2014的博客
09-04 232
参考：https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_41999617/article/details/88052534 1. 查看各部分文件大小及编译后文件大小 (1) 使用webpack-bundle-analyzer工具，先安装依赖包 np...
vue打包后js，css文件过大，页面首次加载慢的解决方法
大连海大
09-09 7391
npm install --save-dev compression-webpack-plugin@1.11.2 在config/index.js中配置： 在webpack.conf.js(或者webpack.prod.conf.js)中修改： 打包结果： 在nginx中配置： nginx reload后如果提示没有gz_static模块，则需要重新编译安装nginx,如...
nuxt打包路劲问题_实战减小 Vue 项目的打包体积
weixin_39724004的博客
11-21 1382
本文内容使用NuxtJS2.14.1 (其中 vue 为 2.6.11， webpack 为 4.44.1) 和Ant Design of Vue1.6.4。因为版本和不同类库造成的差异请大家多进行搜索。问题用 NuxtJS 开发博客(https://bun.plus)以来，一直有一些体验上的问题，这次正好有时间，便来优化一下，目前的问题主要有：依赖的 js css 文件较大服务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值