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

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

1.配置图片路径

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

/staic/img

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

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

这里能够配置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位格式的图片，因此这里咱们也能够配置一下，仍是上面这个文件，在下面，有一个参数，以下图

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

2.配置路由（vue-router）

vue-router

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

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

文件目录最后应该是这样的，先看看文件目录，而后再来说解每一个文件，如今项目结构是这样的

咱们建立了四个目录，分别是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导出模块，不然会报错）

还有第三章，待续。

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