我正在参加「掘金·启航计划」

1、前景提示：

原有的小程序项目是用mpvue+vant构建的，当时构建该项目时可选的小程序框架较少，所以相对来说mpvue是不错的选择，但是现在mpvue官网已经停止维护了，时不时项目中也会出现奇怪的问题，定位很耗时，所以就有了重构小程序项目的想法；为什么会选择跨端框架Taro，是因为我们这个项目现在已经有H5端和小程序端，未来可能也会增加其他端，调研之后再结合项目组现有的技术栈最后选择Taro3+Vue3+TS进行项目的重构；

2、重构项目搭建步骤；

1）安装tarojs/cli的环境；

具体参考官网安装教程：taro-docs.jd.com/taro/docs/G…
这里需要注意Taro2和Taro3多版本共存时的解决方案；我这里采用的是官方推荐的：通过安装不同 node 版本来安装不同版本的Taro CLI，从而解决Taro多版本共存的问题；

2）使用Taro命令创建模板项目

官网项目初始化参考教程：taro-docs.jd.com/taro/docs/G…

3）给项目添加开发时的Eslint语法校验和git代码提交时信息校验；

Eslint语法校验的配置
- a、安装eslint相关的插件;
- b、在项目根目录下新建.eslintrc.js文件，文件内容可根据自己项目组的开发规范进行配置；
Commitlint+Husky配置git提交时信息校验，注意：husky4.3.8属于旧版本，新版本和旧版本的配置略有不同；

4）公共样式文件的引入；

可参考官网配置：taro-docs.jd.com/taro/docs/c…
这里我采用的是多文件路径的形式注入全局定义的样式变量值，对于公共的样式类是直接在app.css中引入的；

  sass: {
    resource: ['src/assets/css/mixin.scss'],
    projectDirectory: path.resolve(__dirname, '..')
  },

5）封装请求API，增加全局请求拦截器和响应拦截器；封装公共的Toast提示方法；

这里使用的是flyio，引入教程参考官网：wendux.github.io/dist/#/doc/…
flyio相比于axios会更轻量，集成成本更低；在Node环境下，功能比axios更强，不仅提供了文件下载、上传的API，而且还可以通过 fly.$http直接调用 request 库的所有功能，
在浏览器环境中axios支持通过cancelToken取消请求，而fly不支持请求取消；

6）引入vuex数据状态管理，并对其进行持久化；

vuex的官网安装教程参考：vuex.vuejs.org/zh/guide/；
引入步骤：
a、安装vuex@4.0.2版本，使用vuex-persistedstate@4.1.0插件对其进行持久化；
b、在项目根目录下新建store文件夹，在index.ts中导出store对象，这里的store对象是通过createStore()方法创建的，和vue2中有所不同；

// index.ts文件内容：

import Taro from '@tarojs/taro'
import { createStore, createLogger } from 'vuex'
import createPersistedState from "vuex-persistedstate"
// 引入./modules文件夹下所有的.ts文件；
// 使用node中的require.context()直接对某个文件夹下面的所有.ts文件进行引入，这样就不用每次新增一个module模块都需要import注册一遍；
const files = require.context('./modules', false, /.+\.ts$/)
const modules = files.keys().reduce((pre, cur) => ({ ...pre, [cur.replace(/(\.\/|\.ts)/g, '')]: files(cur).default }), {})
const debug = process.env.NODE_ENV === 'production'
// 持久化vuex信息
const createState = (paths: Array<string> = []) => createPersistedState({
  key: 'xxxx-key',
  paths,
  storage: {
    getItem: key => Taro.getStorageSync(key),
    setItem: (key, value) => Taro.setStorageSync(key, value)
  }
})
const paths = ['userInfo']
const store = createStore({
  modules,
  plugins: !debug ? [createLogger(), createState(paths)] : [createState(paths)]
})
export default store

c、在app.ts中将store实例对象作为插件安装：

import store from './store'
const App = createApp({...})
App.use(store)

7）对接小程序的登录流程；

小程序登录流程图可参考：developers.weixin.qq.com/miniprogram…
a、通过Taro.login()获取到微信登录凭证code，
b、调用后端服务的登录接口并将登录凭证code作为参数传递，将接口返回的信息加入缓存，
c、根据后端接口返回的信息值做对应的提示和跳转处理；

8）按需引入项目的UI框架，NutUI3.0；

taroUI2版本和taro3的版本不兼容；taroUI3还在开发中；并且taro官方推荐Vue3使用NutUI3.0进行开发；所以最后选择NutUI3.0作为UI开发框架；
按需引入步骤： 可参考官网引入教程：nutui.jd.com/#/zh-CN/gui…
a、安装@nutui/nutui-taro；npm i @nutui/nutui-taro
b、我使用的是webpack构建工具，所以需要安装babel-plugin-import插件来实现按需加载组件，它会在编译的过程中将import语句自动转为按需引入的方式；
c、在babel.config.js文件中添加plugins配置项；
d、在配置文件config/index.js中将nutui样式变量全局导入；

 sass: {
    ...
    data: '@import "@nutui/nutui-taro/dist/styles/variables.scss";',
 },

e、新建一个nutui.ts的文件，在其中引入要使用的nutui组件，并将这些组件导出，然后在app.ts文件中注册；这样后续引入新的nutui组件时，无需修改app.ts的文件内容，只需在nutui.ts文件中引入即可；

    // nutui.ts文件内容：
    import { NoticeBar} from "@nutui/nutui-taro";
    export default {
      NoticeBar
    }
    
    // app.ts文件部分内容
    import NutUI from '@/plugins/nutui'
    ....
    // 按需引入NutUi中的组件
    for (const key in NutUI) {
      App.use(NutUI[key])
    }

项目搭建到这里差不多就可以进行业务模块的迁移开发了，后续会再写一篇记录项目迁移过程中遇到的问题和解决的方法；

使用Taro3+Vue3重构Mpvue小程序项目