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