关于初始化taro 和基本配置。

这里开始学习初始化taro 的所有配置和基本信息。
1、官方配置文档太少了，如果需要仔细的内容，还是要去社区里面找。
2、本身用来生成wx小程序，其他比如 H5 之类的，都需要做单独的优化策略。
3、taro支持混编，很神奇的一点。如果碰到优化太差的，不用考虑直接选择写原生的 微信小程序代码
4、先考虑把视频播放处理的做出来。因为这个是首要让我。后端的权限管理已经做好了。现在可以直接调用。
5、如皋碰到需要动态生成的。可以尝试做一些。
6、如果有错欢迎指正

这里是官方链接> https://docs.taro.zone/docs/

首先第一步前端必要的node.js 这里碰到的几个问题
1、taro需要的版本很高，这个是难以避免的。
2、源代码的依赖源需要自己去配置

初始化
1、 npm install -g @tarojs/cli
2、到项目文件夹，控制台 npx @tarojs/cli init myApp
3、开始配置

框架 vue3 其他我不会
typeScript javascript 自己看着用

4、选择模板，先选择初始的。后面开始来配置。
5、等创建好后，进行yarn install
6、完成后，开始进行其他框架配置

├── dist 编译结果目录（需要配置后才是这个目录）
|
├── config 项目编译配置目录
| ├── index.js 默认配置
| ├── dev.js 开发环境配置 config/index.js 中配置nutui
| └── prod.js 生产环境配置
|
├── src 源码目录
| ├── pages 页面文件目录
| | └── index index 页面目录
| | ├── index.js index 页面逻辑
| | ├── index.css index 页面样式
| | └── index.config.js index 页面配置
| |
| ├── app.js(ts) 项目入口文件 启动
| ├── app.css 项目总通用样式
| ├── app.config.js 项目入口配置 这里会配置页面跳转的东西
| └── app.scss （如果使用了scss文件配置，这里也是通用的样式）
|
├── project.config.json 微信小程序项目配置 project.config.json （先配置这个）
├── project.tt.json 抖音小程序项目配置 project.tt.json
├── project.swan.json 百度小程序项目配置 project.swan.json
├── project.qq.json QQ 小程序项目配置 project.qq.json
|
├── babel.config.js Babel 配置
├── tsconfig.json TypeScript 配置
├── .eslintrc ESLint 配置
|
└── package.json

然后UI框架用的是nutui这个这个也是需要配置的

首先是nutui中的官网配置连接 > https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/start

先添加依赖
yarn add @nutui/nutui-taro
yarn add @tarojs/plugin-html
yarn add @nutui/auto-import-resolver unplugin-vue-components -D

然后进行配置
先引入依赖，然后子啊webpackChain 添加依赖

import ComponentsPlugin from 'unplugin-vue-components/webpack'
import NutUIResolver from '@nutui/auto-import-resolver'

const config = {
  // 小程序开发
  mini: {
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(ComponentsPlugin({
        resolvers: [NutUIResolver({taro: true})]
      }))
    },
  },
  // Taro-H5 开发
  h5: {
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(ComponentsPlugin({
        resolvers: [NutUIResolver({taro: true})]
      }))
    },
  }
}

同时把scss 引入全局css中 同样在config index中

    //引入path 的依赖
    const path = require('path');

    sass: {
        resource: [
            path.resolve(__dirname, '..', 'src/custom_theme.scss')
        ],
        data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
    },

现在开始编译一下看能不能跑起来。然后npm build weapp 编译器应该有。这里是初始化