從零開始搭建一個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導出模塊，不然會報錯）

還有第三章，待續。

一個團結互助的討論組，專一前端三十年！