# H5通用模板

**Repository Path**: NanChen042/template-h5

## Basic Information

- **Project Name**: H5通用模板
- **Description**: 护理宣教H5
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-25
- **Last Updated**: 2024-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description: 
 * @Author: Southern Wind
 * @Date: 2024-02-25 19:12:17
 * @LastEditTime: 2024-02-27 21:25:51
 * @FilePath: \huashanh5\README.md
-->
# H5端Vue 3 + TypeScript + Vite + Tailwindcss + postcss模板 + Router + Axios + Less
**新建文件注意事项
如果你是从头开始创建，可以会遇到以下的疑问，这里一一给出答复，如果你是直接使用此模板则跳过此篇文档即可。**

## 找不到模块“path”或其相应的类型声明 或@符号找不到路径

```ts
pnpm install --save-dev @types/node
```
找到vite.config.ts文件，在顶部引入path并配置以下代码
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'     
 
const pathResolve = (dir: string): any => {  
  return resolve(__dirname, ".", dir)          
}
 
const alias: Record<string, string> = {
  '@': pathResolve("src")

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { 
    alias    
  }        
})
```

在tsconfig.json文件中配置以下代码
```ts
"compilerOptions": {
	//几个常用配置自己可以参考添加
    "outDir": "./dist", // 指定输出目录
    "alwaysStrict": true, // 在代码中注入'use strict'
    ......
	//添加如下信息
    "baseUrl": "./",	// 解析非相对模块的基地址，默认是当前目录
    "paths": {"@/*": ["src/*"]}	// 路径映射，相对于baseUrl
  },
```



## 适配方案
### postcss-pxtorem插件
```ts
pnpm install postcss-pxtorem
pnpm install postcss postcss-pxtorem --save-dev
```

### amfe-flexible插件
设置基准值


```ts
pnpm i -S amfe-flexible

```

## 安装 TailwindCss
```ts
pnpm install -D tailwindcss postcss autoprefixer
```

### 1.2 创建配置文件 / tailwind.config.js 
```ts
npx tailwindcss init
```
需要将后缀js改为cjs
![alt text](assets/README/image.png)


### 1.3 tailwind.config.cjs 文件内容:
```ts
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

### 1.4 在项目src/styles/目录下建一个tailwind.css文件（根据自己项目创建文件即可）
在 src/assets/style.css 文件中，使用 @import 导入 TailwindCSS 和其他 CSS 文件：
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* 其他 CSS 文件的导入 */
```
main.ts中引入
```ts
import './assets/style.css'
```

### 1.5 postcss.config.cjs中引入以下代码
```TS
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```
如果不使用rem的话可以直接跳过以下配置，如果是只针对手机版用rem中样式的话继续往下看。


## 安装postcss-pxtorem和lib-flexible 
```ts
pnpm install postcss postcss-pxtorem --save-dev  
```


```ts
pnpm i -S amfe-flexible 
```

main.ts中引入amfe-flexible
```
import 'amfe-flexible'
```




postcss.config.cjs
```ts
module.exports ={
    'plugins': {
      tailwindcss: {},
      autoprefixer: {},

      'postcss-pxtorem': {
        rootValue({ file }) {
          return file.indexOf('vant') !== -1 ? 37.5 : 75;
        },
        propList: ['*'],
        // exclude: /node_modules/i
      }
     /*  'postcss-pxtorem': {
        rootValue: 75,
        propList: ['*'],
      }, */
    }
}
```



这里注意一下`tailwindcss`会和`postcss-pxtorem`冲突，需要修改`postcss-pxtorem`的配置，无法在vite.config.ts中设置rem
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import postcssImport from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 这里无需设置
/*   css: {
    postcss: {
      plugins: [
        postcssImport({
          // 这里的rootValue就是你的设计稿大小
          rootValue: 75,
          propList: ['*'],
        })
      ]
    }
  }, */

  resolve: {
  }
})

```

需要在postcss.config.cjs中设置设计搞大小


后续还会更新。。。

## 安装less、less-loader、axios以及router

#### 安装less、less-loader
```ts
pnpm install less less-loader --save-dev
```

#### 安装router
```ts
pnpm install vue-router@next --save // 安装最新版本router
 
// 如需按版本安装，需将命令行中 next 改成相应的版本。如下：
// pnpm install vue-router@4.0.13 --save
```

src下新增router文件夹并在其中创建index.ts，内容如下：
```ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Index from '@/views/Index/index.vue';

// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/", // 默认路由 home页面
    component:Index,
  },
 
];
// 2.返回一个 router 实列，为函数，配置 history 模式
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
// 3.导出路由   去 main.ts 注册 router.ts
export default router
```

新增views文件夹并在其中创建Index文件夹并在其中创建index.vue。
![alt text](assets/README/image-1.png)

main.ts引入router
```ts
import { createApp } from 'vue'

import './assets/style.css'
import 'vant/lib/index.css';
import App from './App.vue'
import 'amfe-flexible'
// router
import router from './router'

import { Button } from 'vant';
const app = createApp(App);

// 使用router
app.use(router).use(Button).mount('#app')

```

## 封装axios
[可以先参考这篇博主的封装案例](https://juejin.cn/post/7036341194716086279?searchId=20240227202957577CB238266C4F02EF87#heading-0)