除了使用HBuilderX工具可視化搭建項目外，DCloud官方還提供了一個腳手架用于命令行搭建項目。
uni-app項目支持 uni cli和 HBuilderX cli兩種腳手架工具：
-
uni cli：面向非HBuilderX的用戶（如習(xí)慣使用vscode/webstorm的開發(fā)者），提供創(chuàng)建項目、編譯發(fā)行等能力；在App平臺，僅支持生成離線打包的wgt資源包，不支持云端打包生成apk/ipa；若需云端打包，依然需要安裝HBuilderX，使用HBuilderX cli。
-
HBuilderX cli：面向HBuilderX用戶的自動化工具，提供uni-app項目的持續(xù)集成能力；支持通過HBuilderX cli進(jìn)行web打包、小程序打包、App云端打包、部署uniCloud等；但注意HBuilderX暫不支持linux平臺。另外注意HBuilderX cli不基于npm，它是HBuilderX安裝目錄下的cli.exe。
提供有完整的cli 腳手架，可以通過 vue-cli 創(chuàng)建、運(yùn)行、發(fā)行 uni-app 項目。
一、環(huán)境安裝
全局安裝vue-cli
npm i @vue/cli@4 -g
建議使用vue-cli 4.x版本，vue-cli 5.x與webpack存在沖突，會導(dǎo)致運(yùn)行報錯
二、創(chuàng)建項目
1、安裝預(yù)設(shè)模板
使用vue-cli安裝預(yù)設(shè)模板。
vue create -p dcloudio/uni-preset-vue projectName
dcloud提供了多個預(yù)設(shè)版本
//對應(yīng)HBuilderX最新alpha版
vue create -p dcloudio/uni-preset-vue#alpha projectName
//使用Vue3/Vite js版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
//使用Vue3/Vite ts版本
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
此時，會提示選擇項目模板（使用Vue3/Vite版不會提示，目前只支持創(chuàng)建默認(rèn)模板），初次體驗建議選擇 hello uni-app 項目模板。
2、注意
-
Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
-
模板項目存放于 Github，由于國內(nèi)網(wǎng)絡(luò)環(huán)境問題，可能下載失敗。針對此問題可以嘗試如下措施：
-
更換網(wǎng)絡(luò)重試，比如使用 4g 網(wǎng)絡(luò)
-
在設(shè)備或路由器的網(wǎng)絡(luò)設(shè)置中增加 DNS（如：8.8.8.8）
-
在設(shè)備中增加固定的 hosts（如：140.82.113.4 github.com）
-
2、安裝依賴
打開 在src文件找到mainfest.json文件將AppId填入
進(jìn)入項目路徑運(yùn)行
npm install
3、運(yùn)行項目
npm run dev:mp-weixin
4、發(fā)行項目
npm run build:mp-weixin
運(yùn)行成功后會再項目中生成一個dist目錄，里邊存在build/mp-weixin項目，就是打包編譯后微信小程序代碼。可以直接在微信開發(fā)者工具中運(yùn)行。
5、注意：
-
vue2發(fā)布到App平臺時，平臺參數(shù)為app-plus；vue3發(fā)布到App平臺時，平臺參數(shù)為app；
-
uni cli在App平臺，僅支持生成離線打包的wgt資源包，不支持云端打包生成apk/ipa；若需云端打包，依然需要安裝HBuilderX，使用HBuilderX cli。
三、開發(fā)環(huán)境和生產(chǎn)環(huán)境
uni-app 可通過 process.env.NODE_ENV 判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。一般用于連接測試服務(wù)器或生產(chǎn)服務(wù)器的動態(tài)切換。
-
在 HBuilderX 中，點擊“運(yùn)行”編譯出來的代碼是開發(fā)環(huán)境，點擊“發(fā)行”編譯出來的代碼是生產(chǎn)環(huán)境。
-
cli 模式下，是通行的編譯環(huán)境處理方式。
if (process.env.NODE_ENV === 'development') {
console.log('開發(fā)環(huán)境');
} else {
console.log('生產(chǎn)環(huán)境');
}
HBuilderX 中敲入代碼塊 uEnvDev、uEnvProd 可以快速生成對應(yīng) development、production 的運(yùn)行環(huán)境判定代碼。
// uEnvDev
if (process.env.NODE_ENV === 'development') {
// TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
// TODO
}
四、其他擴(kuò)展
1、可以在項目根目錄中配置vue.config.js文件在打包中刪除console.log及注釋。
使用terser-webpack-plugin插件移除注釋和console文章來源：http://www.zghlxwxcb.cn/news/detail-853006.html
如果你使用的是 webpack v5 或以上版本，你不需要安裝這個插件。webpack v5 自帶最新的 terser-webpack-plugin。如果使用 webpack v4，則必須安裝 terser-webpack-plugin v4 的版本。文章來源地址http://www.zghlxwxcb.cn/news/detail-853006.html
- 安裝 terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
- 將插件添加到你的 webpack 配置文件中
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
// 刪除console
compress: {
drop_console: true,
pure_funcs: ['console.log'],
},
},
}),
],
}
},
};
2、安裝uview組件庫
- 安裝UI組件庫
npm i uview-ui
- main.js引入uview
import uView from "uview-ui";
Vue.use(uView);
- 在全局樣式文件uni.scss中引入
@import 'uview-ui/theme.scss';
- 在pages.json中 配置easycom組件模式（打包的時候是按需引入）
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
- 在vue.config.js中加入
module.exports = {
transpileDependencies: ['uview-ui']
}
- 在pages下頁面中使用
<u-button type="primary">主要按鈕</u-button>
到了這里，關(guān)于基于npm CLI腳手架的uniapp項目創(chuàng)建、運(yùn)行與打包全攻略（微信小程序、H5、APP全覆蓋）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
