前言

之前一段時(shí)間都在使用 vue 開發(fā)后臺(tái)管理系統(tǒng)，在摸索的過(guò)程中對(duì) vue 本身和模塊化、規(guī)范化開發(fā)有了更深的認(rèn)知，現(xiàn)在記錄下來(lái)，希望對(duì)其他需要開發(fā)項(xiàng)目的人有幫助。

基于 vue.js 的前端開發(fā)環(huán)境，用于前后端分離后的單頁(yè)應(yīng)用開發(fā)，可以在開發(fā)時(shí)使用 ES Next、scss 等最新語(yǔ)言特性。下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

項(xiàng)目配置

首先，在確定好使用的框架和組件庫(kù)后，先要大致了解它們，做到文檔基本熟悉。本次開發(fā)使用到的有： vue ， vuex ， axios ， elementUI 。

然后可以按官方指引，使用 vue-cli 搭建 vue 的項(xiàng)目，在項(xiàng)目里按照上面的文檔嘗試修改，加深理解：

# 安裝依賴庫(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
# 安裝依賴
$ npm install
# 運(yùn)行項(xiàng)目
$ npm run dev

運(yùn)行之后，看到以下頁(yè)面表明項(xiàng)目環(huán)境搭建成功：

項(xiàng)目結(jié)構(gòu)

搭建成功后，使用編輯器打開項(xiàng)目目錄，大致是這樣的結(jié)構(gòu)：

相關(guān)文件和文件夾的含義：

• build 文件夾: 里面是對(duì) webpack 開發(fā)和打包的相關(guān)設(shè)置，包括入口文件、輸出文件、使用的模塊等；
• config 文件夾: 主要是指定開發(fā)和打包中的靜態(tài)資源路徑、要壓縮的文件類型、開發(fā)使用的端口號(hào)、開發(fā)使用虛擬服務(wù)器跨域請(qǐng)求 api 等。
• node_modules: 項(xiàng)目的依賴庫(kù)；
• src 文件夾： 我們主要操作的地方，組件的增加修改等都在這個(gè)文件夾里操作，下文會(huì)有詳細(xì)介紹；
• static 文件夾: 靜態(tài)資源文件夾，放置不會(huì)變動(dòng)的資源，直接被復(fù)制到最終的打包目錄（默認(rèn)是dist/static）下；
• .babelrc: 使用 babel 的配置文件，用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件；
• .editorconfig: 代碼的規(guī)范文件，規(guī)定使用空格或 tab 縮進(jìn)，縮進(jìn)的長(zhǎng)度是兩位還是四位之類的代碼風(fēng)格，使用的話需要在編輯器里下載對(duì)應(yīng)的插件；
• .eslintignore: 指定 eslint 忽略的文件；
• .eslintrc: 配置 eslint 的檢測(cè)規(guī)則，強(qiáng)制按照規(guī)則書寫代碼；
• .gitignore: 指定 git 忽略的文件，所有 git 操作均不會(huì)對(duì)其生效；
• .postcssrc: 指定使用的 css 預(yù)編譯器，里面默認(rèn)配置了 autoprefixer ，自動(dòng)補(bǔ)全瀏覽器前綴；
• favicon.ico: 瀏覽器標(biāo)簽頁(yè) title 旁邊的小圖標(biāo)，這是需要我們自己粘貼過(guò)來(lái)的；
• index.html: 首頁(yè)文件，項(xiàng)目運(yùn)行的時(shí)候，會(huì)自動(dòng)將我們?cè)?src 文件夾里生成的組件插入這個(gè)文件里；
• LICENSE: 項(xiàng)目聲明的 license；
• package-lock.json: 當(dāng) node_modules 或 package.json 發(fā)生變化時(shí)自動(dòng)生成的文件。這個(gè)文件主要功能是確定當(dāng)前安裝的包的依賴，以便后續(xù)重新安裝的時(shí)候生成相同的依賴，而忽略項(xiàng)目開發(fā)過(guò)程中有些依賴已經(jīng)發(fā)生的更新；
• package.json: 指定項(xiàng)目開發(fā)和生成環(huán)境中需要使用的依賴庫(kù)；
• README.md: 相當(dāng)于是一個(gè)備注文件，對(duì)項(xiàng)目開發(fā)過(guò)程中需要注意的地方進(jìn)行一些說(shuō)明。

src 文件夾結(jié)構(gòu)

src 文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習(xí)慣進(jìn)行，不必雷同。下面是這次項(xiàng)目的結(jié)構(gòu)：

• assets: 放置靜態(tài)資源，包括公共的 css 文件、 js 文件、iconfont 字體文件、img 圖片文件 以及其他資源類文件。之所以強(qiáng)調(diào)是公共的 css 文件，是因?yàn)橐诮M件的 css 標(biāo)簽里加入 ‘scoped‘ 標(biāo)記，將其作用范圍限制在此組件以及調(diào)用它的父級(jí)組件中，避免污染全局樣式；
• components: 放置通用模塊組件。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框、發(fā)送手機(jī)驗(yàn)證碼、圖片上傳等，將它們作為通用組件，避免重復(fù)工作；
• http: 放置與后臺(tái) api 相關(guān)的文件。這里面有 axios 庫(kù)的實(shí)例配置文件、使用配置的 axios 實(shí)例接入 api 獲取數(shù)據(jù)的函數(shù)的集合的文件；
• mixins: 放置混合選項(xiàng)的文件。具體來(lái)說(shuō)，相當(dāng)于是公用函數(shù)的集合，在組件中引用時(shí)，可以作用于組件而不必書寫重復(fù)的方法；
• pages: 放置主要頁(yè)面的組件。例如登錄頁(yè)、用戶信息頁(yè)等。通常是這里的組件本身寫入一些結(jié)構(gòu)，再引入通用模塊組件，形成完整的頁(yè)面；
• router: 放置路由設(shè)置文件，指定路由對(duì)應(yīng)的組件；
• store: 放置 vuex 需要的狀態(tài)關(guān)聯(lián)文件，設(shè)置公共的 state、mutations 等；
• App.vue: 入口組件，pages 里的組件會(huì)被插入此組件中，此組件再插入 index.html 文件里，形成單頁(yè)面應(yīng)用；
• main.js: 入口 js 文件，影響全局，作用是引入全局使用的庫(kù)、公共的樣式和方法、設(shè)置路由等。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論