uniapp使用vue的脚手架进行开发手动选择
时间: 2025-06-22 13:45:40 浏览: 8
### 使用 Vue CLI 手动配置选项创建 UniApp 项目的教程
#### 准备工作
为了确保能够顺利使用 `@vue/cli` 创建并配置 UniApp 项目,需先确认本地已安装 Node.js 和 npm。可以通过命令行工具验证 NPM 版本[^3]。
```bash
npm -v
```
如果尚未安装 `@vue/cli` 或者希望加速依赖包下载速度,则可以按照如下方式设置淘宝镜像源以及全局安装最新版的 Vue CLI 工具:
```bash
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
```
#### 初始化新项目
启动交互式的向导界面用于自定义新建的 UniApp 应用程序:
```bash
vue create my-universal-app
```
当提示选择预设(presets)时,不采用默认推荐而是进入手动模式(manual),以便于更精细地调整各个特性开关。此时会遇到一系列关于插件和功能的选择题,对于构建跨平台移动应用来说,重点在于挑选支持 HBuilderX 构建体系结构的模板——即带有 "uni-app" 关键字的那一项[^1]。
#### 添加必要的环境变量
完成上述步骤之后,在项目根路径下建立不同运行阶段对应的 `.env.*` 文件来管理各类环境参数。例如针对 staging 测试服务器而言,应该编辑名为`.env.staging` 的文件,并加入特定前缀 (`VUE_APP_`) 开头的关键配置条目以供编译期间读取[^2]。
```plaintext
NODE_ENV=production
VUE_APP_ENV=staging
VUE_APP_BASE_API=/stage-api
```
#### 自定义 Webpack 设置 (可选)
假如需要进一步定制打包行为或是引入额外加载器/解析规则的话,可以在应用程序顶层新增加一个叫做 `vue.config.js` 的 JavaScript 模块,用来覆写默认Webpack配置中的某些部分[^4]。
```javascript
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/prod-sub-path/'
: '/',
};
```
通过以上流程即可基于 Vue CLI 成功搭建起具备高度灵活性与扩展性的 UniApp 移动端开发框架。
阅读全文
相关推荐

















