記從無到有的活動頁開發-1

寫在前面--最近接手了一個活動頁，決定採用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項目的腳手架，咱們能夠很愜意的往項目裏面填肉了。下一篇，將會結合具體開發的頁面，記錄一下途中遇到的問題和填過的坑。

往期文章

• 移動端自制音樂播放器--React
• 移動端中踩過的關於日曆&時間的坑
• 談談React--componentWillReceiveProps的使用