web 基础项目

技术栈：Vue 3 Vite Vue-Router Pinia Element-Plus

单文件组件

基本结构

<!--
在vue模板中 全局语言模块使用$t()访问；t也行，不建议这样做，会报警告!!!
局部语言模块 必须 使用const { t } = useI18n() 获取t()进行访问；否则无法访问!!!
-->
<template>
  <div>{{ t('title') }}</div>
</template>

<script setup>
const { t } = useI18n()
</script>

<style lang="scss" scoped></style>
<!-- 组件多语言文件再此配置 lang="json5" 可以省去key的双引号，可以类似写js对象 -->
<i18n lang="json5">
{
  zh_CN: {
    title: '标题'
  },
  en_US: {
    title: 'Title'
  }
}
</i18n>

vue vue-router pinia vue-i18n 中暴露的hooks已配置自动导入，无需再次手动导入

SvgIcon

<template>
  <SvgIcon name="home" :size="30" color="#ff0" />
</template>

项目已配置Svg图标，将.svg 后缀的文件放到 src/assets/icons 目录下即可自动注册svg图标，模板内使用 SvgIcon标签 传入name属性(文件名称)即可实现图标注册，配置size，color可以设置图标大小/颜色

插件推荐

ESLint 代码检查

Prettier 代码格式化

Auto Close Tag 标签闭合

Auto Rename Tag 标签命名

AutoScssStruct4Vue scss 语法支持

Better Comments 美化格式化代码

Code Spell Checker 单词拼写检查

CSS-in-JS js内css提示

EditorConfig for VS Code 编辑器配置

Path Intellisense 导入提示

Code Spell Checker 单词拼写检查

CSS-in-JS js内css提示

JSON5 syntax json5语法支持