Taro3+Vue3.0做实战项目的总结和方法_taro vue3

前言

技术栈：

• Taro3.0
• Vue3.0
• Pinia
• nutUI

功能点：

• nutUI按需引入定制化和抽离
• http封装以及如何全局使用，多人协同开发
• 劫持生命周期做路由的鉴权/对路由跳转的二次封装
• setup语法糖的使用
• 阿里iconfont在项目中的使用
• 分包，主包太大开启压缩

首先创建项目我们一定要使用稳定的版本

npm info @tarojs/cli 
1

我这里使用的是V3.4.7，初始化项目吧，没啥可说的,我这里初始化的时候选择nutUi的模板，或者你可以创建完手动安装yarn add @nutui/nutui-taro/cnpm i @nutui/nutui-taro -S

一、 nutUI的按需引入

需要借助babel-plugin-import ，这是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。

cnpm install babel-plugin-import --save-dev 
或者
yarn add babel-plugin-import -D 
1
2
3

babel.config.js文件

plugins: [["import",{"libraryName": "@nutui/nutui","libraryDirectory": "dist/packages/_es","camel2DashComponentName": false},'nutui3-vue'],["import",{"libraryName": "@nutui/nutui-taro","libraryDirectory": "dist/packages/_es","camel2DashComponentName": false},'nutui3-taro']] 
1

二、nutUi的颜色自定义

在assets的文件内创建theme.scss文件

<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78443e40e9a3463793a42515db1c4e87~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 具体的颜色属性可以参考：[github.com/jdf2e/nutui…](https://link.juejin.cn/?target=url “url”” style=“margin: auto” />

在config/index.js中

const {resolve}=require('path');
sass: {// 默认京东 APP 10.0主题 > @import "@nutui/nutui/dist/styles/variables.scss";// 京东科技主题 > @import "@nutui/nutui/dist/styles/variables-jdt.scss";// additionalData: `@import "@/assets/theme.scss";`resource: [resolve(__dirname, '..', 'src/assets/theme.scss') // 预加载自定义的主题scss],data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`}, 
1
2

在app.js中

import { createApp } from 'vue' 
import { Button } from '@nutui/nutui-taro' 
const app = createApp();
app.use(Button); 
1
2
3
4

定制样式效