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

資訊專欄INFORMATION COLUMN

使用Vue構(gòu)建中(大)型應(yīng)用

Rindia / 1484人閱讀

摘要：做前端路由管理，一個(gè)中大型項(xiàng)目必須要做路由管理做數(shù)據(jù)管理，類似于的存在，沒(méi)有，中大型應(yīng)用中的狀態(tài)會(huì)把開發(fā)者搞死，絕對(duì)。

想做SPA就快上車！

init

首先要起一個(gè)項(xiàng)目，推薦用vue-cli安裝

$ npm install -g vue-cli
$ vue init webpack demo
$ cd demo
$ npm install

demo是這個(gè)示例項(xiàng)目的名字

現(xiàn)在看到目錄結(jié)構(gòu)如下

下面來(lái)稍微介紹下

build目錄是一些webpack的文件，配置參數(shù)什么的，一般不用動(dòng)

src源碼文件夾，基本上文件都應(yīng)該放在這里。

static生成好的文件會(huì)放在這個(gè)目錄下。

test測(cè)試文件夾，測(cè)試都寫在這里

.babelrc babel編譯參數(shù)，vue開發(fā)需要babel編譯

.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒(méi)有使用過(guò)。

.eslintrc.js eslint配置文件，用以規(guī)范團(tuán)隊(duì)開發(fā)編碼規(guī)范，大中型項(xiàng)目很有用

.gitignore 用來(lái)過(guò)濾一些版本控制的文件，比如node_modules文件夾

index.html 主頁(yè)

package.json 項(xiàng)目文件，記載著一些命令和依賴還有簡(jiǎn)要的項(xiàng)目描述信息

README.md 介紹自己這個(gè)項(xiàng)目的，想怎么寫怎么寫。不會(huì)寫就參照github上star多的項(xiàng)目，看人家怎么寫的

下面我針對(duì)自己的需要修改一些配置。你可以根據(jù)自己的需要進(jìn)行修改。

首先去寫.eslintrc.js。在rules中加入"indent": [1, 4, { "SwitchCase": 1 }]

因?yàn)槲腋矚g4個(gè)空格表一個(gè)縮進(jìn)，報(bào)警程度調(diào)整成1是因?yàn)閎uild文件夾里有很多行是2個(gè)空格，草草的。

然后在index.html中的改成

這個(gè)文件沒(méi)有寫入任何加載css和js的link，而依舊可以正常運(yùn)行的秘訣在于webpack會(huì)在編譯的時(shí)候重新調(diào)整這個(gè)文件，注入依賴，所以不用太擔(dān)心。

好了，差不多了。進(jìn)行下一步

添加依賴

我個(gè)人習(xí)慣寫stylus，所以要加上預(yù)處理器，如果喜歡sass可以自行添加。

vue-router做前端路由管理，一個(gè)中大型項(xiàng)目必須要做路由管理！

vuex做數(shù)據(jù)管理，類似于flux的存在，沒(méi)有vuex，中大型應(yīng)用中的狀態(tài)會(huì)把開發(fā)者搞死，絕對(duì)。

$ npm install --save vue-router vuex
$ npm install --save-dev stylus-loader babel-runtime

好了，到這里，依賴也加好了。剩下的就是寫代碼了？

不急，我先說(shuō)下兩個(gè)vue插件的介紹

vue-router 簡(jiǎn)明API

vue-router用起來(lái)非常的簡(jiǎn)單

入口文件(src/main.js)：

"use strict"
import Vue from "vue" // 引入vue
import Router from "vue-router" // 引入vue-router

import App from "./App" // 引入根組件
import routerMap from "./router" // 引入路由表

Vue.use(Router) // 聲明使用vue-router
const router = new Router() // 創(chuàng)建路由
routerMap(router) // 路由表引入

router.start(App, "#root") // 開啟應(yīng)用

看到缺了一個(gè)./router.js文件，來(lái)，創(chuàng)建。

// src/router.js
"use strict"

export default function (router) {
    router.map({
        "/": {
            name: "index",
            component: require("./components/contents/hello.vue")
        },
        "/hi": {
            name: "hi",
            // 按需加載
            component: function (resolve) {
                require(["./components/contents/hi.vue"], resolve)
            }
        }
    })
}

好了，路由創(chuàng)建成功了，順便還搞了個(gè)按需加載。

那么在模板文件中如何使用？

很簡(jiǎn)單的，就像這樣就可以了。


跳轉(zhuǎn)到hi

還有，告訴應(yīng)用哪里需要路由轉(zhuǎn)換
vuex 簡(jiǎn)明API

這里簡(jiǎn)要介紹一下狀態(tài)管理的vuex

在src下創(chuàng)建一個(gè)文件夾叫做vuex。里面定義三個(gè)文件。

mutation-types.js 定義類型的

actions.js 操作，可以分解成多個(gè)文件

store.js 入口文件，在根組件調(diào)用，然后所有子組件可以共享數(shù)據(jù)。

modules/headers.js 只是例子用的，一個(gè)headers的操作，需要定義數(shù)據(jù)的狀態(tài)和mutation。action.js只是分發(fā)操作。

這一塊還是看源碼比較容易懂。

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = "SET_HEADER_TITLE"
// src/vuex/store.js
import Vue from "vue"
import Vuex from "vuex"
import headers from "./modules/headers"
import createLogger from "vuex/logger"
Vue.use(Vuex)

