国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始搭建一個vue項目 -- vue-cli/cooking-cli（二）

0xE7A38A / 2364人閱讀

從零開始搭建一個vue項目 -- vue-cli/cooking-cli（二） 1.配置圖片路徑



圖片的路徑有多種方法，第一種是直接把圖片放在根目錄的 static 文件夾下，引入的路徑是

/staic/img

，這種方法的缺點在于webpack不會識別根目錄，所以發(fā)布的時候需要手動把圖片文件夾添加進去

第二種方法是配置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") // 后面的參數(shù)就是靜態(tài)文件目錄
    }
}

頁面中就可以直接使用 ~assets/img 的路徑引入靜態(tài)文件，并且可以被webpack檢測到，并且自動打包

還有一種方法就是相對路徑，這里不做講解

如果圖片路徑寫在data里面，沒有正常打包的話，可以修改代碼為require("xxx")

vue-cli的webpack配置，默認10kb以下的圖片會自動轉(zhuǎn)化為base64位格式的圖片，所以這里我們也可以配置一下，還是上面這個文件，在下面，有一個參數(shù)，如下圖

這里可以配置最小參數(shù)，假如配置為0的話，就不會轉(zhuǎn)化base64位圖片，當然你也可以設置更高的值，比如50kb。

2.配置路由（vue-router） 
vue-router


這里我們來配置一個json控制的路由，先做到二級子路由，以后考慮遞歸來處理三級路由

我們先來創(chuàng)建幾個組件，來配置我們的路由，在src文件夾下新建一個pages目錄，用于存放我們的頁面組件，而自帶的components，今后用來存放小組件，例如button。

文件目錄最后應該是這樣的，先看看文件目錄，然后再來講解每個文件，現(xiàn)在項目結(jié)構(gòu)是這樣的

我們創(chuàng)建了四個目錄，分別是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";//將父元素關(guān)聯(lián)的子元素的路徑export

現(xiàn)在用同樣的方法，把其他四個文件都導出一下，最后在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導出模塊，否則會報錯）

還有第三章，待續(xù)。

一個團結(jié)互助的討論組，專注前端三十年！


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83265.html

相關(guān)文章

  • 從零開始搭建一個vue項目 -- vue-cli/cooking-cli（一）

    摘要：從零開始搭建一個項目一搭建一個可靠成熟的項目介紹我是去年六月份接觸的，當時還是個菜逼，當然現(xiàn)在也是，寫了一年，抄代碼的時候一直是，在別人的框架基礎(chǔ)上開發(fā)，然后漸漸發(fā)現(xiàn)很多的模板都各有優(yōu)點，所以慢慢的開始集合到了一起。 從零開始搭建一個vue項目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一個可靠成熟的項目 1.介紹 vue-cli 我是去年六月...

    rainyang 評論0 收藏0

  • 從零開始搭建React同構(gòu)應用（二）：瀏覽器端工程化

    摘要：從零開始搭建同構(gòu)應用二項目工程化瀏覽器端在從零開始同構(gòu)開發(fā)一中我們已經(jīng)能實現(xiàn)基本的配置和編譯了。接下來我們需要將編譯工作工程化。配置作用自動生成自動在引入，。文件內(nèi)容如下同構(gòu)開發(fā)配置自動刷新這里我們用到的修飾器特性。 從零開始搭建React同構(gòu)應用（二） 項目工程化（瀏覽器端） 在從零開始React同構(gòu)開發(fā)（一）中我們已經(jīng)能實現(xiàn)基本的React配置和編譯了。接下來我們需要將編譯工作工程...

    wwq0327 評論0 收藏0

  • 從零開始搭建一個vue-ssr（下）

    摘要：開始改建補充安裝依賴與上一次不同，這次我們基于進行改建，已經(jīng)有了很多依賴庫了，但我們?nèi)涡枰a充一個核心修改客戶端的配置修改文件，添加插件添加了這個配置以后，重新啟動項目通過地址就可以訪問到，頁面中出現(xiàn)的內(nèi)容就是所需要的。 從零開始搭建一個vue-ssr 前言 上次我們已經(jīng)實現(xiàn)了從零開始，搭建一個簡單的vue-ssr的demo：從零開始搭建一個vue-ssr（上）。那么這次呢，我們基于v...

    Jochen 評論0 收藏0

  • 第一集: 從零開始實現(xiàn)一套pc端vue的ui組件庫(環(huán)境的搭建)

    摘要：第一集從零開始實現(xiàn)環(huán)境的搭建工程定位本套工程定位在端針對的組件庫名字的由來是我從年養(yǎng)到現(xiàn)在的一直大金毛是我的吉祥物原因本人上一份工作參與了大型的保險公司后臺管理系統(tǒng)的搭建對的端框架有過一定的了解感受到了他們真的很強大同時也存在少許的不足其實 第一集: 從零開始實現(xiàn)(環(huán)境的搭建) 工程定位: 本套工程, 定位在pc端針對vue的ui組件庫 名字的由來 cc是我從2015年養(yǎng)到現(xiàn)在的...

    Ashin 評論0 收藏0

發(fā)表評論

0條評論

0xE7A38A

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<