92 lines
1.9 KiB
Markdown
92 lines
1.9 KiB
Markdown
# vue3-template-h5
|
||
|
||
vue3-template-h5
|
||
|
||
## 安装
|
||
|
||
```
|
||
npm install
|
||
```
|
||
|
||
## 运行
|
||
|
||
```
|
||
npm run serve:test //本地运行，并且代理到测试环境
|
||
npm run serve:uat //本地运行，并且代理到预发布环境
|
||
npm run serve //本地运行，并且代理到生产环境
|
||
```
|
||
|
||
## 打包
|
||
|
||
```
|
||
// 测试环境
|
||
npm run build:test
|
||
|
||
// 预发布环境
|
||
npm run build:uat
|
||
|
||
// 生产环境
|
||
npm run build
|
||
```
|
||
|
||
## 说明
|
||
|
||
项目采用vue3.0 + vite搭建，组件库默认引入了vant，状态管理使用pinia。
|
||
使用vw适配方案，默认375宽度，可在vite.config.ts里配置更改默认宽度。
|
||
|
||
## 常见问题
|
||
|
||
### 环境变量
|
||
|
||
环境变量放在env目录下，.env文件必定会加载，mode=test时，.env.test会加载，变量优先级，.env.test > .env ，因此，相同变量名，.env里的会被忽略。
|
||
|
||
### 按需引入组件
|
||
|
||
项目使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式，无需手动引入样式。
|
||
|
||
```JS
|
||
import {
|
||
Button
|
||
} from 'vant';
|
||
```
|
||
|
||
### 引入函数组件的样式
|
||
|
||
Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 等组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。
|
||
|
||
```JS
|
||
// Toast
|
||
import {
|
||
showToast
|
||
} from 'vant';
|
||
import 'vant/es/toast/style';
|
||
|
||
// Dialog
|
||
import {
|
||
showDialog
|
||
} from 'vant';
|
||
import 'vant/es/dialog/style';
|
||
|
||
// Notify
|
||
import {
|
||
showNotify
|
||
} from 'vant';
|
||
import 'vant/es/notify/style';
|
||
|
||
// ImagePreview
|
||
import {
|
||
showImagePreview
|
||
} from 'vant';
|
||
import 'vant/es/image-preview/style';
|
||
```
|
||
|
||
### 本地代理
|
||
|
||
运行项目时的接口代理，可在 vite.util.ts 的 proxyConfig 方法中配置。
|
||
|
||
## 相关文档
|
||
|
||
[vue3.0 文档](https://cn.vuejs.org/guide/quick-start.html).
|
||
[vite 文档](https://vitejs.cn/).
|
||
[vant 文档](https://vant-contrib.gitee.io/vant/#/zh-CN/).
|