一、初始化

1、Taro 基本安装并初始化项目

npx @tarojs/cli init WechatAppDemo

-选择框架:vue3

-是否使用ts?y

-请选择css预编译器:无

-请选择webpack:webpack5

-请选择模板源:gitee

-请选择模板:vue3+pinia

2、cd到新项目的文件夹

3、安装依赖:yarn

4、运行预览:

  yarn dev:weapp 或

  set NODE_ENV=production && taro build --type weapp --watch(推荐)

5、在https://mp.weixin.qq.com 注册账号,并获得appid,如下图

6、下载微信开发者工具,并打开

7、将项目的跟文件引入进来,进行项目功能预览

二、上传到仓库(如果需要)

在云仓库创建空白仓库,然后按下图操作

三、安装想要的插件

1、tailwindcss

若按链接中步骤的操作时,运行taro命令显提示无法识别。就安装taro,再将taro.cmd的上级路径添加到环境变量中,重启ide,再运行taro指令。

我的路径是:C:\Users\10931\AppData\Local\Yarn\bin

2、NutUi

taro+vue3+TS+Pinia+tailwindcss+NutUI项目创建与开发的更多相关文章

  1. 使用Vite快速构建Vue3+ts+pinia脚手架

    一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue ...

  2. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  3. vite创建vue3+ts项目流程

    vite+vue3+typescript搭建项目过程   vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vue ...

  4. vue2.0与vue3.0项目创建

    脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...

  5. 基 vue-element-admin升级的Vue3 +TS +Element-Plus 版本的后端管理前端解决方案 vue3-element-admin 正式对外发布,有来开源组织又一精心力作,毫无保留开放从0到1构建过程

    项目简介 vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,是 有来技术团队 继 youla ...

  6. vue3中pinia的使用总结

    pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也 ...

  7. 【electron+vue3+ts实战便笺exe】二、electron+vue3开发内容

    不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂 ...

  8. vue项目创建与使用

    目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命 ...

  9. 实战进阶 Vue3+Axios+pinia

    实战进阶 Vue3+Axios+pinia 创建文件utils/request.js import Axios from 'axios'; export const request = Axios.c ...

  10. vue3+TS 自定义指令:长按触发绑定的函数

    vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的 ...

随机推荐

  1. 【C学习笔记】day4-3 求Sn=a+aa+aaa+aaaa+aaaaa的前5项之和,其中a是一个数字

    求Sn=a+aa+aaa+aaaa+aaaaa的前5项之和,其中a是一个数字, 例如:2+22+222+2222+22222 #include <stdio.h> #include < ...

  2. c++ 时间类型详解 time_t(转)

    原文链接:https://blog.csdn.net/love_gaohz/article/details/6637625 Unix时间戳(Unix timestamp),或称Unix时间(Unix ...

  3. 解决:webpack打包js项目ie11浏览器下报promise 未定义

    项目背景:webpack+js+seajs  引入文件用require或者define 1.下载依赖包 npm install  babel-polyfill 2.引入该依赖:webpack.conf ...

  4. SQLServer中使用between查询日期

    SQL Server中字段是Datetime型 以" YYYY-MM-DD 00:00:00" 存放的 between and是包括边界值的,not between不包括边界值,不 ...

  5. JS语句创建简单表格

    var line=3; var list=3; var table=document.createElement("table"); table.setAttribute(&quo ...

  6. Vue中qrcode的使用方法(生成二维码插件) / 前端页面根据URL链接生成二维码

    1.下载 npm install qrcode --save-dev 2.引入(在所需要的页面中引入) import QRCode from "qrcode"; //引入生成二维码 ...

  7. allure+testng遇到的一些问题

    java+testng+allure 听说allure报告,"很好看",决定引入. 首先看allure官网,需要在pom.xml中引入包 文档:https://docs.qamet ...

  8. nginx客户端真实IP配置

    https://www.cnblogs.com/kevingrace/p/8269955.html include mime.types; default_type application/octet ...

  9. 前端实现电子签名(web、移动端)通用组件(canvas实现)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Burp学院-OS命令注入

    1.OS command injection, simple case. 最简单的命令执行,[|] 两个只要有一个为True就执行 2.Blind OS command injection with ...