美文网首页
通过mpvue快速构建小程序

通过mpvue快速构建小程序

作者: 第二心跳 | 来源:发表于2021-06-28 16:53 被阅读0次

    注:需要了解微信小程序、vue、vue-cli、git、node的npm 或cnpm 等基础知识,以上内容可自行百度。
    1、电脑装有node(没有自行百度下载安装)、通过npm(cnpm、yarn都可以) 命令安装 vue-cli
    安装vue-cli ,在微信公众平台注册账号并申请一个小程序,保留 appid
    npm install -g @vue/cli 或 yarn global add @vue/cli
    2、通过CMD命令行cd到需要创建项目的路径
    3、通过命令行创建小程序项目:
    vue init mpvue/mpvue-quickstart my-project

    image.png
    注:my-project是创建的项目名,项目名不可大写,此处需要用到appid(如忘记appid,在微信公众平台自己的小程序开发管理—开发设置中自行查找,不写为游客模式,开发者工具填写appid处选择云开发)
    4、cd 到 my-project 目录下
    cd my-project
    image.png

    5、安装依赖包
    npm install 或 cnpm i


    image.png

    6、运行项目
    npm run dev
    7、根据需求开发界面,需按照vue 语法编写js,不可按照wx开发语法会报错
    例如:微信设置值写法为

    image.png

    vue 写法为: this.name = 'MINA'
    8、通过微信开发者工具打开 项目my-project 目录下的dist 文件夹 ,配置文件修改了跟路径的话就打开dist 下的wx文件夹,即可看见构建好的小程序


    image.png

    9、不要运行 npm run build 打包命令 开发者工具会报错,如已打包删除项目目录的dist 文件夹,并重新运行 npm run dev即可
    10、将写好的小程序通过开发者工具上传,并通过微信公众平台审核、发布

    相关文章

      网友评论

          本文标题:通过mpvue快速构建小程序

          本文链接:https://www.haomeiwen.com/subject/odvqultx.html