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

0xE7A38A 发布于2019-08-20 16:56 / 2214人阅读

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

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导出模块，否则会报错）

还有第三章，待续。

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

私有云专线服务从零开始搭建前端数据监控系统从零开始搭建腾讯云服务器云服务器搭建vue项目阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83265.html

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

摘要：从零开始搭建一个项目一搭建一个可靠成熟的项目介绍我是去年六月份接触的，当时还是个菜逼，当然现在也是，写了一年，抄代码的时候一直是，在别人的框架基础上开发，然后渐渐发现很多的模板都各有优点，所以慢慢的开始集合到了一起。从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月...

rainyang 2019-08-20 16:51 评论0 收藏0
从零开始搭建React同构应用（二）：浏览器端工程化

摘要：从零开始搭建同构应用二项目工程化浏览器端在从零开始同构开发一中我们已经能实现基本的配置和编译了。接下来我们需要将编译工作工程化。配置作用自动生成自动在引入，。文件内容如下同构开发配置自动刷新这里我们用到的修饰器特性。从零开始搭建React同构应用（二）项目工程化（浏览器端）在从零开始React同构开发（一）中我们已经能实现基本的React配置和编译了。接下来我们需要将编译工作工程...

wwq0327 2019-08-20 14:01 评论0 收藏0
从零开始搭建一个vue-ssr（下）

摘要：开始改建补充安装依赖与上一次不同，这次我们基于进行改建，已经有了很多依赖库了，但我们任需要补充一个核心修改客户端的配置修改文件，添加插件添加了这个配置以后，重新启动项目通过地址就可以访问到，页面中出现的内容就是所需要的。从零开始搭建一个vue-ssr 前言上次我们已经实现了从零开始，搭建一个简单的vue-ssr的demo：从零开始搭建一个vue-ssr（上）。那么这次呢，我们基于v...

Jochen 2019-08-23 18:23 评论0 收藏0
第一集: 从零开始实现一套pc端vue的ui组件库(环境的搭建)

摘要：第一集从零开始实现环境的搭建工程定位本套工程定位在端针对的组件库名字的由来是我从年养到现在的一直大金毛是我的吉祥物原因本人上一份工作参与了大型的保险公司后台管理系统的搭建对的端框架有过一定的了解感受到了他们真的很强大同时也存在少许的不足其实第一集: 从零开始实现(环境的搭建) 工程定位: 本套工程, 定位在pc端针对vue的ui组件库名字的由来 cc是我从2015年养到现在的...

Ashin 2019-08-23 16:48 评论0 收藏0