# vue-cli3-vant

**Repository Path**: http_git.oschina.net/vue-cli3-camp

## Basic Information

- **Project Name**: vue-cli3-vant
- **Description**: 1.采用composition-api方式开发一个移动端项目(vue-next)，即vue-cli4.0,vuex4.0,vue-router4.0，mock,vant
2.使用proxy代替observe.defineProperty
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-06-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cli-camp

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Run your tests

```
npm run test
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## https://github.com/shengxinjing/vue3-vs-vue2

## vue3 快的体现

## 模仿大圣老师的课程

a.proxy 取代 Object.defineProperty
b.vdom 的静态标记
c.

## prettier版本不能过高

# 功能点

### 移动端适配
本框架默认使用`px`转`vw`来进行移动端适配，已配置完成。如果需要将`px`转换为`rem`,请参考`docs`目录下面的文档说明

### 路由缓存
在开发移动端项目的时候，我们经常会有这样的需求，比如一个列表页跳转到详情页，这时候我们希望列表页可以`keep-alive`,但是如果详情页返回到列表页，详情页不需要`keep-alive`，本框架已集成了路由缓存，不需要再做任何配置。

### 内置装饰器
有些场景使用装饰器比在代码里面硬编码显得更简单，比如防抖节流，确认提示等等，当前框架内置了一小部分装饰器，更多装饰器正在完善中

### gzip打包压缩代码
 通过配置压缩工具，可以在`build`的时候，自动将静态资源压缩为`gz`文件，当部署的服务器启用`gzip`功能后，将会自动加载压缩的文件，提高加载速度

### 自动删除`console.log`
 一般在调试程序时，需要通过`console.log`来调试，但是发布到线上后，一般并不需要这些`console.log`，如果手动删除太麻烦了，所以配置了自动删除`console.log`功能

### 二次封装`axios`
本框架对`axios`进行了二次封装，使用时只需要调整一下`token`获取方式，封装文件位置在 `src/utils/request.js`

### 日期工具类
本框架对常用的日期工具类进行了封装，方便开发时使用，不需要重复造轮子

### 代码规范

本框架内部集成了`eslint`与`stylelint`，全方位的去管控代码规范，为了方便使用，建议使用开发工具如 `vscode` 时需要安装`eslint`与`stylelint`插件

### 提交规范

虽然定义了`eslint`和`stylelint`，但是假如在提交代码时不去校验，那么也无法有效的限制，所以定义了提交规范，在提交时会自动校验代码格式，并自动格式化。

同时，对于提交，也添加了`commitlint`，提交时需要按照固定的格式进行提交，如 `git commit -m 'feat: 增加了一个新的功能'`，具体可参考`commitlint.config.js`文件内的注释

### `cdn`
如果项目需要使用`cdn`的话，经常会将`cdn`的地址添加到`index.html`文件内，同时要对开发和生产环境进行区分，为了方便开发，框架内将`cdn`提取到了固定的文件内`cdn.js`，在这个文件内可以指定哪些文件使用`cdn`，同时有开关可以直接关闭`cdn`,具体文件在 `config/cdn.js`文件中

### `mock`

我没有使用`mock.js`，在这里作者建议大家使用`yapi` 或 `Doclevel`，框架内有一个目录 `mock`, 在这里可以配置哪些接口走`mock`,哪些不走

### 目录结构
  整个框架目录结构比较完整，基本可以满足常规开发，同时，为了提供功能复用，对于组件，分成了`base`与`components`两个目录，`base`里面放没有业务的基本组件,`components`里面放业务相关的组件，同时`base`目录里面提供了一个`loading`组件，在页面使用时可以直接使用`this.$loading()`调用

### 文档
在开发中，一种功能可能会有多种选择，为了满足大家多种选择的需求，本框架特意添加的文档模块，对存在多种方案配置的内容通过文档的方式记录下来，方便大家切换

## fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。 https://www.cnblogs.com/zhaogaojian/p/11975494.html
## postcss-px-to-viewport 一种是将px转换为rem,另一种是将px转换为vw,在开发项目时，我一般喜欢将px转换为vw,那么如何配置呢
## vConsole是腾讯开发的一个用于调试移动端项目的插件

## https://segmentfault.com/a/1190000022603512?utm_source=tag-newest --- 搭建一个vue-cli4+webpack移动端框架（开箱即用）---参考提示
## https://github.com/youzan/vant-demo ----电商模板
## https://github.com/vue3/vue3-News?utm_source=gold_browser_extension-----Vue3+ & Vue-CLI3+ 开发生态圈资讯

## 遗留问题：1.filter的全局注入 2.plugins文件的全局注入组件，3.vue-loader配置transformAssetUrls加载
## 4.如何使用函数节流:throttle ,目前项目中调用不起来

## 该项目是一个框架，使用vue-cli3.0的最新技术，按照移动模式进行搭建框架