草庐IT

vue-cli 脚手架创建uniapp项目（微信小程序）

黄马小配件 2023-04-07 原文

安装

1、全局安装 vue-cli 脚手架（不建议用 5.0 版本，避免报错）

 npm install -g @vue/cli@4.5.19

2、脚手架创建项目

vue create -p dcloudio/uni-preset-vue my-project

3、选择 默认模板 即可

4、编译并启动项目

npm run dev:mp-weixin

 5、开发者工具，导入项目，注意路径 "项目地址/dist/dev/mp-weixin"

开发的规范

  1. 不能直接在开发者工具中修改代码，口诀：vscode做开发，开发者工具做调试

  2. 标签使用小程序的规范，语法使用vue的即可

项目目录结构

  1. App.vue 相等于原生小程序 app.wxss （全局样式文件）和 app.js （应用入口文件）

  2. main.js uniapp 项目入口文件 ，后期有一些设置想全局都生效(vuex)

  3. mainifest.json 相当于小程序 project.config.json 设置 appid 、设置不校验合法域名一微信开发者工具一本地设置的功能

  4. pages.json 相当于以前小程序当中全局配置 app.json 和页面配置 index.json

    1. 新建了页面，需要在 pages.json 中设置页面路径

    2. 设置应用的标题还可以设置单个页面的标题

    3. 设置导航栏样式

    4. 设置 tabbar

  5. uni.scss 全局样式文件，写 scss 语法，默认被 uniapp 引入了，所以不需要手动去引入它

  6. pages 文件夹是否 uniapp 页面文件！！

  7. static 存放静态资源，图片，字体等

uniapp生命周期

口诀：组件生命周期使用vue规范，其他使用小程序规范

  1. 应用生命周期，使用小程序

    1. onLauch等

  2. 页面生命周期，使用小程序

    1. onLoad，onShow等

  3. 组件生命周期，使用vue的规范

    1. created，mounted等

uniapp的api

1、wx的api，修改前缀后(uni)，可以直接用 : wx.showToast() ---- uni.showToast()

2、uni支持promise的使用方式

3、使用promise返回的是数组，建议直接解构使用即可

easycom

  1. 按照规范新建组件： components/组件名/组件名.vue

  2. 页面直接使用即可

 

引入和使用 uni-ui

  1. 在根目录创建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的编译

    module.exports = {
    transpileDependencies:['@dcloudio/uni-ui']
}

  2. 安装 sass 和 uni-ui

    npm i sass @dcloudio/uni-ui

  3. 配置 easycom

    // pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    
    // 原有内容
    pages:[ ... ]
}

  4. 重新运行 编译打包

    npm run dev:mp-weixin

 

 

 

 

脚手架vue-clixffxff0clivue.jsuni-app前端

有关vue-cli 脚手架创建uniapp项目（微信小程序）的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  5. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  6. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  7. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  8. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']

  9. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器？ - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  10. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

随机推荐