V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
OldCarMan
V2EX  ›  前端开发

关于 vue 工程规范,项目结构设计,代码规范等是怎么做的?

  •  
  •   OldCarMan · 2023-04-28 09:20:10 +08:00 · 2249 次点击
    这是一个创建于 574 天前的主题,其中的信息可能已经有所发展或是发生改变。

    rt,本人非前端,最近想学点 vue ,出于想规范点学习前端项目基础的目的,这里请教一下关于上面这几点,大佬们平时生产环境中或者认为的最佳实践是怎么样的?

    • 比如代码规范是什么样的(我看有些前端代码驼峰 /短横线 /下划线混着用),不确定哪种比较规范点,另外比如后端项目结构有 mvc 模式,那么对应的前端一般会使用什么样的项目结构呢?工程化结构是怎么设计的。

    最后请教大家一个问题,vue 组件是怎么调用来自其他目录下的全局变量 /函数的?我看如果只是普通 js 文件相互调用,调用方直接 import 变量 /函数进来就可以使用了,但在组件中直接 import 好像不行,比如 b.vue 调用 a.js:

    • a.js
    export function aa() {
    
    }
    
    • b.vue
    <template>
    
    <!--无法直接使用{{aa()}}-->     
    <div>{{aaU()}}</div>
    
    </template>
    
    import {aa} from "@/utils/a";
    <script>
    export default defineComponent({
    	methods: {
        	  aaU() {
                return aa();
        	  }
      	}
    })
    </script>
    
    如上面代码,无法在 template 中直接使用{{aa()}}来获取函数返回结果,只能通过调用一个 methods 或 computed 里的重新申明的函数 aaU()间接调用,这样感觉有点多此一举,不是很明白其中的目的,或者是存在直接使用的办法,只是我没发现而已。另外大家平时 vue 项目的全局变量是存放到什么位置的?配置文件?工程文件?还是直接写 js 里面?

    谢谢大家回复,提前祝大家节日快乐!

    10 条回复    2023-04-28 21:09:44 +08:00
    moreant
        1
    moreant  
       2023-04-28 09:42:32 +08:00
    第一点
    前端工程规范可以参考一些知名的后台模板如:
    vue2: https://github.com/PanJiaChen/vue-element-admin
    vue3: https://github.com/honghuangdc/soybean-admin

    第二点
    具体缘由请查阅 vue 单文件相关,如果是用 vue3 项目,使用 <script setup> 语法糖就不用重新声明了。
    cxe2v
        2
    cxe2v  
       2023-04-28 09:48:11 +08:00
    工程规范与代码规范可以通过编辑器插件解决,在保存时或者提交时强制更改你指定的规则部分,

    项目结构这个需要存留文档并在开发组内宣贯规范,进行代码复查检查可能出现的不规范之处并及时改正

    全局变量使用你的写法是对的,但是你的 import 应该写在 script 标签内部
    grit136907108
        3
    grit136907108  
       2023-04-28 09:52:06 +08:00
    import 这一行,应该写在 script 标签里面吧。

    全局变量我一般都是写在一个 js 里,需要用的时候 import 。

    vue2 的话只能重新声明,vue3 可以使用上面说的 <script setup> 语法糖。
    foolnius
        4
    foolnius  
       2023-04-28 09:58:29 +08:00
    methods: {
    aa,
    }
    markzyh
        5
    markzyh  
       2023-04-28 10:21:44 +08:00
    先把格式化配置好,这个缩进看的有点难受
    函数名变量名小驼峰,css 短横线
    import 问题如三楼所说
    OldCarMan
        6
    OldCarMan  
    OP
       2023-04-28 10:21:55 +08:00
    谢谢大家抽空回复!
    @moreant 请教一下 v3 这波改动,是放弃在组件里使用 export 了吗?加了<script setup> 提示的错误,发现答案大部分是删除掉 export 的部分,回归普通 js 的写法? https://stackoverflow.com/questions/71163741/vuejs-script-setup-cannot-contain-es-module-exports

    @cxe2v @grit136907108 好的,确实写错位置了。
    @foolnius 我问题里就是类似这么用的😂。
    OldCarMan
        7
    OldCarMan  
    OP
       2023-04-28 10:27:18 +08:00
    @markzyh 嗯嗯。b.vue 我采用 md 的 html 写法,代码是手敲的,v 站对部分代码的解析效果似乎不大好,不管我怎么缩进就是输入框的代码格式就是≠预览的格式,下次我用 ide 格式化看看。抱歉,import 手敲错位置,v 站改不了帖子。谢谢建议。
    OldCarMan
        8
    OldCarMan  
    OP
       2023-04-28 12:11:01 +08:00
    接#6 楼我写的。
    换成 v3<script setup>后,我发现组件里<script>下几乎所有的代码都换了个使用语法,无论是基本使用语法还是组件间的通信写法,基本等于回归原生 js 的使用习惯,虽然代码逻辑上基本不变,但是这改动未免太大了吧?如果老项目使用 v3 以下版本,是不是基本放弃体验 v3 相应的版本升级内容了,虽然可以选择不用<script setup>这种形式,只能绕道而行?继续保留使用<script>或者写多个<script>(其中一些使用 setup 这种方式)?😅
    foolnius
        9
    foolnius  
       2023-04-28 13:26:54 +08:00
    @OldCarMan #6
    我的意思是,你可以不用写成 aaU(){ return aa},你可以直接写成 aa ,这是语法糖
    你大致理解成一个 vue 组件,要在内部要绑定这个方法,他才能在 template 内调用,绑定的方法就是 methods 内部声明
    OldCarMan
        10
    OldCarMan  
    OP
       2023-04-28 21:09:44 +08:00
    @foolnius 嗯嗯,个人觉得这样做是不是有点冗余了,如果每个组件内部都这样调用,岂不是一堆重复逻辑的代码。v3 是不是发现 v2 这样写的问题了,所以才使用 <script setup>的方式来规避这个问题? (非前端评价可能不专业)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1025 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:56 · PVG 06:56 · LAX 14:56 · JFK 17:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.