# vite+vue3基本模板

**Repository Path**: fen-xin/vite-vue3-basic-template

## Basic Information

- **Project Name**: vite+vue3基本模板
- **Description**: 基于vite+Vue3.x+eslint+prettierrc语法检测及保存时进行自动格式化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-19
- **Last Updated**: 2022-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 文件夹的一些说明

- src/
  - api 是将接口中的请求接口统一进行封装的文件夹
    - request.js 是基于 promise 进行封装的 axios
    - test.js
  - components 一些自定义的组件
  - layouts 页面布局的文件夹
  - views 这个是视图的文件夹（就是布局页面中要显示的文件）
  - router 路由文件夹
  - store vuex 仓库文件夹
  - utils 封装的一些工具类文件夹
  - pugins 这个是插件的文件夹
    - des.js cryto-js.js jsencrypt.js 这三个是请求数据的加密解密插件
  - APP.js 主页面
  - main.js 主入口进行挂载插件等
- 根目录
  - .pretierrc.js 这个是配置格式化的文件
  - .eslintrc.js 配置 eslint 检查代码语法的配置文件
  - .gitignore 这个文件是上传 git 时进行配置需要过滤的文件
  - public 静态文件，一般是存放压缩过的文件
  - .env 这个是环境变量，在生产，测试，开发中都会使用的文件，可配置公共的路径等
  - .env.development 这个是配置开发环境的一些接口路径等文件
  - envproduction 这个是配置生产环境的一些接口路径等文件
  - vite.config.js 进行配置整个项目的一些参数等的文件夹（如：别名，公共路径等）
  - mock 是 mockjs 的请求模拟数据
  - .browserslistrc 是浏览器的版本兼容限制

### 代码的基本规范

- 标签的使用，尽量使用带有与异化的标签
- css 类名，基本页面布局使用当前的组件名简写+‘-’连接，如 login 登录页面 l-wrap 等，
- 组件名： 使用多个单词使用-进行连接，或者是多个单词的大驼峰写法。如 todo-item,TodoItem，这里声明组件名的时候统一使用大驼峰的写法如：MyComponent.vue
- props: 接收父组件传递的参数的时候，一般尽量不要使用数组的方式进行接收，推荐使用对象的形式，给参数加上类型的校验
- props 传递参数的命名：组件上使用羊肉串的写法，接收的时候使用小驼峰的写法

```
<my-component red-message='爆红信息'></my-component>
props:{
    redMessage: String
}
```

- emits: 使用父子组件通信的时候，要在 emits 属性中写上事件名，可以使用数组的形式，也可以使用对象的形式进行校验

```
父组件：
<my-component @myEvent='myEvent'></my-component>
子组件：
emits:['myEvent'],
methods:{
    toParent(){
        this.$emit('myEvnet)
    }
}
或：
emits:['myEvent'],
setup(props,{emit}){
    const toParent = ()=>{emit('myEvent')}

    return {toParent}
}
```

- v-for： 使用循环的时候要加上 key 值，最好不要使用 index 作为 key 值，一般使用 id 或者当前的文本
- v-for 和 v-if：不要一起使用这两个指令，循环要加 v-if 的时候，可以使用计算属性，将条件过滤后，直接循环计算方法就可以了，使用计算属性要记得加上 return

### 使用 element-plus 组件

- 使用 button 等样式组件，直接在页面写就可以自动导入了

```
<el-button type="primary" round >点击提示</el-button>
```

- 使用命令式组件，如 ElMessage 等，需要在当前页面使用 import 进行引入，否则报错

```
<script>
import { ElMessage } from 'element-plus'
export default {
    name:'home',
    components:{

    },
    setup() {
       const mesBtn = () =>{
           console.log('1111');
        ElMessage('this is a message.')
       }
        return{
            mesBtn
        }
    }
}
</script>

```

### 使用 element-puls 中的 icon

- 首先根据官方文档中的下载路径进行下载
- 在复制官方文档中的代码，此时 el-icon 中包裹的标签是需要我们在当前页面中进行引入并且注册的

```
npm install @element-plus/icons-vue
import { Coordinate } from '@element-plus/icons-vue';
 components: {
        Coordinate
    },
 <el-icon>
    <coordinate />//注意这个组件在页面中开头是小写的，注册的时候，首字母要进行大写
 </el-icon>
```

### 使用 element-plus 服务端的 loading 注意事项

- 一般我们在封装 axios 进行接口请求的时候，有个 loading 的显示问题，这里我们直接使用 loading 的组件进行封装，但是有个问题是，它里面的属性 spinner: 'el-icon-loading',这个会导致 loading 图标不进行展示，将这个去掉就可以了

### 使用 scss 的 css 预编译处理器

### 文件别名

- " /@ ": 表示是根目录下的 src 文件下的 components 文件路径

### eslint+pretirrc 代码语法检测及格式化(保存时自动进行格式化)

- 语法如：代码使用单引号的形式进行格式化规范，当不同的开发人员进行开发时，最后输入检测语法的指令，会将有的进行自动修复，有的会进行抱错的形式进行提示

```
    npm run lint-fix 自动进行检测并修复
```

- 主要配置文件在根目录下的.vscode->ettings.json 中进行了配置，但是在 vscode 中进行下载插件 eslint,Prettier - Code formatter

### mitt 这个插件有空可以了解下

- 跟 Vue2.0 中的 bus 兄弟组件传值是类似的，使用 emit 进行传递参数，使用 on 进行监听（接收）参数
- 但是使用 on 的时候，要在当前组件卸载的时候使用 off，取消监听，释放资源

### 深度选择器

```
 > > >

 /deep/

 ::v-deep
```

- 一般我们还是尽量不要使用 scoped，使用当前的页面的简写加-加命名
  - 如：当前页面是首页，取名 home，下面的布局导航，头部等 home-header, home-nav, home-title

### rsa 加解密，只是用一个密钥进行加解密（在 axios 的拦截和响应中进行加解密了）

```
let str = '',
	des_str = '',
	rsa_str = '';
    //加密
    str = randomString(16); // des秘钥
    let encryptor = new JSEncrypt(); // 创建加密对象实例
        //之前ssl生成的公钥，复制的时候要小心不要有空格
        encryptor.setPublicKey(这是公钥); //设置公钥
        const _data = JSON.stringify(当前，前台传递的参数);
        console.log(`请求参数param:--------${_data}`);

        des_str = encryptDes(_data, str); // des加密
        rsa_str = encryptor.encrypt(str); // rsa加密
        //这个是加密 好的参数，请求的时候直接发送这个data就好
        const data = {
            key: rsa_str,
            value: des_str,
        };
    //解密
    const result = JSON.parse(decryptDes(res, str));
```