vite-vue3-template

Project setup

npm install

// 如果失败，添加参数 
--legacy-peer-deps

本地运行

npm run serve

打包

npm run build

规范

1. 文件夹命名规范

属于components文件夹下的子组件文件夹，使用大写字母开头的PascalBase风格

1. 全局通用的组件放在 /src/components 下
2. 其他业务页面中的组件，放在各自页面下的 ./components 文件夹下
3. 每个 components 文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或 index.js，其他.vue 文件统一大写开头（Pascal case），components下的子文件夹名称统一大写开头（PascalCase）

其他文件夹统一使用驼峰风格

2. 示例

// 全局公共组件：/src/components示例
- [components]
    - [Breadcrumb]
      - index.vue
    - [Hamburger]
      - index.vue
    - [SvgIcon]
      - index.vue

// 业务页面内部封装的组件：以 /src/views/layout/components示例
-[src]
  - [views]
    - [layout]
      - [components]
        - [Sidebar]
          - index.vue
          - Item.vue
          - SidebarItem.vue
        - AppMain.vue
        - index.js
        - Navbar.vue

// index.js 中导出组件方式如下：
export { default as AppMain } from './AppMain';
export { default as Navbar } from './Navbar';
export { default as Sidebar } from './Sidebar';

3. 文件命名规范

3.1. *.js文件命名规范

1. 属于类的.js 文件，除 index.js 外，使用PascalBase风格
2. 其他类型的.js 文件，使用kebab-case风格
3. 属于 Api 的，统一加上Api后缀

3.2. *.vue文件命名规范

除 index.vue 之外，其他.vue 文件统一用PascalBase风格

3.3. *.less、*.scss文件命名规范

统一使用kebab-case命名风格

4. vue 文件

• name

  建议一般情况下加上，且跟文件同名，如果文件以横线连接命名，转为大写字母开头。这样在调试时方便查看组件

  export default {
      name: 'Navbar',
  };