您好,登錄后才能下訂單哦!
前言
之前一段時(shí)間都在使用 vue 開(kāi)發(fā)后臺(tái)管理系統(tǒng),在摸索的過(guò)程中對(duì) vue 本身和模塊化、規(guī)范化開(kāi)發(fā)有了更深的認(rèn)知,現(xiàn)在記錄下來(lái),希望對(duì)其他需要開(kāi)發(fā)項(xiàng)目的人有幫助。
基于 vue.js 的前端開(kāi)發(fā)環(huán)境,用于前后端分離后的單頁(yè)應(yīng)用開(kāi)發(fā),可以在開(kāi)發(fā)時(shí)使用 ES Next、scss 等最新語(yǔ)言特性。下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
項(xiàng)目配置
首先,在確定好使用的框架和組件庫(kù)后,先要大致了解它們,做到文檔基本熟悉。本次開(kāi)發(fā)使用到的有: vue , vuex , axios , elementUI 。
然后可以按官方指引,使用 vue-cli 搭建 vue 的項(xiàng)目,在項(xiàng)目里按照上面的文檔嘗試修改,加深理解:
# 安裝依賴(lài)庫(kù),建議指定 vue 和 element 版本,避免版本升級(jí)帶來(lái)意料之外的 bug $ npm install vue@2.1.6 element-ui@1.4.6 vuex axios #全局安裝腳手架 $ npm install -g vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目my-project $ vue init webpack my-project # 進(jìn)入項(xiàng)目目錄 $ cd my-project # 安裝依賴(lài) $ npm install # 運(yùn)行項(xiàng)目 $ npm run dev
運(yùn)行之后,看到以下頁(yè)面表明項(xiàng)目環(huán)境搭建成功:
項(xiàng)目結(jié)構(gòu)
搭建成功后,使用編輯器打開(kāi)項(xiàng)目目錄,大致是這樣的結(jié)構(gòu):
相關(guān)文件和文件夾的含義:
src 文件夾結(jié)構(gòu)
src 文件夾里的文件夾設(shè)置是靈活的,可以根據(jù)自己的習(xí)慣進(jìn)行,不必雷同。下面是這次項(xiàng)目的結(jié)構(gòu):
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。