基于Vue框架微信小程序物联网项目之设计笔记--创建工程模板

    技术2026-09-04  4

    基于Vue框架微信小程序物联网项目之设计笔记–创建工程模板

    Vue简介

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    官网地址 https://cn.vuejs.org/

    软件配置

    VScode(管理员版本)

    Nodejs win10 64位

    微信开发者工具 (稳定版)

    创建工程(最好看视频教程)

    创建工程(前提软件全部按萝卜师兄的教程安装完成之后)

    Vue CLI 安装
    npm install -g @vue/cli # OR yarn global add @vue/cli

    加快速度

    淘宝 NPM 镜像 这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步. https://developer.aliyun.com/mirror/NPM?from=tnpm

    安装命令 npm install -g @vue/cli --registry=https://registry.npm.taobao.org

    安装完成后

    VsCode 插件安装

    mpvue模板生成

    1.创建一个文件保存工程文件 2. 使用Vscode 打开文件夹 打开终端 3. 终端 输入 命令

    vue init mpvue/mpvue-quickstart my-project # my-project项目名称 可以改成你自己的 例如: vue init mpvue/mpvue-quickstart wechatapp

    一般情况下一路回车,Y/n? 直接n

    4.工程生成 生成如下文件 5 终端 输入 npm install 安装依赖环境 c 6. 打开微信开发者工具 导入项目

    参考资料

    萝卜师兄 挽救小白STM32+8266+小程序智能家居毕设实战教程

    (非常的详细,从STM32简单入门到微信小程序开发全部手把手教学,非常感谢大佬的教程,可以完成一个简单的物联网项目) https://www.bilibili.com/video/BV1ae411W7yD 基于Vue框架微信小程序物联网项目之设计笔记–简单的界面显示实现 https://blog.csdn.net/weixin_43599390/article/details/106987763

    博客https://www.delehub.top/
    访问速度快https://delehub-github-io.vercel.app/
    Processed: 0.009, SQL: 9