基于Taro+Taro UI 开发的练手小程序上线了！

 一、安装篇

1、安装Taro， 这个过程就不过多赘述了。官网文档已经写的很清楚了，地址：官方手册

cli 工具安装
首先，你需要使用 npm 或者 yarn 全局安装@tarojs/cli，或者直接使用npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

使用命令创建模板项目

$ taro init myApp

 

 2、安装 Taro UI

cd 到自己创建的项目根目录。

$ cd myApp
$ npm install taro-ui

 3、项目目录

|-config/ 开发环境配置

|-src/ 项目目录

|----images/  存放图片目录

|---- pages/ 项目各模块、页面 

|----utils/  全局封装配置、函数、方法部分 

4、引入Taro UI

由于引用 `node_modules` 的模块，默认不会编译，所以需要额外给 H5 配置 `esnextModules`，在 taro 项目的 `config/index.js` 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}

根据不同的环境可以放在不同的文件中，像这种全局使用的文件，可以直接放在index.js,当然，也可以放在不同的开发环境中，比如我放在dev.js：

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  weapp: {},
  h5: {
    esnextModules: ['taro-ui']
  }
}

5、运行

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

6、  项目预览界面