记从无到有的活动页开发-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的使用