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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LABLENET/article/details/78350205

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 ，那么就升级自己的 npm 到 5.0 , 如果没有的话，请忽略：

$ weex create weexDemo

---

2.配置 vue 和 vue - router

这里先说下感受，在 router 配置时，怎么都不管用，最后发现单词错了，在 vue 配置中，按照 vue 的配置略不对。最后在配置 webpack.config.js 中也有问题，这里我就简单说明下 main.js 、 router.js 和 webpack.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 文件夹，放置 components 和 view!

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

如下图 ： temp/App.js

扫描二维码关注公众号，回复： 3019572 查看本文章