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

从零开始搭建一个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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值