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新建项目打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序之自定义组件的实现代码(附源码)

    微信小程序之自定义组件的实现代码(附源码)

    最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改。这篇文章主要介绍了微信小程序之自定义组件的实现代码(附源码),需要的朋友可以参考下
    2018-08-08
  • JS倒计时两种实现方式代码实例

    JS倒计时两种实现方式代码实例

    这篇文章主要介绍了JS倒计时两种实现方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 解决layer.open后laydate失效的问题

    解决layer.open后laydate失效的问题

    今天小编就为大家分享一篇解决layer.open后laydate失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 原生JS实现旋转木马式图片轮播插件

    原生JS实现旋转木马式图片轮播插件

    这篇文章主要介绍了原生JS实现旋转木马式图片轮播插件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 微信小程序实现吸顶盒效果

    微信小程序实现吸顶盒效果

    这篇文章主要为大家详细介绍了微信小程序实现吸顶盒效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现接收验证码

    微信小程序实现接收验证码

    这篇文章主要为大家详细介绍了微信小程序实现接收验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript结合Flexbox简单实现滑动拼图游戏

    javascript结合Flexbox简单实现滑动拼图游戏

    本文给大家分享的是一则使用javascript结合Flexbox简单实现滑动拼图游戏的代码,虽然没有实现完整的功能,但是还是推荐给大家,喜欢的朋友可以继续做完
    2016-02-02
  • JavaScript每天必学之事件

    JavaScript每天必学之事件

    JavaScript每天必学之事件,聊一聊事件冒泡与捕获、事件冒泡的好处,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript创建createXmlHttpRequest对象示例代码

    javascript创建createXmlHttpRequest对象示例代码

    这篇文章主要介绍了javascript创建createXmlHttpRequest对象的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例

    JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例

    这篇文章主要介绍了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例,使用javascript较为逼真的模拟出了国际象棋对弈的场景,需要的朋友可以参考下
    2015-04-04

最新评论