寫在前面--最近接手了一個活動頁，決定採用Vue來進行開發，不再與主站的React相關聯，所以我也就有機會可以從頭開始，一步一步的搭建整個專案並且自己決定技術棧。反正，就是很爽~
關於Vue我感覺不需要再做介紹了，在掘金隨便一搜都有一堆，不過如果大家實在沒聽說過，我還是十分建議直接進入Vue的官方文件進行閱讀。
專案背景
最近，接了一個活--一個完全獨立的活動頁開發，由於它跟公司原有的專案(基於React)幾乎完全沒有依賴關係，所以我決定採用Vue來開發這次的需求。前端專案的技術框架初步定為--Vue/Vue-router/axios/sass/webpack。看到vue和webpack相信大家一下就能想到vue-cli吧，對的，我們這次專案選用了vue-cli-webpack作為腳手架。
vue-cli:居家必備
我們假設vue的起手難度是10個難度級別，但是當我們使用了vue-cli之後，我們會發現這個難度就變成了1個難度級別，(好像我們的施法前後搖都被取消了一樣)安裝好vue-cli之後我們就可以直接開始我們的生產了，無論是vue亦或是webpack的配置都不需要我們理會，並且還能夠使用vue-template來加快開發速度。那麼讓我們開始搭建我們的腳手架吧--
$ npm install -g vue-cli
$ vue init webpack kurisu //'webpack'指定了我們希望專案是使用webpack進行打包的
$ cd kurisu
$ npm install
$ npm run dev
複製程式碼整個流程就是這麼簡單，前提是你需要安裝Node(6.x版本以上)以及NPM(3.0版本以上)。現在我們有了真正意義上的腳手架了，接下來就要著手往上堆東西了。
我是誰？我在哪？我開發什麼？我需要什麼？
在專案伊始，相信大家都遇到過這個問題，我們所開發的專案到底需要怎麼開發、它需要什麼工具、或是有什麼能夠為它所用。
這回我需要開發的是一個移動端的活動頁，移動端移動端，自然就少不了對螢幕的適配啦。以切圖半年的經驗，我選擇rem作為頁面開發的單位，其實就是借鑑了淘寶flexible的那一套。既然用到了這個，那麼css的預編譯器就少不了了，這裡選擇了之前一直都在用的scss，但是最近聽說stylus也不錯，小糾結了一會，最終還是選擇現在看來開發效率最高的scss。
好了，回看上面那段話，好像已經給自己挖了不少坑了，讓我們一個個來填。
-
移動端Html
關於移動端的html要說的不多，最重要的這句在就好了--
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> 複製程式碼 -
Rem佈局
Rem是啥？簡單來說是css中的一個單位，以html的font-size作為單位的標準也就是說
html { font-size: 100px; } 複製程式碼此時1rem也就等於100px，嗯嗯這些我都懂，但是他跟移動端開發有什麼必然關係嗎？可以說有也可以說無，用了rem作為開發單位可以提升開發效率，降低視覺稿還原難度，也能增強頁面在不同螢幕上的適應能力。 下面是在專案中的Global.scss的配置--
html { font-size: calc(100vw/7.5); /*有了這一行就代表html的font-size是動態計算的，它隨著我們螢幕的大小(100vw)變化而變化*/ } 複製程式碼那麼其中的7.5是什麼呢？其實是這樣的--100vw/750px，為什麼是750px，因為這是標準iPhone7尺寸的兩倍也就是俗稱的二倍圖，這樣處理之後1rem就等於iPhone7手機頁面中的100px，那為什麼要除7.5呢？個人認為是為了方便書寫。
@function px2rem($n) { @return $n/100*1rem } 複製程式碼定義了這一個方法之後，我們想做設計稿(二倍圖)中一個100x100px的正方形時可以這麼寫：
.somediv { width: px2rem(100); height: px2rem(100); /*px2rem(100) ==> 375px螢幕中的50px*/ } 複製程式碼不知道大家發現沒有，這就代表著我們可以完全照搬設計稿中的所有引數，並且基本可以忽略不同尺寸螢幕的適配情況，因為rem的基礎單位是會隨著螢幕尺寸變化而變化的，但是有一點可能有問題,那就是Retina屏的精度問題關於這裡的適配大家可以去尋找相關的博文檢視一下，如果要細講的話可能就偏題了。
-
SCSS配置
說了這麼多次scss，好像還沒講應該怎麼將scss接入webpack中。
首先把相關的依賴裝好--
(c)npm install node-sass --save-dev //安裝node-sass (c)npm install sass-loader --save-dev //安裝sass-loader //本來應該還要裝一個style-loader的但是一般我們用vue-cli之後都是有vue-style-loader的所以就不需要再折騰了。 複製程式碼緊接著就配置一下我們的webpack.base.conf.js
module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, //新增下面這一段即可，讓webpack使用相關的loader去解析scss字尾的檔案 { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] } 複製程式碼這樣就完成了在vue專案中引用scss的需求啦，還有一點需要注意的是該怎麼在vue-template中引用，這裡其實有幾種不同的引用方法，就先介紹一下我的引用方式--
<style lang="scss" scoped> @import "./Index.scss"; </style> 複製程式碼個人傾向於一一對應的引用模式，每一個page我都會新建對應的資料夾，並將與之相關的東西都放到一起。
與全域性相關的樣式則放在Global.scss中由App.vue引入，Utils.scss則是用來放一些公用但不公共的樣式或方法。另外還有一種方式--將所有的scss檔案都import進一個總的scss檔案，然後在App.vue中引入這個總的scss檔案即可。
舞臺搭建完畢
至此，已經基本完成了vue專案的腳手架，我們可以很愜意的往專案裡面填肉了。下一篇，將會結合具體開發的頁面，記錄一下途中遇到的問題和填過的坑。
往期文章
