实践:使用vue-cli搭建一个Vue3-TS的uni-app工程化项目模板(中)

简介: 实践:使用vue-cli搭建一个Vue3-TS的uni-app工程化项目模板(中)

前言


上一期已经搭建了一个初步可用的uni-vue3-ts工程化模板

已经包含了Vue3,TS,Sass,Vant Weapp等特性

本节将为模板接入更多的特性:


  • eslint
  • vuex4
  • mini-axios


eslint


通过接入eslint,可以约束开发人员的编码风格,便于统一一个团队中成员的开发风格

配合vs code中的eslint插件,可以实现自动根据配置的规则进行format


yarn add eslint --dev


然后在package.json中添加脚本


{
  "scripts": {
    "eslint:init": "eslint --init"
  }
}


执行脚本


yarn eslint:init


根据提示,按照个人喜好选择一些特性


网络异常,图片无法展示
|


静静等待一会儿就安装好所有依赖,然后会自动在根目录下生成eslintrc.js配置文件

配置文件内容如下,将plugin:vue/essential改成plugin:vue/vue3-essential


module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
};


添加.eslintignore文件,忽略一些不检查格式的文件或目录


dist


package.json中添加自动lint 指令


{
  "scripts": {
    "lint": "eslint --fix --ext .js,.jsx,.ts,.vue ./src",
  }
}


执行自动lint


yarn lint


vuex


必不可少的状态管理工具


模板中默认依赖的是3.2.0版本,即Vuex3,咱们这里用Vuex4(专为Vue3打造)


yarn add vuex@next --save


下面编写一个实际的demo来测试


目录结构


首先在src下创建store目录


采用模块化的方式,将同一业务/页面的 store 存在同一个namespace

目录结构如下:


src/store
├── index.ts
└── modules
   └── test.ts


每个模块都存放在modules中


通过index.ts将这些模块引入,然后统一对外导出


示例模块编写


包含 state,getters,mutations,actions四个部分

使用TS编写的化能够获得非常友好的编写提示

src/store/modules/test.ts


import { Module } from 'vuex';
interface State {
  count: number;
}
const store: Module<State, unknown> = {
  namespaced: true,
  state() {
    return {
      count: 0,
    };
  },
  getters: {
    isEven(state) {
      return state.count % 2 === 0;
    },
  },
  // 只能同步
  mutations: {
    increase(state, num = 1) {
      state.count += num;
    },
    decrease(state) {
      state.count -= 1;
    },
  },
  // 支持异步,可以考虑引入API
  actions: {
    increase(context, payload) {
      setTimeout(() => {
        context.commit('increase', payload);
      }, 1000);
    },
  },
};
export default store;


示例模块的使用


在store/index.ts文件中统一引入上述定义的store模块,并通过createStore创建store实例


src/store/index.ts


import { createStore } from 'vuex';
import test from './modules/test';
// Create a new store instance.
const store = createStore({
  modules: {
    m1: test,
  },
});
export default store;


main.ts中直接使用这个 store 即可


import { createApp } from 'vue';
import App from './App.vue';
// 引入store
import store from './store/index';
const app = createApp(App);
// 在Vue上注册
app.use(store);
app.mount('#app');


示例组件编写


利用上面编写的 modules/test store模块编写一个组件调用

代码中的m1,是上面store/index.ts在引入的时候设置的别名

组件如下src/components/VuexDemo.vue


<template>
  <view class="vuex-demo">
    <text>{{ count }} --- 偶数 {{ isEven ? 'yes' : 'no' }}</text>
    <view>
      <view><button @click="synIncrease">同步增加</button></view>
      <view><button @click="asyncIncrease">异步增加</button></view>
    </view>
  </view>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  setup() {
    const $store = useStore();
    // 获取state
    const count = computed(() => $store.state.m1.count);
    // 获取getters
    const isEven = computed(() => $store.getters['m1/isEven']);
    // 调用同步方法(mutations)
    const synIncrease = () => $store.commit('m1/increase');
    // 调用异步方法(actions)
    const asyncIncrease = () => $store.dispatch('m1/increase');
    return {
      count,
      isEven,
      synIncrease,
      asyncIncrease,
    };
  },
});
</script>
<style>
.vuex-demo {
  text-align: center;
}
</style>


效果


网络异常,图片无法展示
|


Axios


由于axios只兼容Node与Web两端,在uni-app中无法直接使用,uni-app 收口的网络请求方法是 uni.request


调研找到一个根据Axios API风格,封装的uni-app可用的请求库axios-miniprogram

这里限制一下版本,经测试最新的版本还存在一些小问题,无法正常使用


yarn add axios-miniprogram@1.3.0


下面介绍一下封装这个库的过程


目录结构


在 src 下创建 api 目录,在 api 目录下创建 http.ts,index.ts,modules


src/api
├── http.ts     # 封装的调用方法
├── index.ts    # 对外统一暴露各个业务模块的接口调用方法
└── modules
   └── user.ts    # user模块的接口调用方法


http.ts


其中请求的baseURL通过环境变量配置文件(.env)注入

.env


VUE_APP_AXIOS_BASEURL=http://localhost:3000


为axios注册请求/响应拦截器,设置默认请求头


在请求拦截器中添加鉴权身份令牌,响应拦截器中根据返回的状态做进一步处理(统一的警告弹窗,权限校验)


import axios from 'axios-miniprogram';
const http = axios;
// 请求base路径
http.defaults.baseURL = process.env.AXIOS_BASEURL;
http.defaults.headers = {
  'content-Type': 'application/json',
};
http.interceptors.request.use(
  (config) => {
    // 所有请求都携带token
    Object.assign(config.headers, {
      token: uni.getStorageSync('token'),
    });
    // 发送之前操作config
    return config;
  },
  (err) => {
    if (err.status !== 200) {
      // 处理错误
    }
    return Promise.reject(err);
  },
);
/**
 * 响应拦截
 */
http.interceptors.response.use(
  (response: any) => {
    // 对拿到的数据做一些额外操作操作 (如无权限,直接跳转首页)
    const { code, msg } = response.data;
    if (code !== 0) {
      if (msg) {
        uni.showToast({
          title: msg,
        });
      }
      // 走catch逻辑
      return Promise.reject(response.data);
    }
    // 返回前操作
    return response.data;
  },
  (err) => Promise.reject(err),
);
export default http;


接口模块化


modules目录下主要编写各个业务模块请求方法

例如modules/user.ts


import http from '../http';
function login(account: string, pwd: string) {
  return http.post('user/login', {
    account,
    pwd,
  });
}
export default {
  login,
};


通过api/index.ts统一对业务方暴露


export { default as userApi } from './modules/user';

业务调用


<script lang="ts">
import { defineComponent } from 'vue';
import { userApi } from '@/api';
export default defineComponent({
  setup() {
    const handleHttp = () => {
      userApi.login('account', '123456')
        .then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        });
    };
    return {
      handleHttp,
    };
  },
});
</script>


未完待续


  • tailwindcss
  • less
  • 其余成熟UI库
  • 。。。and more


资料汇总


相关文章
|
9天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
103 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
9天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6天前
|
数据管理 数据库 数据安全/隐私保护
Django—同一项目不同app使用不同数据库
在Django项目中实现不同app使用不同数据库的配置,可以通过配置多数据库、创建数据库路由和配置路由来实现。通过这种方法,可以有效地将数据隔离到不同的数据库,提高数据管理的灵活性和系统的可扩展性。希望本文能为开发者在Django项目中使用多数据库提供清晰的指导。
15 4
|
2天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
7天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
43 1
|
7天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
12 0
|
1月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
88 8
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。

热门文章

最新文章