欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

FE - weex 开发之 配置 vue 与 vue - router环境

程序员文章站 2024-03-24 18:28:40
...

1.前提

前提是你已经创建过工程,已经有下面目录:

.
├── README.md
├── android.config.json
├── config.xml
├── hooks
│   └── README.md
├── ios.config.json
├── npm-shrinkwrap.json
├── package.json
├── platforms
├── plugins
│   └── README.md
├── src
│   ├── entry.js
│   └── index.vue
├── start
├── start.bat
├── tools
│   └── webpack.config.plugin.js
├── web 
│   ├── assets
│   │   ├── phantom-limb.js
│   │   ├── qrcode.js
│   │   ├── style.css
│   │   └── url.js
│   ├── index.dev.html
│   └── index.html
├── webpack.config.js
└── webpack.dev.js

请按照官网给的教程搭建环境,但注意一点,将自己的 npm 升级到 5.0 以上 ,才可以安装成功 weexpack , 其它的请和官网一样;

如果你第一次执行下面命令 ,卡在此处,一直在安装 weexpack ,那么就升级自己的 npm5.0 , 如果没有的话,请忽略:

$ weex create weexDemo

2.配置 vue 和 vue - router

这里先说下感受,在 router 配置时,怎么都不管用,最后发现单词错了,在 vue 配置中,按照 vue 的配置略不对。最后在配置 webpack.config.js 中也有问题,这里我就简单说明下 main.jsrouter.jswebpack.config.js 的配置;

2.1 router.js

看示例就好,注意 routes 单词 而非 routers , 之前单词写错,怎么都不生效;

import Router from 'vue-router'
import ViewHome from '../assets/views/HomeView.vue'

Vue.use(Router)


export default new Router({
    routes: [
        {path: '/', component: ViewHome}
    ]
})

2.2 main.js

看示例,这里使用了 Vue.util.extend({router},App) ,这样进行配置就好了,记得使用 router.push() 加载你想加载的页面,不然路由还是不管用,不知道显示那个路由;

import App from './App.vue'
import router from './router'


new Vue(Vue.util.extend({el: '#root', router}, App))

router.push('/')

2.3 App.vue

这里和普通的 vue 没有什么区别,但注意,div 中显示文字一定要写在 <text> 中,不然不显示的!

<template class="App">
    <div>
        <text>Main Index</text>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        name: "app"
    }
</script>
<style>
</style>

2.4 webpack.config.js

配置 main.js 入口文件,这里有个坑,见注释!

const pathTo = require('path');
const fs = require('fs-extra');
const webpack = require('webpack');

// 注意此处,这里官方生成后是一个 `map` 对象,这里直接改成数组对象即可,配置多个入口文件
// const entry = {index:pathTo.resolve('src', 'main.js')}
const entry = [pathTo.resolve('src', 'main.js')];
 const weexEntry = {index: pathTo.resolve('src', 'main.js')};
const vueWebTemp = 'temp';
const hasPluginInstalled = fs.existsSync('./web/plugin.js');
var isWin = /^win/.test(process.platform);


function getEntryFileContent(entryPath, vueFilePath) {
    let relativePath = pathTo.relative(pathTo
    .....

3 目录介绍

建议新建 assets 文件夹,放置 componentsview!

src 下最好只放 js 文件,比如工具,状态管理,只保留一个 App.vue ,这样打包就会打包到一个 app.js 中,如果存在多个 .vue 文件就会打包成多个 js 文件,不方便使用。当然不觉得麻烦的话,可以自行修改 webpack 配置。

如下图 : temp/App.js

FE - weex 开发之 配置 vue 与 vue - router环境

上一篇: volatile随笔

下一篇: weex https 设置