该文档整理了项目中的代码规范性问题，以及前端需要安装的软件以及插件，还有前端人员所需要的常见网站，常见的 UI 组件库，项目的构建，vue3 组合式的使用，后续还会补充一些项目经常使用的知识点。

1.前端代码规范性问题

1.函数命名规范 采用小驼峰 语义明确
2.类名命名规范 采用 名词-语义
3.ts 类型命名规范 采用大驼峰命名
4.正则验证命名规范 一一导出，采用的是平常无大小写命名
5.组件名命名规范 采用小驼峰命名
6.hooks 命名规范 采用 use + 小驼峰命名

2.前端安装软件以及插件


1.vscode 插件
https://code.visualstudio.com/
2.vscode 插件
2.1 chinese 中文插件
2.2 Prettier 代码格式
2.3 Live Server 浏览器编译
2.4 Auto Rename Tag 自动化标签，修改一段另一端自动修改
2.5 Easy less 预编译器
2.6 Error Lens 错误警示
2.7 px to rem 像素转自适应
2.8 vue-official vue 插件
2.9 ES7 + React react 插件


前端安装软件
1.nodejs
https://nodejs.org/en 2.谷歌浏览器
https://www.google.cn/chrome/index.html
3.Snipaste 截图贴图软件
4.Typora.exe 写文档
5.Sourcetree 项目管理工具 6.网易有道翻译 ctrl + alt + d 看全英文档不范难
7.ToDesk || 向日葵
8.WinRAR 打包压缩

3.前端常用网站


1.浏览器插件 WeTab Al
2.gitHub 镜像
https://dgithub.xyz/search?q=vue3&type=repositories
3.CSDN
https://www.csdn.net/
4.vue 官方文档
https://cn.vuejs.org/
5.vite 官方文档
https://cn.vitejs.dev/
6.Ts 入门教程 vue 配合 Ts 参考官方文档
https://ts.xcatliu.com/basics/union-types.html 7.项目进度
https://www.teambition.com/
8.Echarts
https://echarts.apache.org/zh/index.html 9.蓝湖
https://lanhuapp.com/ 10.知乎
https://www.zhihu.com/

4.常见的 UI 组件库


1.vue2
https://element.eleme.cn/
2.vue3
https://element-plus.gitee.io/zh-CN/
3.vue3
https://2x.antdv.com/components
4.icon 图标、
https://www.iconfont.cn/

5.项目构建


1. node 版本最好是 18 版本以上推荐使用 yarn 包管理工具
2. npm create vite@latest my_app
3. yarn

# 项目名称

- mock
- public
- src
  - api
  - assets
  - components
  - router
  - store
  - view
    - home
      -hooks
      -style
      -type
      index.vue
    - category
    - car
    - my
    - login

6.vue3 组合式


vue3 组合式采用 hooks + type + style + 模板模式抒写
下面介绍 hooks 构成 定义一个 useList 的 hooks 1.导出
import axios from "axios";
import { ref } from "vue";
export default function () {
变量
const list = ref([]);
方法
const addList = async () => {
try {
const { data } = await axios.get("/api/get");
list.value = data.data;
} catch (error) {
console.error("Error fetching data:", error);
}
};
return {
addList,
list,
};
} 2.引用
import uselist from "./hooks/uselist";
const { list, addList } = uselist(); 3.模板直接使用 list 变量 addList 方法


type 类型约束 1.定义
export interface List {
goods: string;
price: number;
} 2.需要的地方引入
import { List } from "../type/index";

7.代码片段

vscode下载插件 vue-helper
文件-首选项-代码片段-vue-json
{
	"create Vue2": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>\n",
			"<script>",
			"  export default {",
			"    data(){",
			"      return{}",
			"    },",
			"    computed:{},",
			"    watch:{},",
			"    methods:{},",
			"    mounted(){}",
			"    beforeDestroy(){}",
			" }",
			"</script>\n",
			"<style rel='stylesheet/less' lang='less' scoped>",
			"</style>",
		],
		"description": "Log output to console"
	},
	"create Vue3 Setup": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>\n",
			"<script lang=ts setup>",
			"</script>\n",
			"<style rel='stylesheet/sass' lang='sass' scoped>",
			"</style>"
		],
		"description": "Log output to console"
	}
  }