1、因?yàn)樵缙谑莍OS開發(fā)，形成的MVC習(xí)慣，個(gè)人喜歡css、js代碼獨(dú)立放一個(gè)文件里面，也就是分離樣式模塊和業(yè)務(wù)處理模塊
2、寫復(fù)雜界面、復(fù)雜業(yè)務(wù)的時(shí)候，界面、樣式、業(yè)務(wù)代碼都放.vue文件里面，代碼量很大，幾千上萬行的，難受，割了吧（簡單頁面可忽略）
3、基于vue2 cli3項(xiàng)目

方法

挺簡單的，就是利用下ES6的import和export

例如mockDataTest.vue文件，在views目錄下新建一個(gè)mockDataTest</font>目錄，目錄里新建**index.vue（界面主文件）、index.scss（界面樣式代碼）、index.js（業(yè)務(wù)js代碼），結(jié)構(gòu)如下：

|-- src
    |-- views
        |-- mockDataTest
            |-- index.vue
            |-- index.scss
            |-- index.js

index.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: {
  }
}

純粹為了讓一個(gè)文件里面代碼量盡量少而已，便于閱讀、編輯

拓展

上述是針對(duì)vue2、js、scss的方式，vue3、typescript也是可以的

代碼

沒什么好看的，上面的夠了。

代碼，參考 views 里面的 mockDataTest

總結(jié)

到此這篇關(guān)于分離vue文件中css、js代碼的簡單技巧的文章就介紹到這了,更多相關(guān)vue文件中css js代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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