业务逻辑使用大驼峰,如:Index.vue、Check.ts,根目录下或基础文件全小写,如:package.json
变量、属性使用大驼峰,函数使用_连接、方法使用小驼峰,如:
const Check=ref({ //这里是变量
Name:'', //这里是属性
setData:()=>{} //这里是方法
})
function get_check(){} //这里是函数,也推荐使用小驼峰
当然了,一些通俗变量使用小驼峰,如:
import { useRouter,useRoute } from 'vue-router'
const router=useRouter()
const route=useRoute()
import { useStore } from '../store'
const store=useStore()
函数、方法中,局部变量使用小驼峰,如:
async function upload(){
let file=await UploadApi.select_upload('file','.png,.gif,.jpg')
}
/**
* 示例中代码中,回调函数会使用到大量的v,k,d,i,rs等
*/
let Lists:number[]=[] //List是列表,通常列表是以数组的形式存在,因此命名时是复数,即Lists
Lists.forEach((v,k)=>{}) //v是value的意思,k是key的意思
for(let i of Lists){} //i是index的意思
for(let d in Lists){} //d是data的意思
function get_data(){ //get_data英译获取数据的意思
let rs:{[index:string]:any}={} //rs是result的意思
}
/**
* 字符串拼接推荐使用字符串模板(`${变量}`)
*/
let ContactNumber=10
let ContactCSS=`${ContactNumber}px`
/**
* 存在多次使用的字符串建议使用变量将其存储
*/
const URL = 'https://127.0.0.1:8080/api/yan/'
let SignLogo=`${URL}2023-02-01/signlogoactived.svg`
let Logo=`${URL}2023-02-01/sigenlogo.svg`
/**
*我司项目皆由vite构建,模板为vue-ts,请注意node版本
*/
yarn create vite 项目名称 --template vue-ts
vite祥见:https://cn.vitejs.dev/guide/
可以理解为Vuex,祥见:https://pinia.web3doc.top/introduction.html
yarn add [email protected]
1.初始化pinia:pinia.ts
import {createPinia} from 'pinia';
const Pinia =createPinia()
export default pinia
2.封装@yakj/sdk/sdk/store:yan.ts
import sdk from '@yakj/sdk/sdk/store'
import pinia from './pinia'
export default fuction get_yan_store(){
return sdk(pinia)
}
3.在入口文件中挂载pinia:mian.ts
import pinia from './store/pinia'
const app=createApp(App).use(pinia)
当我们前端页面业务逻辑已经完成,需要调用接口测试时,或许后端只是把接口文档准备好了,调用接口后并不会返回真实数据,或者调用接口后数据并不理想,此时需要我们根据接口文档自己准备测试数据。 比如接口文档如下: 我们应该先在项目中创建一个api文件夹,并且文件夹中含有一个放置demo的文件,比如User.ts
export class User{
UID:number
Name:string
Sex:number
Avatar:string
}
export const UserList:User[]=[
{
UID:0,
Name:'古力娜扎',
Sex:0,
Avatar:'https://npm.tansuyun.cn/@yakj/[email protected]/dist/img/hoverbtn.02c89e24.svg'
},
{
UID:1,
Name:'迪丽热巴',
Sex:0,
Avatar:'https://npm.tansuyun.cn/@yakj/[email protected]/dist/img/hoverbtn.02c89e24.svg'
},
{
UID:100,
Name:'刘德华',
Sex:1,
Avatar:'https://npm.tansuyun.cn/@yakj/[email protected]/dist/img/hoverbtn.02c89e24.svg'
},
{
UID:101,
Name:'张学友',
Sex:1,
Avatar:'https://npm.tansuyun.cn/@yakj/[email protected]/dist/img/hoverbtn.02c89e24.svg'
},
]
而后在要使用到demo的页面引入并使用,如User.vue
import UserList from '../api/User'
const Users=ref([])
onMounted(()=>{
Users.value=UserList
})
为了可维护性、可阅读性,需要整个团队统一编码风格(Ⅰ.option Api,Ⅱ.compositon Api,Ⅲ.compositon Api + Composables);
option Api 参考:https://git.tansuyun.com/yakj/yan/answermodule
composition Api 参考:https://git.tansuyun.com/yakj/yan/check master主分支
composition Api+Composables 参考:https://git.tansuyun.com/yakj/yan/check test主分支
组合式函数需要已掌握组合式Api;
组合式Api、组合式函数祥见:https://cn.vuejs.org/guide/reusability/composables.html;
了解掌握组合式函数:https://juejin.cn/post/7083401842733875208
/**
* 在需要签字的页面,放入Sign组件。
* 1.v-model绑定一个boolean,控制组件的显示和隐藏;
* 2.传入一个Name属性,显示当前调用组件的人名;
* 3.绑定一个sunccess函数,接收签字成功后,签字图片的URL,URL通常以函数参数的形式存在;
* 4.绑定一个cancel函数,逻辑处理为用户取消签字后的逻辑。
*/
<Sign v-model='ShowSign' :Name='UserName' @success='success' @cancel='cancel'></Sign>
const ShowSign=ref(false) //控制签字组件的显示隐藏
const Name=ref('') //签字人,通常在父组件使用UID获取到用户对象,拿到Name
function success(URL:string){ console.log(URL) } //签名提交成功后,返回签名图片的URL
function cancel(){} //签名取消的逻辑处理
vue-signatrue-pad祥见:https://github.com/neighborhood999/vue-signature-pad
安装 yarn add @ctsy/api-sdk
内容及使用方法:
Demo.ts
import { ApiController,ControllerApi } from '@ctsy/api-sdk' //ApiController完整的控制器,ControllerApi不完整的控制器
class Demo extends ApiController{
host='127.0.0.1:8080' //设置主机
async getData(){
let rs= await this._get() //ApiController的_get方法使用
return rs //一定记得return
}
async setData(ID:number){ //ApiController的_post方法使用
return await this._post('set',{ID}) //一定记得return
}
}
const DemoApi=new Demo('name','prefix')
export default DemoApi
Demo.vue
/**
* 使用我司标准接口时
*/
import { SearchResult,SearchWhere } from '@ctsy/api-sdk' //SearchResult查询条件,SearchWhere查询结果
import UploadApi from '@ctsy/api-sdk/dist/modules/Upload' //文件接口
import UserApi from '@ctsy/api-sdk/dist/modules/User' //用户接口
import DemoApi from '../api/Demo'
const SearchResult=ref(new SearchResult())
const SearchWhere=ref(new SearchWhere())
async function upload(){
let file=await UploadApi.select_upload('','.png,.gif,.jpg') //UploadApi 文件接口的使用
}
onMounted(async()=>{
let rs=await DemoApi.getData()
})
安装 yarn add @ctsy/common
内容及使用方法:
/**
* 常用日期处理方法format_date,DateFMT
* 常用数组格式处理方法array_key_set => 将数组对象转换成字典
* 常用延时方法delay_cb
*/
import { format_date,DateFMT,array_key_set,delay_cb } from '@ctsy/common'
let Now=format_date(new Date(),DateFMT.YMD)
onMounted(async()=>{
let rs=await getData() //rs=[{DID:0,UID:100},{DID:1,UID:10},{DID:2,UID:1}]
let lists=array_key_set(rs.L,'DID') //list={0:{DID:0,UID:100},1:{DID:1,UID:10},{DID:2,UID:1}}
})
前端库还有@ctsy/hook、@ctsy/sdk,@ctsy更多详情内容,请查看:https://www.npmjs.com/search?q=%40ctsy
调用接口时,配合vant库的Toast使用,如:
import {Toast} from 'vant'
async function save_data(){
Toast.loading('加载中...')
try{
let rs=await save(ID,Data)
Toast.success('保存成功')
}catch(error){
Toast.fail(`${error}`)
}finally{
Toast.clear()
}
}
vant3版本,请查看https://vant-contrib.gitee.io/vant/v3/#/zh-CN/home
vant4版本,请查看https://vant-contrib.gitee.io/vant/#/zh-CN/home
element教程,请查看https://element-plus.gitee.io/zh-CN/guide/design.html
常用cloneDeep方法做深拷贝:
import { cloneDeep } from 'lodash'
const Obj={}
const CloneObj=cloneDeep(Obj)
lodash教程,请查看https://www.lodashjs.com/
使用教程,请查看:https://www.liaoxuefeng.com/wiki/896043488029600
git clone https://github.com/SkyCui2022/-2023-.git
git remote add origin https://github.com/SkyCui2022/-2023-.git
git config --global user.email "[email protected]"
git config --global user.name "[email protected]"
git switch -c dev
git add README.md
git add *
git commit -m '文件信息'
git merge demo
git pull
git push
说明:“符号”+“提交内容”
示例:“+添加检查表”
除了使用vantUI、element-ui自带的icon,建议使用阿里巴巴iconfont,祥见:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.3;