-
-
-
-
-
-```
-
-[▲ 回顶部](#top)
-
-### ✅ 多 UI 组件库供选择
-
-Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
-
-#### 安装插件
-
-```bash
-yarn add vite-plugin-style-import -D
-yarn add unplugin-vue-components/vite -D
-```
-
-#### 使用组件库
-
-nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载
-
-在 `config/vite/plugins/styleImport.ts` 设置
-
-```javascript
- // 按需加载样式文件
- ...
- createStyleImportPlugin({
- resolves: [NutuiResolve()],
- }),
- ...
-```
-
-项目在 `src/plugins/nutUI.ts` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
-
-```javascript
-// 按需全局引入nutUI组件
-import Vue from 'vue';
-import { Button, Cell, CellGroup } from '@nutui/nutui';
-export const nutUiComponents = [Button, Cell, CellGroup];
-
-// 在main.ts文件中引入
-nutUiComponents.forEach((item) => {
- app.use(item);
-});
-```
-
-vant 和 varlet 可以使用组件按需加载
-
-在`config/vite/plugins/component.ts`下
-
-```javascript
-import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
-...
-resolvers: [VantResolver(), VarletUIResolver()],
-...
-```
-
-#### 不需要某个组件库
-
-nutUI 需删除`src/plugins/nutUI.ts`和`main.ts`文件下的引入
-
-vant 和 varlet 只需删除对应的 resolvers 即可
-
-删除后需全局搜索删除不需要的组件，避免报错
-
-[▲ 回顶部](#top)
-
-### ✅ Pinia 状态管理
-
-下一代 vuex，使用极其方便，ts 兼容好
-
-目录结构
-
-```bash
-├── store
-│ ├── modules
-│ │ └── user.js
-│ ├── index.js
-```
-
-使用
-
-```html
-
-```
-
-[▲ 回顶部](#top)
-
-### ✅ Vue-router
-
-本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
-
-**注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改**
-
-前往:[vue.config.js 基础配置](#base)
-
-```javascript
-import Vue from 'vue';
-import { createRouter, createWebHistory, Router } from 'vue-router';
-
-Vue.use(Router);
-export const router = [
- {
- name: 'root',
- path: '/',
- redirect: '/home',
- component: () => import('@/layout/basic/index.vue'),
- },
-];
-
-const router: Router = createRouter({
- history: createWebHistory(),
- routes: routes,
-});
-
-export default router;
-```
-
-更多:[Vue Router](https://router.vuejs.org/zh/introduction.html)
-
-[▲ 回顶部](#top)
-
-### ✅ Axios 封装及接口管理
-
-`utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
-
-- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
-- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
-- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
-
-```javascript
-import axios from 'axios';
-import store from '@/store';
-import { Toast } from 'vant';
-// 根据环境不同引入不同api地址
-import { baseApi } from '@/config';
-// create an axios instance
-const service = axios.create({
- baseURL: baseApi, // url = base api url + request url
- withCredentials: true, // send cookies when cross-domain requests
- timeout: 5000, // request timeout
-});
-
-// request 拦截器 request interceptor
-service.interceptors.request.use(
- (config) => {
- // 不传递默认开启loading
- if (!config.hideloading) {
- // loading
- Toast.loading({
- forbidClick: true,
- });
- }
- if (store.getters.token) {
- config.headers['X-Token'] = '';
- }
- return config;
- },
- (error) => {
- // do something with request error
- console.log(error); // for debug
- return Promise.reject(error);
- },
-);
-// respone拦截器
-service.interceptors.response.use(
- (response) => {
- Toast.clear();
- const res = response.data;
- if (res.status && res.status !== 200) {
- // 登录超时,重新登录
- if (res.status === 401) {
- store.dispatch('FedLogOut').then(() => {
- location.reload();
- });
- }
- return Promise.reject(res || 'error');
- } else {
- return Promise.resolve(res);
- }
- },
- (error) => {
- Toast.clear();
- console.log('err' + error); // for debug
- return Promise.reject(error);
- },
-);
-export default service;
-```
-
-#### 接口管理
-
-在 `src/api` 文件夹下统一管理接口
-
-- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
-- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
-- `method` 请求方法
-- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
-- `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
-
-```javascript
-import qs from 'qs';
-// axios
-import request from '@/utils/request';
-//user api
-
-// 用户信息
-export function getUserInfo(params) {
- return request({
- url: '/user/userinfo',
- method: 'post',
- data: qs.stringify(params),
- hideloading: true, // 隐藏 loading 组件
- });
-}
-```
-
-#### 如何调用
-
-```javascript
-// 请求接口
-import { getUserInfo } from '@/api/user.js';
-
-const params = {
- user: 'sunnie',
-};
-getUserInfo(params)
- .then(() => {})
- .catch(() => {});
-```
-
-[▲ 回顶部](#top)
-
-### ✅ vite.config.ts 基础配置
-
-如果你的 `Vue Router` 模式是 hash
-
-```javascript
-publicPath: './',
-```
-
-如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
-
-```javascript
-publicPath: '/app/',
-```
-
-```javascript
-export default function ({ command }: ConfigEnv): UserConfigExport {
- const isProduction = command === 'build';
- return {
- server: {
- host: '0.0.0.0',
- },
- plugins: [
- vue(),
- vueJsx(),
- createStyleImportPlugin({
- resolves: [NutuiResolve()],
- }),
- eruda(),
- viteMockServe({
- mockPath: './src/mock',
- localEnabled: command === 'serve',
- logger: true,
- }),
- ],
- css: {
- preprocessorOptions: {
- scss: {
- // 配置 nutui 全局 scss 变量
- additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`,
- },
- },
- },
- };
-}
-```
-
-[▲ 回顶部](#top)
-
-### ✅ 配置 alias 别名
-
-```javascript
-resolve: {
- alias: [{
- find: 'vue-i18n',
- replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
- },
- // /@/xxxx => src/xxxx
- {
- find: /\/@\//,
- replacement: pathResolve('src') + '/',
- },
- // /#/xxxx => types/xxxx
- {
- find: /\/#\//,
- replacement: pathResolve('types') + '/',
- },
- ],
-},
-```
-
-[▲ 回顶部](#top)
-
-### ✅ 配置 proxy 跨域
-
-```javascript
-server: {
- proxy: {
- '/api': {
- target: 'https://baidu.com',
- changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, '')
- }
- }
-},
-```
-
-[▲ 回顶部](#top)
-
-### ✅ Eslint+Pettier+stylelint 统 ˜ 开发规范
-
-根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
+详细的文档请[点击](https://sunniejs.github.io/vue-h5-template/)查看
# 关于我