人生第一篇博客（taro实战适合初学者）

最新推荐文章于 2025-10-24 15:11:32 发布

原创

最新推荐文章于 2025-10-24 15:11:32 发布 · 977 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍使用Taro框架结合Vue进行跨平台应用开发的过程，包括环境搭建、组件使用、功能实现等关键步骤，为初学者提供从入门到实践的全面指南。

一、环境准备

1、安装taro

npm install -g @tarojs/cli

yarn global add @tarojs/cli

cnpm install -g @tarojs/cli

2、项目初始化

taro init myApp

原教程：Taro官网

到了这里我们已经完成了前期准备。

二、了解组件

1、在Taro中无法使用html中的标签，只能使用Taro自带的组件库。

2、Taro中的基础标签是<View>

3、目前的Taro已支持Vue进行开发

4、使用vue开发想使用Taro自带的组件库可以使用taro-ui-vue

三、学习过程及问题

1、作为一个初学者在我使用过程中遇到问题，第三方插件可能有的taro无法编译发生错误，作为一个初学者看到一大堆的红色难免会心里慌慌的。

2、taro微信小程序不能使用html中的组件，只能使用taro的组件库。

3、taro目前的vue的支持程度还算不错。

4、如果组件存在警告问题添加泛型参考

四、创建第一个组件

1、在src目录下创建components文件夹，新建一个index.scss作为新的样式表，新建TopNav.tsx作为组件。

# components/index.scss
.movie{
    display: flex;
    flex-wrap: wrap;
    width: 750px;
    padding-top: 50px;
    .movie-item{
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        font-size: 30px;
        width: 250px;
        .movie-image{
            width: 240px;
            height: 360px;
            box-shadow: 5px 5px 5px 5px #A5A5A5;
            border-radius: 20px;
        }
    }
}
#fixd{
    background-color: purple;
    padding: 20px 0;
    width: 750px;
    position: fixed;
    display: flex;
    z-index: 20;
    justify-content: center;
    // padding-top: 200px;
    #top{
        display: flex;
        justify-content: space-between;
        width: 650px;
        font-s