vue項目實踐1——構建項目

時間 2019-11-11

標籤 vue 項目實踐構建简体版

原文原文鏈接

前言

本文是一篇實踐文，詳細記錄移動端vue項目構建全過程，其中包括webpack、vue-router、axios、eslint、scss等的相關配置。
github地址：https://github.com/sunhuili/v...css

構建過程

vue-cli起項目

一、下載安裝node、git-bash、cnpm。

這裏用的node是8.9.3版本，以前8.1的版本會有點問題，建議升級到最新可用版本。cnpm跟npm功能同樣，npm裝不了的包，能夠用cnpm。html

二、全局安裝vue-cli npm install vue-cli -g
三、使用vue-cli快速搭建vue項目 vue init webpack xxx (xxx爲項目名)
四、以下圖會有一些選項
a>名字、描述、做者直接回車便可（固然也可修改）
b>vue-router默認安裝，直接回車
c>eslint建議安裝，用來約束代碼規範的。能夠選第三個選項‘none’，以後自定義用vue的約束規範。
d>unit tests和e2e tests都是測試的，這裏沒有啓用，若是須要能夠按需啓用。
e>而後裝一下依賴就配好了（能夠直接回車自動安裝，也可手動安裝 npm install）,安裝時間有點久，耐心等待……
f>出現以下圖就安裝好了，到項目文件夾下npm run dev，打開瀏覽器輸入對應路由就能夠看到本身的網站了。
vue

eslint配置

一、安裝eslint-plugin-vue cnpm install --save-dev eslint eslint-plugin-vue，傳送門
二、引用eslint-plugin-vue規範，以下圖所示：
三、相關知識點展開
關於eslint-plugin-vue
a>這裏只需改兩個地方便可。root這些eslint-plugin-vue自己已經配過了，不過跟這裏的配置不衝突，就能夠先不改。
b>eslint-plugin-vue自己提供了四種模式，建議新手從essential入手，以後能夠升級。
c>eslint-plugin-vue已經詳細介紹了各個模式的用途，以及具體的限定規則，能夠沒事看兩眼，固然也能夠翻源碼……

關於自定義規則
在剛剛引用eslint-plugin-vue的文件中有個rules，在這裏就能夠添加咱們自定義的規範。具體的規範設置：eslint中文。node

scss配置

一、安裝node-sasscnpm install --save-dev node-sass、sass-loadercnpm install --save-dev sass-loader。
二、而後再安裝一下全部依賴cnpm install(由於包的安裝順序會有影響，因此先把須要的包保存到package.json，而後讓他自動安裝一遍)
安裝好以後就能夠用scss的語法寫樣式文件了
三、配置webpack中scss文件的解析規則
配置好就能夠新建帶‘.scss’後綴、使用scss語法的樣式文件了。

vuex配置

一、安裝vuex cnpm install --save vuex
二、配置vuex以下圖

a> strict嚴格模式，有利於代碼規範和數據管理
b> modules能夠加入子模塊，建議儘可能把數據存在子模塊中，主入口保持乾淨，只作配置用。子模塊的配置統一在‘文件層級’一節中將，這裏只作初步配置。webpack

axios配置

一、安裝axios cnpm install --save 'axios'
二、配置axios以下圖，axios的配置分爲三部分：全局配置、請求攔截、響應攔截

a>全局配置包括請求時長限制、後端接口處理文件路徑、請求頭配置等
b>請求攔截：發請求前進行一些處理
若請求配置成功，則對post請求參數作序列化處理，而後發請求
若請求配置不成功，則不發請求
c>響應攔截：接收後端響應前進行一些處理
若成功，則表示限定時間內收到了後端響應，即「響應成功」，返回resolve(response.data)。
若失敗，則表示限定時間內沒有收到後端響應，即「響應失敗」，返回reject(error)。
d>針對響應成功，還有請求成功和請求失敗之分，這個由先後端約定執行，在api的配置中實現，這裏只配置axios相關。ios

至此，構建項目的相關配置和依賴包已基本安裝配置完畢，其餘的配置按需自取。接下來開始搭建項目，使用當前配置進行移動端web開發git

移動端項目開發

首先先看一下當前的目錄結構和package.json(只截取依賴包部分，部分構建項目時自動安裝的依賴包沒有截取到)，由於接下來將在現有配置的基礎上開發移動端項目，重點在於文件層級結構的搭建。github

scss實踐

一、創建如圖文件層級結構
a>_reset.scss爲移動端樣式(網上直接能夠搜到)，在App.vue中引入該文件;
b>在index.html中配置好各類移動端meta屬性，而後設置html、body、#app高爲100%;
c>main.js中引入移動端flexible佈局，能夠以iphone爲基準：375的寬度1rem=20px。
d>_variable.scss爲全局樣式參數配置，如主題色$theme-color-black: #333333;等web
二、vue組件中使用scss：只需在style中加入lang=「scss」便可使用scss語法。
三、sass詳情：sass中文、sass入門

文件層級:components、vue-router、vuex、scss

首先明確兩點
一、vue-router、vuex、scss的文件層級跟着組件的文件層級走。
二、組件的文件層級依照項目的功能模塊劃分。
在此基礎上咱們能夠創建以下文件層級結構，儘可能讓根目錄足夠乾淨，文件儘可能收錄在對應的具體模塊文件夾中。
這樣可讓文件層次夠清晰，方便直接找到功能配置和具體業務代碼，這對以後的維護影響仍是很大的。vue-router

咱們能夠初步把組件分爲三類：根組件、頁面組件、其餘組件：

根組件："src/App.vue"，咱們的vue項目開發最終都會聚集到App.vue，編譯後替代index.html中的「#app」標籤。進入網站後先進入main.js、到App.vue，而後再到各個自定義組件，執行對應的事件。
頁面組件："src/view文件夾內的組件，每一個組件都對應一個單獨的頁面，一樣的就要在router文件夾下創建對應的路由。編譯後替代App.vue中的<router-view/>。
其餘組件：src/components文件夾內的組件，通指比頁面組件要次級的組件，做爲模塊被引用。又可分爲模塊組件、公用組件、基礎組件。
一、模塊組件：components/modules文件夾中，被頁面組件做爲模塊引入，實現頁面組件中代碼量大、模塊化程度高、跟頁面內其餘部分交互很少的部分。
二、公用組件：components/public文件夾中，被頁面組件、模塊組件引入，實現項目中複用性強、模塊化程度高、有明確可控交互需求的部分。
三、基礎組件：components/basic文件夾中，被其餘組件引入，實現web開發中通用、模塊化程度高、有明確可控交互需求的部分。