# Vue项目初始化模板（PC端）

**Repository Path**: yangxiukun/vue-init

## Basic Information

- **Project Name**: Vue项目初始化模板（PC端）
- **Description**: vue + vue cli 3 + iview 项目初始化模板（PC端）。
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2022-08-18
- **Last Updated**: 2022-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue项目初始化模板

## 项目介绍

vue + vue cli 3 + iview 项目初始化模板（PC端）。  

（主要用途是为了每次新建项目时，不需要重新用脚手架生成，重新配置项目，并将常用的配置写好，可以直接使用。）

主要配置：
- 设置网页标题
- 全局引用axios
- 引用并配置postcss-px2rem-exclude
- 引用sass全局文件
- 引用字体文件
- 全局过滤器
- 全局防抖，节流
- 全局请求拦截
- 可选链
- 打包去掉console.log
- lodash
- iview
- vue-router
- vuex
- moment

## 项目版本

### V1.0.0

初始化模板的第一个版本。

### V2.0.0

初始化模板的第二个版本。  

主要是放弃继续优化深拷贝函数，项目引入lodash，将原来的工具库改为cookie.js。

### V3.0.0

初始化模板的第三个版本。 

修复第三方库样式错误问题，加入打包去掉console.log功能。   


## 依赖环境
node@12.8.0

## 项目操作

### 初始化
```
npm install
```

### 启动服务
```
npm run serve
```

### 打包
```
npm run build
```

## 项目结构

- public
    - css   （放置公共css文件）
    - font  （放置字体文件）
- src
    - assets 
        - css   （放置scss公共文件）
        - js    （放置常用的js）
            - axios.js  （全局请求拦截）
            - filter.js （全局过滤器）
            - cookie.js   （cookie函数封装）
- vue.config.js （webpack配置）

## 项目日志

### 2021.03.09

完成项目配置。

### 2021.03.10

测试项目配置的是否成功。  

发现全局防抖处理有点问题，Vue.prototype.$on只能接收到组件上的事件，因为组件里是通过$emit发送事件的，$on才能接收到。  

全局防抖不生效的可以考虑单独引入防抖函数。 

### 2021.06.18

优化深拷贝函数。 

### 2021.07.02

放弃继续优化深拷贝函数，因为需要考虑的问题太多了，导致写的深拷贝函数总是有问题。  

准备在V2.0.0版本中直接使用lodash插件。

### 2022.04.22

发现node版本过高，npm i会失败，主要是node-sass会出问题。。。  
如果报错，建议使用node@12.8.0的版本。  
后期我会再弄个vue3+ts的初始化项目，到时候就用less算了，感觉sass总是有问题，而且明明叫sass，结果使用时后缀是scss，强迫症忍不了。 

### 2022.04.25

"postcss-px2rem" 会把第三方库的px转换成rem，导致第三方库样式出现问题。  
这个问题是最近我在写vue2 + vant的移动端框架发现的，之后也要再写一个移动端框架的初始化，上面这个问题，一般pc端没啥问题，移动端注意下就行，解决方法可以这篇博客 https://blog.csdn.net/AK852369/article/details/105843245 。  

经过测试，pc端不考虑响应式 font-size: -webkit-calc(100vw / 7.5); 的话，基本上没啥问题。  
但是这边还是优化下，将postcss-px2rem换成postcss-px2rem-exclude。  

加入打包去掉console.log的插件 terser-webpack-plugin 。 
参考博客 https://blog.csdn.net/sinat_32017511/article/details/115936167  
 
### 2022.05.17

优化全局防抖，修改成全局指令防抖。