# vite

**Repository Path**: obh/vite

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-16
- **Last Updated**: 2025-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### 项目命名规范
  1.公共组件命名：路径在src/components下。以语义化为主，辅以驼峰进行命名。组件首字母大写。以此命名文件夹。文件夹下使用index.vue写相关代码。如：Loading/index.vue
  2.页面组件命名：在当前页面下创建components文件夹，命名与公共组件一样，区别在于不用在创建文件夹。如：home/components/Child.vue
  3.页面命名：views下的页面以语义化为主，辅以驼峰进行命名。组件首字母小写。以此命名文件夹，文件夹下使用文件夹下使用index.vue写相关代码。如：home/index.vue,test/test1/index.vue 。注：路由路径需与这个相同，如：test/test1的路由需访问到相应的目录。
  4.vuex命名：stare/modules写相关操作。其中app.js用于管理全局的状态。state名字以语义化为主，辅以驼峰进行命名，mutations以语义化为主，全大写，辅以帕斯卡命名，以下划线隔开，如ADD_COUNT。actions命名以语义化为主，辅以驼峰进行命名，与相应的mutations对应，如home/services/index.js
  5.css样式命名以语义化为主，辅以帕斯卡命名，以中划线隔开，如：add-count
  6.接口文件命名：公共接口放在src/services/app.js下。页面需要用到的接口放在当前页面文件夹的services/index.js文件下。入：demo/services/index.js。接口名称以语义化为主，辅以驼峰进行命名
  7.方法命名：以语义化为主，辅以驼峰进行命名。获取页面列表数据使用getList命名方法，获取详情数据使用getData命名方法。方法加以注释说明。公共方法的传参及作用需注释说明。

### 其他规范
1.接口请求放在created生命周期

### vite构建vue2项目注意事项
1.导出写法
  不要使用module.exports={}，和 exports.key = "value"这种写法，使用export default ={} 和 export const key = "value"这种写法

2.导入写法
  不要使用var dayjs = require("dayjs")这种写法，使用import dayjs from "dayjs"这种写法，用import替代require

3.require.context
  不要使用require.context这种写法，这是Webpack特有的写法

  require.context写法
  const req = require.context("./icons", false, /\.svg$/);
  const icons = req.keys().map(req);

  vite写法
  const icons = import.meta.glob("./icons/*.svg");

4.环境变量
  vue-cli中环境变量是以VUE_开头的，如：VUE_APP_API_ROOT，在vite中改改为以VITE_开头，如：VITE_APP_API_ROOT

5.使用CommonForm和CommonTable组件，使用了自定义类型和自定义样式的，script 需加上lang="jsx"，如：<script lang="jsx">

6.img图片引用
  不要使用require来引入
  vue-cli中的写法
   <img :src="require('@/assets/home/404.png')" alt="" />

   vite中写法
   <img :src="requireImgUrl('home/404.png')" alt="" />
   这里表示assets下home文件夹下的404.png图片，assets省略不写

   另外可以通过import引入图片，在data中定义引用，如：
   <img :src="img" alt="" />
   <script>
    import img from "@/assets/home/404.png";
    export default {
      data() {
        return {
          img: img,
        };
      },
    };
  </script>