Taro 开发日记-2 添加taro-ui库&修改基础配置

上一篇

上次好像漏了

执行之后 选择选项

taro init
# 依次选择
# ? 请输入项目名称！ myDaliyList
# ? 请输入项目介绍！ 我的日记本
# ? 是否需要使用 TypeScript ？ Yes
# ? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
# ? 请选择模板 redux

使用 taro-ui

安装 taro-ui

npm install taro-ui

安装完成之后按照官方说明需要给h5配置H5 配置 `esnextModules`

# 文件 config/index.js 添加
h5: {
  esnextModules: ['taro-ui']
}

添加完成之后,执行命令:

npm run dev:h5 

然后 就报错了 😭

# 找不到模块 uglifyjs-webpack-plugin
UnhandledPromiseRejectionWarning: Error: Cannot find module 'uglifyjs-webpack-plugin'

一般这种问题懒得想的话,就缺什么装什么,所以:

# 安装uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin
# 安装完成之后再执行
npm run dev:h5
# 以下是输出内容
创建  发现文件  src\app.scss
创建  发现文件  src\app.tsx
创建  发现文件  src\index.html
创建  发现文件  src\store\counter.ts
创建  发现文件  src\pages\index\index.scss
创建  发现文件  src\pages\index\index.tsx

ℹ️  Listening at http://0.0.0.0:10086/

监听文件修改中...

✅  Compiled successfully!

这样就正常执行成功了 访问http://127.0.0.1:10086/可以看到

引入全局样式

# src/app.tsx 下全局添加样式
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

在页面中测试使用

# src/pages/index/index.tsx引入组件 
import { AtButton } from 'taro-ui';

使用组件

render() {
    const { counterStore: { counter } } = this.props;
    return (
        <View className="index">
            <AtButton type="primary" size="small" onClick={this.increment}>
                +
            </AtButton>
            <AtButton type="secondary" size="normal" onClick={this.decrement}>
                -
            </AtButton>
            <AtButton onClick={this.incrementAsync}>Add Async</AtButton>
            <Text>{counter}</Text>
        </View>
    );
}

页面显示出组件效果,则说明引入成功。

修改eslint配置

taro-ui 引入完成之后发现代码有很多地方标红,鼠标移上去可以发现是eslint的错误提示。
Unexpected separator (;).eslint@typescript-eslint/member-delimiter-style
Unexpected usage of doublequote.eslintjsx-quotes

主要是eslint 的默认配置引起的,这里需要稍微修改一下

修改.eslintrc=>.eslintrc.js

module.exports = {
  extends: ['taro', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? ['warn'] : ['off'], // 生产环境console警告
    'no-unused-vars': [
      'error',
      {
        varsIgnorePattern: 'Taro'
      }
    ],
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx', '.tsx']
      }
    ],
    '@typescript-eslint/no-var-requires': ['warn'],
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        varsIgnorePattern: 'Taro'
      }
    ],
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        // 结尾加分号
        multiline: {
          delimiter: 'semi',
          requireLast: true
        },
        singleline: {
          delimiter: 'semi',
          requireLast: false
        }
      }
    ],
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-empty-function': ['warn']
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    useJSXTextNode: true,
    project: './tsconfig.json'
  }
};

添加.prettierrc 这里使用的格式化插件是Prettie

{
  "jsxSingleQuote": true,
  "singleQuote": true
}

附:react 建议的组件class顺序

• Ordering forclass extends React.Component:

1. optionalstaticmethods
2. constructor
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. _clickHandlers or eventHandlers_likeonClickSubmit()oronChangeDescription()
12. _getter methods forrender_likegetSelectReason()orgetFooterContent()
13. _optional render methods_likerenderNavigation()orrenderProfilePicture()
14. render