從零開(kāi)始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（二）

0xE7A38A 發(fā)布于2019-08-20 16:56 / 2409人閱讀

從零開(kāi)始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（二） 1.配置圖片路徑

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

/staic/img

，這種方法的缺點(diǎn)在于webpack不會(huì)識(shí)別根目錄，所以發(fā)布的時(shí)候需要手動(dòng)把圖片文件夾添加進(jìn)去

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

這里可以配置webpack的路徑，在 alias 選項(xiàng)添加一下圖片的路徑，修改為

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "vue$": "vue/dist/vue.esm.js",
      "@": resolve("src"),
      "assets": path.resolve(__dirname, "../src/assets") // 后面的參數(shù)就是靜態(tài)文件目錄
    }
}

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

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

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

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

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

2.配置路由（vue-router）

vue-router
這里我們來(lái)配置一個(gè)json控制的路由，先做到二級(jí)子路由，以后考慮遞歸來(lái)處理三級(jí)路由

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

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

我們創(chuàng)建了四個(gè)目錄，分別是foo bar home parent，我直接用 parent 來(lái)講解一下

parent
├── parent.vue                        - parent組件
├── index.js                              - 用于導(dǎo)出，并且命名導(dǎo)出的文件
│   ├── components                       - 存放parent的子組件

parent.vue

index.js

export const parent = r => require.ensure([], () => r(require("./parent.vue")), "parent"); 
// 這里有三個(gè)parent，分別是導(dǎo)出的模塊名（可直接操作的組件），導(dǎo)出的路徑，導(dǎo)出的名稱(chēng)（打包時(shí)的名稱(chēng)，在后面會(huì)有講解）
export * from "./components";//將父元素關(guān)聯(lián)的子元素的路徑export

現(xiàn)在用同樣的方法，把其他四個(gè)文件都導(dǎo)出一下，最后在pages/index.js中全部導(dǎo)出

export * from "./home"; //首頁(yè)入口
export * from "./foo"; 
export * from "./bar"; 
export * from "./parent";

進(jìn)入router文件夾，新建一個(gè)文件，router.json，用于存放我們的路由配置，注意json文件中不能添加注釋?zhuān)⑶腋袷接邢拗?/p>

[
  {
    "path": "/home", // 路徑可隨意配置
    "component": "home", // 這里的組件名對(duì)應(yīng)上面導(dǎo)出的組件名
    "name": "home" // 這個(gè)名稱(chēng)也可配
  },
  {
    "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改寫(xiě)一下，把我們的json導(dǎo)入

import Vue from "vue";
import VueRouter from "vue-router";

import * as page from "../pages"; // 這里可以把我們上面的組件全部重新導(dǎo)入
Vue.use(VueRouter);

import NavConfig from "./router.json"; //導(dǎo)入我們的json

// 返回一個(gè)新的路由配置
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;

這個(gè)時(shí)候假如需要新增一個(gè)路由，只需要修改router.json文件即可（記得在pages導(dǎo)出模塊，否則會(huì)報(bào)錯(cuò)）

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

一個(gè)團(tuán)結(jié)互助的討論組，專(zhuān)注前端三十年！

GPU云服務(wù)器云服務(wù)器從零開(kāi)始搭建前端數(shù)據(jù)監(jiān)控系統(tǒng) 從零開(kāi)始搭建騰訊云服務(wù)器云服務(wù)器搭建vue項(xiàng)目阿里云服務(wù)器搭建vue項(xiàng)目

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83265.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

0xE7A38A

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何徹底卸載刪除Google Update服務(wù)?

閱讀 4395·2021-11-18 13:19
??國(guó)慶七天的總結(jié)

閱讀 1225·2021-10-11 10:58
移動(dòng)端用戶(hù)體驗(yàn)（UE）優(yōu)化歷程

閱讀 3336·2019-08-29 16:39
網(wǎng)絡(luò)操作回調(diào)函數(shù) http

閱讀 3194·2019-08-26 12:08
js異步解決方案 --- 回調(diào)函數(shù) vs promise vs generater/yield vs

閱讀 2115·2019-08-26 11:33
Undefined和Null

閱讀 2515·2019-08-23 18:30
【10】JavaScript 面向?qū)ο蟾呒?jí)——繼承模式

閱讀 1375·2019-08-23 18:21
【js】what is 繼承

閱讀 2575·2019-08-23 18:18

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從零開(kāi)始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（二）

相關(guān)文章

**從零開(kāi)始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（一）**

**從零開(kāi)始搭建React同構(gòu)應(yīng)用（二）：瀏覽器端工程化**

**從零開(kāi)始搭建一個(gè)vue-ssr（下）**

**第一集: 從零開(kāi)始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(環(huán)境的搭建)**

發(fā)表評(píng)論

0條評(píng)論

0xE7A38A

男|高級(jí)講師

TA的文章

如何徹底卸載刪除Google Update服務(wù)?

??國(guó)慶七天的總結(jié)

移動(dòng)端用戶(hù)體驗(yàn)（UE）優(yōu)化歷程

網(wǎng)絡(luò)操作回調(diào)函數(shù) http

js異步解決方案 --- 回調(diào)函數(shù) vs promise vs generater/yield vs

Undefined和Null

【10】JavaScript 面向?qū)ο蟾呒?jí)——繼承模式

【js】what is 繼承

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從零開(kāi)始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（二）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！