第一天weex——第一个APP

你的第一个weexApp

前言(选择性略过)

最近刚刚接触weex,之前接触过vue然后又使用uniapp写了毕设的客户端。uniapp开发中遇坑极多,还好社区里的人还是比较多的网上的资料还行。

但是weex资料及其的少,官方的文档对于一个干后端的我极其不友好:(

正文

项目搭建

  • 前提是你的关于的vue的开发环境搭建好了,再按官方的教程安装相应的weex-tools工具然后创建你的第一个应用。

目录一出来我就mb了看不懂,啊!较于vue的项目多出了好几个文件夹

在这里插入图片描述

  • 多的config、platforms、plugins、web…
  • 按照字面意思我只能说一下我自己的看法

config顾名思义配置文件夹,至于其中的诸多js那就。。哈哈了

platforms应该是关于android ios平台的一些配置文件

plugins那就是插件了至于是啥我也不知道

整合vue-router

??????????????????????

https://blog.csdn.net/qq_34164814/article/details/87071450

参考这个配置的

我也重复一遍吧

  • vue项目中配置步骤:

建立路由配置文件router.js(new一个Router和vue,声明vue使用router并配置相应的路由并暴露出来供其他文件调用),再项目的配置文件中导入router.js,并new一个vue。

  • weex项目

entry.js

import Vue from 'vue'
import weex from 'weex-vue-render'
import router from '@/router'
import App from '@/components/HelloWorld'

weex.init(Vue)

// eslint-disable-next-line no-new
new Vue(Vue.util.extend({el: '#root', router}, App))

router.js

import Router from 'vue-router'
import Vue from 'vue'

import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routers: [
    {name: 'helloworld', path: '/helloworld', component: HelloWorld},
    // eslint-disable-next-line standard/object-curly-even-spacing
    { path: '/', redirect: '/helloworld'}
  ]
})

关键点

weex.init(vue)执行的过程中是加载了相应的配置文件的(webpack.common.conf.js)在这个文件中有如下

在这里插入图片描述

我已经注释掉

其实就是将关于vue的配置移动到entry.js当中。

结束

哈哈哈就整合了个vue-router,哎太菜了

总结

从中可以学习到项目运行中加载配置的步骤(模糊理解),其实在 其他的框架中都有着这种解决问题的思路。学会原理,将会无敌,可惜我是个小菜B,无情哈拉少,zbc

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页