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

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

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

vue init webpack my-vue-project
1

启动应用程序

cd project
npm install
npm run dev
1
2
3

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

二、构建微信小程序

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

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

npm install -g wepy-cli
1

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": {

    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

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

wepy build --watch
1

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

三、错误记录

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

[WARNING] 找不到编译器：wepy-compiler-sass。
未发现相关 sass 编译器配置，请检查wepy.config.js文件。
1
2

解决办法：

//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
1
2
3
4

配置

module.exports = {
  "compilers": {
   "sass": {
            "outputStyle": "comprressed"
        }
  },
}
1
2
3
4
5
6
7