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

[OldCarMan]

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 里面?

谢谢大家回复，提前祝大家节日快乐！

[moreant]

第一点
前端工程规范可以参考一些知名的后台模板如：
vue2: https://github.com/PanJiaChen/vue-element-admin
vue3: https://github.com/honghuangdc/soybean-admin

第二点
具体缘由请查阅 vue 单文件相关，如果是用 vue3 项目，使用 <script setup> 语法糖就不用重新声明了。

[cxe2v]

工程规范与代码规范可以通过编辑器插件解决，在保存时或者提交时强制更改你指定的规则部分，

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

全局变量使用你的写法是对的，但是你的 import 应该写在 script 标签内部

[grit136907108]

import 这一行，应该写在 script 标签里面吧。

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

vue2 的话只能重新声明，vue3 可以使用上面说的 <script setup> 语法糖。

[foolnius]

methods: {
aa,
}

[markzyh]

先把格式化配置好，这个缩进看的有点难受
函数名变量名小驼峰，css 短横线
import 问题如三楼所说

[OldCarMan]

谢谢大家抽空回复！
@moreant 请教一下 v3 这波改动，是放弃在组件里使用 export 了吗？加了<script setup> 提示的错误，发现答案大部分是删除掉 export 的部分，回归普通 js 的写法？ https://stackoverflow.com/questions/71163741/vuejs-script-setup-cannot-contain-es-module-exports

@cxe2v @grit136907108 好的，确实写错位置了。
@foolnius 我问题里就是类似这么用的😂。

[OldCarMan]

@markzyh 嗯嗯。b.vue 我采用 md 的 html 写法，代码是手敲的，v 站对部分代码的解析效果似乎不大好，不管我怎么缩进就是输入框的代码格式就是≠预览的格式，下次我用 ide 格式化看看。抱歉，import 手敲错位置，v 站改不了帖子。谢谢建议。

[OldCarMan]

接#6 楼我写的。
换成 v3<script setup>后，我发现组件里<script>下几乎所有的代码都换了个使用语法，无论是基本使用语法还是组件间的通信写法，基本等于回归原生 js 的使用习惯，虽然代码逻辑上基本不变，但是这改动未免太大了吧？如果老项目使用 v3 以下版本，是不是基本放弃体验 v3 相应的版本升级内容了，虽然可以选择不用<script setup>这种形式，只能绕道而行？继续保留使用<script>或者写多个<script>(其中一些使用 setup 这种方式)？😅

[foolnius]

@OldCarMan #6
我的意思是，你可以不用写成 aaU(){ return aa}，你可以直接写成 aa ，这是语法糖
你大致理解成一个 vue 组件，要在内部要绑定这个方法，他才能在 template 内调用，绑定的方法就是 methods 内部声明

[OldCarMan]

@foolnius 嗯嗯，个人觉得这样做是不是有点冗余了，如果每个组件内部都这样调用，岂不是一堆重复逻辑的代码。v3 是不是发现 v2 这样写的问题了，所以才使用 <script setup>的方式来规避这个问题？ （非前端评价可能不专业）