将Vue项目迁移到微信小程序中

文章目录

  • 一、创建一个Vue.js的应用程序
  • 二、构建微信小程序
    • [1. 安装微信小程序构建工具](#1. 安装微信小程序构建工具)
    • [2. 在vuejs项目的根目录中创建一个wepy.confgjs文件](#2. 在vuejs项目的根目录中创建一个wepy.confgjs文件)
    • [3. 在vuejs项目的根目录中运行构建](#3. 在vuejs项目的根目录中运行构建)
  • 三、错误记录
    • [1. 找不到编译器:wepy-compiler-sass](#1. 找不到编译器:wepy-compiler-sass)

一、创建一个Vue.js的应用程序

使用 Vue-Cli 脚手架创建一个新的Vue.js应用程序。

复制代码
vue init webpack my-vue-project

启动应用程序

复制代码
cd project
npm install
npm run dev

在你的Web浏览器中打开URL http://localhost:8080,你应该可以看到你的vue.js应用程序正在运行。

二、构建微信小程序

微信小程序是一个独立的平台,需要自己构建,不能直接将vue.js应用程序上传至微信小程序平台。需要把你的vue.js应用程序构建成微信小程序。

1. 安装微信小程序构建工具

复制代码
npm install -g wepy-cli

2. 在vuejs项目的根目录中创建一个wepy.confgjs文件

复制代码
module.exports = {
    "wyExt": ".wpy",
    "compilers": {
        "less": {
            "compress": true
        },
        "babel": {
            "presets": [
                "es2015",
                "stage-1"
            ],
            "plugins": [
                "transform-object-rest-spread",
                "transform-class-properties",
                "transform-docorators-legacy",
            ]
        }
    },
    "plugins": {

    }
};

现在你需要将你的vuejs组件转换为小程序组件。这可以通过在vuejs组件顶部添加 //<templatex></template>//<script> </script>标记实现。

3. 在vuejs项目的根目录中运行构建

该命令将构建上传至微信小程序平台所需的文件:

复制代码
wepy build --watch

将构建上传至微信小程序平台所需的文件在vue.js项目的 /dist 目录中生成。

三、错误记录

1. 找不到编译器:wepy-compiler-sass

复制代码
[WARNING] 找不到编译器:wepy-compiler-sass。
未发现相关 sass 编译器配置,请检查wepy.config.js文件。

解决办法:

复制代码
//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev

配置

复制代码
module.exports = {
  "compilers": {
   "sass": {
            "outputStyle": "comprressed"
        }
  },
}
相关推荐
zhanshuo7 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang8 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil10 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录17 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672217 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少22 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
HERR_QQ3 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序