一、创建一个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文件。
解决办法:文章来源:https://www.toymoban.com/news/detail-723974.html
//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
配置文章来源地址https://www.toymoban.com/news/detail-723974.html
module.exports = {
"compilers": {
"sass": {
"outputStyle": "comprressed"
}
},
}
到了这里,关于将Vue项目迁移到微信小程序中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!