vue将js和css单独拆分出来

这里用的是 vue-element-admin 框架

一  新建一个文件夹 webManage , 里面放 css 和 js 文件夹

二  拆分 把需要拆分的文件 直接剪切到对应的文件夹里就可以了

三  在vue页面上调用 对应的 js 和 css

<script> 
  import login from "../../webManage/js/login/login.js";
  export default login;
</script>

<style lang="scss" scoped>
   @import '../../webManage/css/login/login.scss'
</style>

如果不足,请指正,O(∩_∩)O谢谢

  • 8
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Vue项目中,可以采取以下几种方法来减少打包后的JSCSS文件数量: 1. 使用动态导入(Dynamic Import):Vue支持使用动态导入来按需加载组件或模块。通过将代码拆分成多个异步加载的块,可以减少初始加载的文件数量。例如,可以使用`@babel/plugin-syntax-dynamic-import`插件来支持动态导入。 2. 使用异步组件(Async Components):将页面中的某些组件定义为异步组件,只有在需要使用时才进行加载。这可以通过使用Vue的`Vue.component()`方法或Vue Router的`component`配置项来实现。 3. 使用代码分割(Code Splitting):可以使用Vue的路由懒加载或Webpack的代码分割功能,将应用程序拆分成多个小块,按需加载。这样可以减少初始加载的文件大小。在Vue Router中,可以使用`import()`函数来实现懒加载。 4. 使用CSS预处理器:使用CSS预处理器(如Less、Sass等)可以帮助你更好地组织和管理CSS代码。同时,预处理器还提供了一些功能,如变量、混合(Mixins)等,可以减少代码的重复。 5. 使用CSS模块(CSS Modules):CSS模块可以将样式与组件进行关联,避免全局污染和样式冲突。这样可以使得每个组件的样式只在该组件内生效,减少全局样式文件的数量。 6. 使用Webpack的优化插件:Webpack提供了一些优化插件,如`MiniCssExtractPlugin`用于提取CSS单独的文件,`OptimizeCSSAssetsPlugin`用于压缩CSS代码,`UglifyJsPlugin`用于压缩和混淆JS代码等。这些插件可以帮助减少文件数量和文件大小。 通过以上方法,可以有效地减少打包后的JSCSS文件数量,提升应用程序的加载性能。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值