分離vue文件中css、js代碼的簡單技巧
更新時間：2022年03月19日 14:06:57 作者：liyoro2
這篇文章主要給大家介紹了關于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
場景
- 1、因為早期是iOS開發(fā)，形成的MVC習慣，個人喜歡css、js代碼獨立放一個文件里面，也就是分離樣式模塊和業(yè)務處理模塊
- 2、寫復雜界面、復雜業(yè)務的時候，界面、樣式、業(yè)務代碼都放.vue文件里面，代碼量很大，幾千上萬行的，難受，割了吧（簡單頁面可忽略）
- 3、基于vue2 cli3項目
方法
挺簡單的，就是利用下ES6的import和export
例如mockDataTest.vue文件，在views目錄下新建一個mockDataTest</font>目錄，目錄里新建**index.vue（界面主文件）、index.scss（界面樣式代碼）、index.js（業(yè)務js代碼），結構如下：
|-- src
|-- views
|-- mockDataTest
|-- index.vue
|-- index.scss
|-- index.jsindex.vue 基礎代碼
<!--界面代碼-->
<template>
<div class="mockDataTestView">
mockDataTestView
</div>
</template>
<!--這里引入分離的業(yè)務js代碼-->
<script>
import indexjs from './index.js'
export default {
...indexjs,
}
</script>
<!--這里引入分離的界面樣式代碼-->
<style lang="scss" scoped>
@import './index.scss';
</style>index.scss 基礎代碼
.mockDataTestView {
padding: 10px;
}index.js 基礎代碼
export default {
name: 'mockDataTestView',
data() {
return {
}
},
mounted() {
},
created() {},
methods: {
},
watch: {
}
}純粹為了讓一個文件里面代碼量盡量少而已，便于閱讀、編輯
拓展
上述是針對vue2、js、scss的方式，vue3、typescript也是可以的
代碼
沒什么好看的，上面的夠了。
代碼，參考 views 里面的 mockDataTest
總結
到此這篇關于分離vue文件中css、js代碼的簡單技巧的文章就介紹到這了,更多相關vue文件中css js代碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
watch的基本用法是在Vue實例中定義一個watch對象,該對象內部包含需要監(jiān)聽的數據項和對應的回調函數，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下2024-01-01
react+vite動態(tài)導入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue3沒有this的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手試一試2022-05-05
解決vue項目運行提示Warnings while compiling.警告的問題
這篇文章主要介紹了解決vue項目運行提示Warnings while compiling.警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本篇文章主要介紹了淺談webpack編譯vue項目生成的代碼探索，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本篇文章主要介紹了VUE 全局變量的幾種實現方式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue3中的defineExpose函數用法的相關資料,defineExpose是Vue3中用于在模式下暴露組件內部屬性和方法的輔助函數,它允許父組件通過ref訪問子組件的暴露內容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下2025-01-01