uni-app 基于 Vue CLI 创建项目及打包部署完整指南

作者：南风

时间：2026-10-31

本文详细讲解如何使用Vue CLI创建uni-app项目，包括选择模板、运行开发环境及处理npm/yarn包安装问题。重点介绍了uView UI库的配置流程，涵盖main.js引入、uni.scss样式导入及pages.json配置，并演示了H5打包命令，帮助开发者快速搭建前端开发环境。

文章目录

新建项目

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

新建项目

选择默认模板
npm run dev:h5 运行

安装sass和uview （npm安装失败）

在使用uni.scss中的变量或样式时，<style lang="scss"> 必须添加 lang 属性才会生效。关于uview的使用，只需安装 sass 和 sass-loader 即可，无需安装 node-scss。若遇到 npm 安装包失败的情况，可改用 yarn add 命令进行安装。

yarn add sass@1.49.8 sass-loader@8.0.2
yarn add uview-ui

main.js

import uView from "uview-ui";
Vue.use(uView);

uni.scss

@import 'uview-ui/theme.scss';

pages.json（和pages平行）

"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

index.vue

<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>
<style lang="scss">