入手mpvue之一:快速搭建一个mpvue结构并新建一个组件后,小程序报错未正确调用page 或page[]未发现组件
背景: 公司项目重构,要把之前用wepy做的小程序重新用mpvue来做,短期来说又是一次阵痛,又需要一个过渡期来适应新的框架,但长期来说还是值得的,因为以后要做多端适配的时候可以只用一套代码,微调下就行了,相对来说成本更低。实战:快速构建项目:# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因,可以考...
背景:
公司项目重构,要把之前用wepy做的小程序重新用mpvue来做,短期来说又是一次阵痛,又需要一个过渡期来适应新的框架,但长期来说还是值得的,因为以后要做多端适配的时候可以只用一套代码,微调下就行了,相对来说成本更低。
实战:
快速构建项目:
# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
安装好后,如果有报错就解决报错,把报错信息复制丢到百度,一般都有清晰的解读的,
如果有警告的话不用管,一般就是提示你有什么东西要升级,或者什么插件改名字了。
然后用微信开发者工具打开,会显示一个小demo,注意微信开发者工具只是用来做调试的,
我们需要用别的编辑器打开建好的项目。我习惯上是用webstorm。
那么我们现在要加上一些我们自己的业务了:
首先,我们要找到src根目录下的main.js,这个文件就类似于原生小程序里的最外层的app.vue,
我们可以在这里配置小程序的一些基本配置。
我们需要在小程序下方加一个tabbar,一般的项目都会用的上这个菜单栏的。
export default {
// 这个字段走 app.json
config: {
// 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
pages: ['pages/logs/main', '^pages/index/main','pages/friends/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
tabBar: {
color: "#8a8a8a",
selectedColor: "#017cc0",
backgroundColor: "#f8f8f8",
list: [
{
pagePath: "pages/index/main",
text: "首页",
// "iconPath": "images/home-gray.png",
// "selectedIconPath": "images/home-blue.png"
},
{
pagePath: "pages/friends/main",
text: "校友圈",
// iconPath: "images/earth-gray.png",
// selectedIconPath: "images/earth-blue.png"
},
{
pagePath: "pages/logs/main",
text: "我",
// iconPath: "images/me-gray.png",
// selectedIconPath: "images/me-blue.png"
}
]
}
}
}
红色部分是我新加的,也就是说我需要新建一个friends组件,如下:在fiends组件里新建两个文件
建好以后我们,npm run dev,运行试一下效果,这时小程序那边报错:
这个原因是我们生成的fiiends/main.js里面是空的,我们需要在这个文件里面加入一些东西,
创建和挂载根实例。从而让整个应用都有路由功能:
import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()
这时我们的效果就出来了,并且小程序也不报错了
另外假如小程序报错是:
tabBar[1].pagePath "pages/friends/index" 需在 pages 数组中
这时我们就要看下是不是路径给配错了:
比如:
pagePath: "pages/friends/index",要改成
pagePath: "pages/friends/main"
更多推荐
所有评论(0)