使用Vue CLI创建uniapp项目,搭建模板

发布时间 2023-07-06 10:13:59作者: 当下是吾

使用Vue CLI创建uniapp项目,搭建模板,不仅可以HBuilder打包,也可以npm命令行运行及打包、发布。

要使用 Vue CLI 创建 Uniapp 项目并配置模板,以便在 HBuilder 中打包以及使用 npm 命令行运行、打包和发布,可以按照以下步骤进行操作:

1. 安装 Vue CLI:确保已在你的系统中安装了最新版本的 Vue CLI。如果尚未安装,请使用以下命令进行安装:

npm install -g @vue/cli

2. 创建 Uniapp 项目:使用 Vue CLI 创建一个新的 Uniapp 项目。在终端中运行以下命令:

vue create --preset dcloudio/uni-preset-vue my-uniapp

这将使用 Uniapp 的官方预设模板 `dcloudio/uni-preset-vue` 来创建项目。按照提示进行一些选项的配置,如选择包管理工具、选择 TypeScript 等。

3. 进入项目目录:切换到新创建的 Uniapp 项目的目录中:

cd my-uniapp

4. 在 HBuilder 中打开项目:使用 HBuilder 打开该项目,即可使用 HBuilder 进行编辑、调试和打包。

5. 在 npm 中运行、打包和发布:打开终端,进入项目目录,并使用以下命令来运行、打包和发布项目:

- 运行项目:

npm run dev:mp-weixin # 或者 npm run serve

- 打包项目:

npm run build:mp-weixin # 或者 npm run build

- 发布项目:打包完成后,使用 HBuilder 或其他相关工具,将生成的项目文件发布到目标平台(如微信小程序、App、H5 等)。

通过以上步骤,你可以使用 Vue CLI 创建 Uniapp 项目,并配置模板以在 HBuilder 中进行打包。同时,你也可以使用 npm 命令行在开发过程中运行、打包和发布项目。