Taro新手上路(腳手架),專案結構

2021-09-29 22:49:27 字數 1956 閱讀 9900

taro 是一套遵循 react 語法規範的 多端開發 解決方案。

cli 工具安裝

taro 專案基於 node,請確保已具備較新的 node 環境(>=8.0.0)

首先,你需要使用 npm 或者 yarn 全域性安裝@tarojs/cli,或者直接使用npx:

# 使用 npm 安裝 cli

$ npm install -g @tarojs/cli

# or 使用 yarn 安裝 cli

$ yarn global add @tarojs/cli

使用命令建立模板專案

在建立完專案之後,taro 會預設開始安裝專案所需要的依賴,安裝使用的工具按照 yarn>cnpm>npm 順序進行檢測,一般來說,依賴安裝會比較順利,但某些情況下可能會安裝失敗,這時候你可以在專案目錄下自己使用安裝命令進行安裝

taro 需要執行不同的命令,將 taro **編譯成不同端的**,然後在對應的開發工具中檢視效果。

h5h5 模式,無需特定的開發者工具,在執行完下述命令之後即可通過瀏覽器進行預覽

h5 預覽專案

# yarn

$ yarn dev:h5

# npm script

$ npm run dev:h5

# 僅限全域性安裝

$ taro build --type h5 --watch

# npx 使用者也可以使用

$ npx taro build --type h5 --watch

h5 打包專案

# yarn

$ yarn build:h5

# npm script

$ npm run build:h5

# 僅限全域性安裝

$ taro build --type h5

react native 端執行需執行如下命令,react native 端相關的執行說明請參見 react native 教程

# yarn

$ yarn dev:rn

# npm script

$ npm run dev:rn

# 僅限全域性安裝

$ taro build --type rn --watch

官方有一篇基於 redux 的專案最佳實踐文章:《taro深度開發實踐》。**

官方推薦的專案結構——

├── config                 配置目錄

| ├── dev.js 開發時配置

| ├── index.js 預設配置

| └── prod.js 打包時配置

├── src 原始碼目錄

| ├── components 公共元件目錄

| ├── pages 頁面檔案目錄

|| ├── index index 頁面目錄||

| ├── banner 頁面 index 私有元件||

| ├── index.js index 頁面邏輯||

| └── index.css index 頁面樣式

| ├── utils 公共方法庫

└── package.json

複製**

新手安裝vue cli腳手架

首先這片文章借鑑了很多博主的,再此對他們表示感謝。什麼是vue?vue.js是一套構建使用者介面的漸進式框架。vue 只關注檢視層,採用自底向上增量開發 的設計。vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件。什麼是vue cli腳手架?打個比喻,vue cli就是vu...

vuecli腳手架的安裝與腳手架建立專案

安裝最新版本腳手架,進入終端輸入命令 npm install g vue cli由於vuecli3.0之後與2.0產生了較大的變化,如果想要使用2.0版本的模板的話,需要使用2.0版本的 vue init 輸入命令 npm install g vue cli init在終端中輸入vue versio...

002 搭建專案腳手架

第一步 利用vue官方腳手架vue cli的基礎上,搭建好自定義,如圖所示的目錄結構及所需腳手架檔案。目錄 build用來存放webpack相關配置和指令碼。config 主要存放配置檔案,用於區分開發環境 測試環境 線上環境的不同。src專案原始碼及需要引用的資源檔案,分為客戶端與服務端。stat...