uniapp使用vue-cli新建项目并打包的步骤

更新时间：2023年11月10日 09:30:02 作者：小曲曲

这篇文章主要介绍了uniapp使用vue-cli新建项目并打包,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

新建项目

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

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

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

bug：使用uni.scss中的变量或样式，<style lang="scss"> 必须加lang才会生效
bug：使用uview只需要安装 sass和 sass-loader即可，无需安装 node-scss
bug：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">

打包

npm run build:h5

到此这篇关于uniapp使用vue-cli新建项目并打包的文章就介绍到这了,更多相关uniapp新建项目打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp中单选按钮的实现代码示例
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下
2023-01-01
30分钟快速实现小程序语音识别功能
最近需要在小程序上实现语音识别，将需要用到的功能都总结下，供大家参考。语音识别用的是科大讯飞，文中给出了详细的实现方法介绍，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
JavaScript使用setTimeout实现延迟弹出警告框的方法
这篇文章主要介绍了JavaScript使用setTimeout实现延迟弹出警告框的方法,实例分析了javascript中setTimeout函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS实现二维数组横纵列转置的方法
下面小编就为大家分享一篇JS实现二维数组横纵列转置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-04-04
脚本合并提升javascript性能示例
脚本合并可以有效提升javascript性能，下面有个不错的示例，大家可以参考下
2014-02-02
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
这篇文章主要给大家介绍了关于Bootstrap开发中Tab标签页切换图表显示问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-07-07
Axios常见配置选项跨域详解
axios基于http客户端的promise，面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持，这篇文章主要介绍了axios常见配置选项跨域,需要的朋友可以参考下
2022-11-11
element-ui dialog弹窗增加全屏功能(推荐)
这篇文章主要介绍了element-ui dialog弹窗增加全屏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
csdn 博客的css样式 v3
仅相隔一天就出了个v3。修正了一个bug，firefox左侧内容宽度错误。
2009-02-02
JavaScript实现一键复制文本功能的示例代码
这篇文章主要为大家介绍两种javascript实现文本复制（将文本写入剪贴板）的方法，文中的示例代码讲解详细，大家可以根据需求特点选用
2023-03-03