Vue.config.debug = true

const debug = process.env.NODE_ENV !== "production"

export default new Vuex.Store({
    modules: {
        headers
    },
    strict: debug,
    moddlewares: debug ? [createLogger()] : []
})
// src/vuex/actions.js
import {
    SET_HEADER_TITLE
} from "./mutation-types"

export const setTitle = makeAction(SET_HEADER_TITLE)

function makeAction (type) {
    return ({ dispatch }, ...args) => dispatch(type, ...args)
}
// src/vuex/modules/headers.js
import {
    SET_HEADER_TITLE
} from "../mutation-types"

const state = {
    title: "default"
}

const mutations = {
    [SET_HEADER_TITLE](state, newTitle) {
        state.title = newTitle
    }
}

export default {
    state,
    mutations
}

我再說(shuō)兩個(gè)，一個(gè)掛載store，一個(gè)獲取數(shù)據(jù)，觸發(fā)操作。

掛載store 
// src/App.vue
import store from "./vuex/store"
import HeaderComponent from "./components/header"
import FooterComponent from "./components/footer"
export default {
    store,
    components: {
        HeaderComponent,
        FooterComponent
    }
}
獲取數(shù)據(jù)及操作 
// src/components/header.vue
// 從vuex拿數(shù)據(jù)，然后渲染到頁(yè)面上
// 如果需要修改可以調(diào)用setTitle
import { setTitle } from "../vuex/actions"
export default {
    vuex: {
        getters: {
            title: state => state.headers.title
        },
        actions: {
            setTitle
        }
    }
}
fetch

單頁(yè)應(yīng)用少不了服務(wù)端交互，別老用ajax了，換fetch吧，少年！

$ npm install --save isomorphic-fetch es6-promise
// src/vuex/actions.js
require("es6-promise").polyfill()
require("isomorphic-fetch")

我在示例代碼中并沒(méi)有寫。

fetch用起來(lái)根本不會(huì)回憶ajax時(shí)代的。

stylus

在之前的文章中安利過(guò)很多次stylus了，各種方便，這里一筆帶過(guò)，喜歡的同學(xué)自然會(huì)去找文檔

test

測(cè)試是非常重要的一環(huán)。要想以后不出亂子，一定要盡早寫好測(cè)試。

示例代碼中有少量測(cè)試，推薦看一下

Code

我還是決定不在文章里寫代碼了。

多端

vue創(chuàng)作的應(yīng)用不僅可以跑在瀏覽器里，還可以通過(guò)electron以客戶端的形式跑起來(lái)！

是不是吊吊的。

至于移動(dòng)端，聽聞阿里內(nèi)部有在開發(fā)Weex，類vue的api。等待開源吧。

未來(lái)

未來(lái)js的前途肯定是不錯(cuò)的！加油～

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

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

相關(guān)文章

  • 學(xué)習(xí)meteor時(shí)遇到的問(wèn)題

    摘要：簡(jiǎn)單記錄一下學(xué)習(xí)時(shí)遇到的問(wèn)題，將會(huì)持續(xù)更新基于的前端方案方案大概有后端模板結(jié)合型和前端后端分離型兩種，支持的包也比較多，目前尤大推薦使用的方案相對(duì)靠譜。 簡(jiǎn)單記錄一下學(xué)習(xí)meteor時(shí)遇到的問(wèn)題，將會(huì)持續(xù)更新！ 基于meteor的前端方案 方案大概有后端模板結(jié)合型和前端后端分離型兩種，支持的包也比較多，目前尤大推薦使用webpack:webpack的方案相對(duì)靠譜。 博主自己寫的例子：m...

    lemanli 評(píng)論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來(lái)構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

    yearsj 評(píng)論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來(lái)構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

    godiscoder 評(píng)論0 收藏0

  • angular，react & vue

    摘要：由進(jìn)行開發(fā)和維護(hù)，代發(fā)布于年月，現(xiàn)在主要是。狀態(tài)是只讀的，只能通過(guò)來(lái)改變，以避免競(jìng)爭(zhēng)條件這也有助于調(diào)試。文件大小為，而為，為。請(qǐng)記住，性能基準(zhǔn)只能作為考慮的附注，而不是作為判斷標(biāo)準(zhǔn)。使用的人員報(bào)告說(shuō)，他們永遠(yuǎn)不必閱讀庫(kù)的源代碼。 本文當(dāng)時(shí)寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。 angular，react & vue 2018/07/23 2016年，對(duì)于JavaScript來(lái)說(shuō)...

    jiekechoo 評(píng)論0 收藏0

  • 也許你并不需要第三方小程序框架

    摘要：所以在小程序出現(xiàn)之后，一股框架之風(fēng)也很快的出現(xiàn)，微信小程序剛推出之后，就出現(xiàn)了兩個(gè)比較出名的小程序開發(fā)框架，。 原文地址：https://ant-move.github.io/we... 這里說(shuō)的去除小程序框架其實(shí)并不嚴(yán)謹(jǐn)，因?yàn)樾〕绦虮旧硪菜闶且粋€(gè)框架，而且是一個(gè)功能更加完善的框架系統(tǒng)。在前端的概念中，我們一般說(shuō)一個(gè)框架是指一個(gè)用來(lái)幫助開發(fā)者構(gòu)建用戶界面的框架，而小程序框架本身不僅僅包...

    red_bricks 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<