从零开始搭建一个vue项目 -- vue-cli/cooking-cli（二）

1.配置图片路径

图片的路径有多种方法，第一种是直接把图片放在根目录的 static 文件夹下，引入的路径是

/staic/img

，这种方法的缺点在于webpack不会识别根目录，所以发布的时候需要手动把图片文件夹添加进去

第二种方法是配置webpack， 在/build/webpack.base.conf.js文件中有一行代码

mark

这里可以配置webpack的路径，在 alias 选项添加一下图片的路径，修改为

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets') // 后面的参数就是静态文件目录
    }
}

页面中就可以直接使用 ~assets/img 的路径引入静态文件，并且可以被webpack检测到，并且自动打包

还有一种方法就是相对路径，这里不做讲解

如果图片路径写在data里面，没有正常打包的话，可以修改代码为require('xxx')

vue-cli的webpack配置，默认10kb以下的图片会自动转化为base64位格式的图片，所以这里我们也可以配置一下，还是上面这个文件，在下面，有一个参数，如下图

mark

这里可以配置最小参数，假如配置为0的话，就不会转化base64位图片，当然你也可以设置更高的值，比如50kb。

2.配置路由（vue-router）

vue-router

• 这里我们来配置一个json控制的路由，先做到二级子路由，以后考虑递归来处理三级路由

我们先来创建几个组件，来配置我们的路由，在src文件夹下新建一个pages目录，用于存放我们的页面组件，而自带的components，今后用来存放小组件，例如button。

文件目录最后应该是这样的，先看看文件目录，然后再来讲解每个文件，现在项目结构是这样的

mark

我们创建了四个目录，分别是foo bar home parent，我直接用 parent 来讲解一下

parent
├── parent.vue                      - parent组件
├── index.js                              - 用于导出，并且命名导出的文件
│   ├── components                       - 存放parent的子组件

parent.vue

<template>
    <div>Parent</div>
</template>

<script>
    export default {
        name:'parent'
    }
</script>

<style>

</style>

index.js

export const parent = r => require.ensure([], () => r(require('./parent.vue')), 'parent'); 
// 这里有三个parent，分别是导出的模块名（可直接操作的组件），导出的路径，导出的名称（打包时的名称，在后面会有讲解）
export * from './components';//将父元素关联的子元素的路径export

现在用同样的方法，把其他四个文件都导出一下，最后在pages/index.js中全部导出

export * from './home'; //首页入口
export * from './foo'; 
export * from './bar'; 
export * from './parent'; 

进入router文件夹，新建一个文件，router.json，用于存放我们的路由配置，注意json文件中不能添加注释，并且格式有限制

[
  {
    "path": "/home", // 路径可随意配置
    "component": "home", // 这里的组件名对应上面导出的组件名
    "name": "home" // 这个名称也可配
  },
  {
    "path": "/parent",
    "component": "parent",
    "children": [
      {
      "path": "child", 
      "component": "child",
      "name": "child"
      }
    ]
  },
  {
    "path": "/foo",
    "component": "foo",
    "name": "foo"
  },
  {
    "path": "/bar",
    "component": "bar",
    "name": "bar"
  }
]

然后我们把 router 文件夹的index.js改写一下，把我们的json导入

import Vue from 'vue';
import VueRouter from 'vue-router';

import * as page from '../pages'; // 这里可以把我们上面的组件全部重新导入
Vue.use(VueRouter);

import NavConfig from './router.json'; //导入我们的json

// 返回一个新的路由配置
const getChild = (component) => {
    return {
        path:component.path,
        component:page[component.component],
        name:component.name,
        children:component.children || []
    }
}

// 使用json生成全新的route
const registerRoute = (config,parent) => {
    let route = [{
        "path": "/",
        "redirect": "/home" 
    }];
    config.forEach(child => {
        if (child.children && child.children.length > 0) {
            child.children = child.children.map(item => getChild(item));
        }
        route.push(getChild(child));
    });
    return route;
}

const routes = registerRoute(NavConfig);

const router = new VueRouter({
    routes
});

export default router;

这个时候假如需要新增一个路由，只需要修改router.json文件即可（记得在pages导出模块，否则会报错）

还有第三章，待续。

一个团结互助的讨论组，专注前端三十年！

mark