# micro-project

**Repository Path**: fslfsl/micro-project

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-07
- **Last Updated**: 2022-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明

## 安装依赖

```shell
npm run bootstrap
```

## 启动项目

```shell
npm run start
# or
npm run serve
# or
npm run dev
```

## package.json 中 scripts 说明

```json5
{
  // 启动项目
  dev: 'vue-cli-service serve',
  // 打包预览项目（适用于开发阶段）
  'dev:preview': 'vue-cli-service build --mode=preview --IS_OPEN_PREVIEW_PLUGIN',
  // 开发模式下调试测试环境
  'dev:test': 'cross-env NODE_ENV=development vue-cli-service --mode=test',
  // 开发环境下调试生产环境
  'dev:pro': 'cross-env NODE_ENV=development vue-cli-service --mode=development',
  // 未使用预发环境可忽略
  'build:preview': 'vue-cli-service build --mode=preview',
  // 打包测试环境
  'build:test': 'vue-cli-service build --mode=test',
  // 打包生产环境
  'build:pro': 'vue-cli-service build',
  // 对项目进行格式化
  lint: 'vue-cli-service lint'
}
```

## 项目用到的相关技术

### 使用了 [vue3](https://v3.cn.vuejs.org/) 作为基础框架

### 集成了对 jsx 的支持

vue3 有更好的 Tree shaking，即剔除无用的代码，只打包我们用到的代码，故不在需要像 vue2 中全量引入，我们也不必在单独抽离成 cdn 文件。

### 使用了 [axios](https://axios-http.com/) 作为请求库

在生产环境下会被处理成 cdn 的方式进行加载。

### 使用了 [ant-design-vue3](https://next.antdv.com/docs/vue/introduce-cn/) 作为基础 ui

ant-design-vue 使用了按需加载，此处使用的版本是 3.0 版本，目前处于 3.0.0-alpha.10 版本，此版本对比 2 版本，全部使用 setup+ts 语法重写，而 2.0 可以看成在 1.0 版本的基础上做了 vue3 的适配，v3 更轻量，性能更好，对齐 ant-design-react4.0，移除 v2 和 v1 出一些 ant-design-react 中存在的影子。

后续可根据官方文档进行升级。

### 使用了 [qs](https://github.com/ljharb/qs) 库处理 url 参数

在生产环境下会被处理成 cdn 的方式进行加载

### 使用了 [lodash-es](https://www.lodashjs.com/)

lodash-es，基础 es module，有更好的 Tree shaking，提供了一系列开发中能用到的工具函数。

### 使用了 [tailwindcss](https://tailwindcss.com) 辅助编写 css

**安装** `npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9`

对应的`tailwind.config.js`是这个 css 框架的配置文件，需要初始化，具体配置可查阅官方文档，此项目中的配置文件为基本功能。

`tainwildcss`需要借助 postcss 来完成工作，所以需要安装 postcss，对应的 postcss 的配置文件就是`postcss.config.js`，postcss 非常强大，可以在打包时对 css 进行读写改，比如为 css 自动添加各个浏览器厂商前缀，就是通过 postcss 的 autoprefixer 插件来完成的。

安装完成后，需要创建一个 css 文件进行基础定义，内容如下：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

然后在项目的入口文件中引入即可。

webstorm 已经集成了对 tailwindcss 的支持，vscode 需要安装插件：Tailwind CSS IntelliSense（提供了类名预览与提示功能）

此框架如果不需要可以移除，移除只需删除对应安装的包，以及配置文件

> 以上的库都是开发项目中较为好用的库，根据部门项目合理选择（不需要的移除，不满足的新增）

### 使用了 [vueuse](https://vueuse.org/)

VueUse 提供了基于 Composition API 的实用函数集合，帮助我们降低开发难度和提高开发效率。

如果使用 vueuse 出现错误，尝试配置一下选项，重启再试：

```javascript
// vue.config.js
module.exports = {
  // https://github.com/vueuse/vueuse/issues/718
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    }
  }
};
```

### 使用了 dayjs

ant-design-vue 已将 moment 替换到了 dayjs，它非常轻量，且功能强大。

## PS

如果有换行符的问题，请： `git config --global core.autocrlf false`，关闭这个自动转换换行符的功能，让代码风格变得完全自主可控。