分離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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue項目如何設置反向代理和cookie設置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時遇到了不少問題,下面這篇文章主要給大家介紹了關于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結構與用法的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要給大家介紹了關于Vue管理系統(tǒng)前端之組件拆分封裝的相關資料，文中通過實例代碼結束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要介紹了VueRouter路由模式的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
將 unix 時間戳轉換為日期時間和使用日期時間轉換為 unix 時間戳,在項目中常常用到,其中vue中的moment庫很是方便,下面小編就來為大家講講具體使用吧2023-09-09
這篇文章主要介紹了vue2+elementUI的el-tree的懶加載,文中給大家提到了element?ui?中?el-tree?實現(xiàn)懶加載的方法，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
vue在mounted拿不到props中傳遞的數(shù)據(jù)問題
這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03