# alw

**Repository Path**: little-dragon-cat/alw

## Basic Information

- **Project Name**: alw
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-22
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3模板说明

## 环境
node-v14.20.0

vscode插件: prettier, stylelint, eslint

## 目录结构
	--src/
		--api/         所有的ajax请求，有demo
		--components/  全局公共组件目录，zjy-开头的组件无需单独引用，可直接使用
		--constants/   常量
		--mixins/
		--pages/       所有页面文件
		--static/      静态资源：tabbar图片和scss文件
		--store/
		--types/
		--utils/       方法类
		--App.vue
		--ext.json
		--main.ts
		--pages.json
	--static/          所有页面用到图片文件(tabbar除外)存放于当前目录，和oss一一对应
	--packages.json


## 组件Components
1、全局组件在src/components下，zjy-开头的组件无需单独引用，可直接使用

2、模块组件在自己的文件夹建components

3、命名规则：文件名小写，多单词用中横线拼接，比如<table-list /> <table-list />

## store/common
1、 定义的state务必了解，标题栏+tabbar高度 常量

## CSS 提前熟悉src/static/styles里的scss文件
1、样式命名小写且需要有含义，如果多个单词则用中横线-连接， 比如 product-wrap, product-item

2、页面样式独立时写在自己的页面，且标明scope, <b>颜色可直接使用var.scss的变量</b>,无需单独引入：
```
<style lang="scss" scoped>
.product-item {
	color: $c-white-_8
}
</scope>
```
3、尽量避免行内样式(计算样式除外)


## JS
1、函数名和变量名统一驼峰，除需配合服务端使用的部分字段外
```
const showSearch = ref(false)
const productDetail = (productId: string) => {}
```


## 静态图片资源
1、根目录static下图片文件和远程oss文件对应，oss地址在env文件配置

2、src/static为tabbar图片和scss文件
oss文件配置地址在env目录，页面使用示例：
```
const imgBaseUrl = inject("imgBaseUrl")
<img :src="imgBaseUrl + 'close_icon.png'" />
```
特别提示：在初期开发时，很多图片没有上传到oss, 可以把图片文件放到根目录static, 把nativeBaseUrl指向地址改为本机服务地址