vue之webapp实战

一、首先配置开发环境（我的是win7+64位操作系统）

    1.先下载并安装node.js。点击windows键，在输入栏输入cmd，打开控制命令窗口，随后输入node -v然后回车查看node的版本，若显示node的版本，则表示node安装成功；

    2.然后安装vue-cli。在控制命令窗口输入：npm install -g vue-cli。然后等待安装完毕。注意：如果是mac环境下，要在前面加上sudo,即输入：sudo npm install -g vue-cli。安装完毕之后，输入vue，然后会显示以下图示信息，然后再输入vue list可以查看可用的模板列表。

    3.下载模板。这里下载的是webpack，输入vue init webpack sell(这个sell是项目名称，根据自己的项目自行取名)，然后回车。这里强烈建议大家不要使用台式机！就是win7+32位操作系统。不然会出现以下错误信息！博主找了很多方法都不管用！最后用笔记本一下就好了！（win7+64位操作系统）

正常的界面应该是这样的，会直接显示项目名字

    4.随后按照操作一步一步往下走即可，项目描述（sell app），作者等按照自己的需求来。ESLint是一个代码规范工具，vue路由是要安装的，unit tests和e2e tests可以跳过不用安装。下面的一个问号意思现在可以安装项目依赖了吗？直接回车等待安装就好了。

    5.安装完毕之后，首先要进入创建项目的文件夹，即输入cd sell，进入之后，然后再输入npm run dev，会出现一行提示信息：You application is running here:http://localhost:8080。然后打开浏览器在地址输入栏输入localhost:8080就可以显示项目页面了。

    6.在浏览器输入localhost:8080后会出现以下界面。这个界面是默认的，我们可以在项目文件里修改成我们自己的。

    至此，我们的开发环境搭建完毕。但是接下来才是真正磨炼耐心的时候。

二、模拟后台数据

    我们都知道，环境搭建好了，只需要好好看看官网文档就可以学习编写web app了，但是你需要数据去支持你的设计，所以在设计之前你需要先模拟后台，看是否前台能访问到你写的假数据，这样对你的开发会有很大的方便和帮助。

    1.直接将写好的数据，放在根目录下，这里我的项目假数据是data.json，记得是json数据格式。

    2.既然有了数据库，那么我们在开发的时候直接访问data.json文件里的数据即可，那么接下来需要用到vue-resource，因为vue实现ajax获取后台数据是通过vue-resource的，这个在官网里应该可以查找的到。所以既然要用到vue-resource，那么我们必须要先安装才行。在控制命令窗口输入：npm install vue-resource --save

    3.安装完成以后，需要在需要用它的位置引入它才行。那么用到它的位置到底是啥文件呢？这个大家应该可以想到，肯定是在app.vue里引用，因为app.vue是整个单页面应用的最外围框架。但是这里引入的代码肯定是用js写的，那么肯定是写在js文件里的，而与app.vue同级的文件只有main.js，所以要写在main.js文件里才ok。

    4.在main.js里写下：import VueResource from 'vue-resoucre';这句是引入vue-resoucre，还不是用，还要写下一句代码：Vue.use(VueResource)才算是对vue-resoucre的真正使用。

    5.现在是模拟好后台数据环境了，那么接下来是要搭建一座用于联系前端和后台的桥梁，也就是我们要访问数据对应的api，那么怎么搭建呢？在配置文件webpack.dev.conf.js文件里开始搭建，即直接将下列代码复制粘贴上去即可。

const appData = require('../data.json');
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;

    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      });
      app.get('/api/goods', function (req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      });
      app.get('/api/ratings', function (req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      });
    },

    注意：下面的这一段代码需要放在devServer下！具体放在哪里如图示：

  6.这个时候桥梁已经搭建完毕，在命令控制窗口下输入:npm run dev运行之后，在浏览器地址栏输入localhost:8080/api/seller或者localhost:8080/api/goods或者localhost:8080/api/ratings，就可看到对应的数据。

    7.mock数据（模拟后台）详细信息可以参考链接：点击打开链接

三、组件的使用

    初期用vue学习项目的时候或者新手学习得时候很容易对组件的使用模糊不清，就是好像是跟着官网文档走了一遍，最后还是无法实现组件的效果，觉得很是麻烦，或者就直接没有动力学下去了。这里总结下组件的使用几个步骤。

    1.创建一个vue文件，这里命名为header.vue。创建好了之后，会自动生成一个vue模板，就是在<template>标签里写HTML语句，在<script>标签里写js代码，在<style>标签里写样式。注意：<template>标签里只能写一个<div>！不能有其他同级的标签！

    2.将header.vue文件里的HTML写完之后，便可开始使用这个header组件了，相当于某人要入职工作过程类似。具体使用步骤分四步：

        （1）要先清楚你是在哪里应用的这个组件（即找准其应用的母文件）===你即将要在哪工作

       （2）在应用它的文件（也是一个vue文件）的<script>标签中写下：import 文件名 from '文件路径'。例如：import header from './components/header/header.vue'。意思是该组件先在这里注册一下，证明有这个组件，也就是导入的意思===入职前把档案袋递交至公司档案处，方便公司获知你的个人信息

        （3）然后，注册之后，需要在export default{}里面找到挂载点，找到之后再进行进一步命名===人事部知道你的入职信息后，给你分配工作的地方

        （4）最后，在指定的地方把组件名字以标签的形式写上去即可===分配完毕之后，自己找到具体的工作地方开始工作

    3.将组件导入进去之后，便可在浏览器刷新，查看显示效果。

    注意：这里需要提醒的是，每当创建一个vue文件的时候，必须在该文件的<script>标签里写下：export default {}！括号中可写可不写，按照需求来。

四、stylus的使用（可选择性使用）

    stylus是CSS预处理器之一，它是2010年产生，主要用来给Node项目进行CSS预处理支持，与NodeJS走得很近，与JavaScript联系非常紧密。开发者可以自由选择是否使用。

    1.经过上述三个大步骤之后，如果开发中有用到stylus，但是服务器会显示报错，这并不代表你没有安装，因为在安装vue-cli的时候已经把这部分给包含了，至于为什么报错是因为在配置文件中未将stylus信息添加进去。

    2.在package.json文件中将以下信息写进去：

"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",

    3.重新在命令控制窗口输入：npm install  

    4.完成后，最后再输入：npm run dev即可，然后在浏览器中查看效果，会发现stylus的语法能识别了。

五、vue-router的使用方法

    Vue中的路由相当于pc里面的锚点超链接，就是点击了某个地方，局部会转向另一个地方。即页面的切换需要用到vue-router（这里的意思是在单页面内进行切换）。而且路由的使用方法跟组件使用方法很是类似。

    1.首先要创建各个要转向的页面，即点击某个地方后要跳转的页面（也是vue文件）===即将工作的地方

    2.创建完毕之后，需要在router文件下的index.js文件里引入并声明，首先是import 文件名 from '文件路径'。例如：import seller from '../components/seller/seller.vue'，引入之后接下来需要声明路由名字和路径===提交个人信息

    3.准备工作完毕之后，接下来便要在目的页面将这几个页面分别用<router-link>标签写进到指定位置===分配工作的地点

    4.第四步是与组件使用最大的一个差别，就是路由最后还要进一步渲染页面，即要使用<router-view>标签进行渲染===正式入职

    5.下面给出router使用步骤图，第一步是创建，即左边红色框出的部分；第二步是引入，即右上红色框出来的部分；第三步是声明组件名字和路径，左下角红色框出的部分；第四部分见第二张图，放在指定位置（上面三个红色框）和渲染（第四个红色框部分）。

    6.全部操作完毕之后，在浏览器里就可看到显示效果。

    7.补充：上述第五步中，声明组件名字和路径还可以用另一种方式进行，如下图所示：

六、兼容（适配）各种移动设备的方法。即使用rem单位即可满足所有移动端的适配工作，完美显示相同的布局。这里有个插件可供我们引用：px2rem。很方便的就可以将px单位换算成rem单位，不需要人工去计算去改写。px2rem的官网：https://www.npmjs.com/package/px2rem

使用方式： 
1、安装 npm install px2rem-loader 或者 cnpm install px2rem-loader 
2、vue中配置 在build下的 utils.js中，找到generateLoaders 方法，在这里添加 。

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64//设计稿宽度/10
    }
  };

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

3、安装配置结束后，然后在mian.js文件里引入：import 'px2rem-loader'即可；

4、重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了。 

5、但是效果是过于浓缩了，读者可自行验证；这里博主建议再安装一个lib-flexible联合使用比较好；

6、首先是要安装npm i lib-flexible --save；然后是引入：import 'lib-flexible/flexible'即可，再次重启查看效果；

7、使用时，为了防止字体大小fontSize出现奇数单位，可将单位px不转为rem 。在fontSize>30px时才转成rem 。 
font-size:26px /* no*/ px不转成rem 
font-size:26px px转成rem

本文只是对vue中使用px2rem方式的说明，想要研究原理的请移步到官网或github 。

七、开发剩下的。这部分大家完全可以根据自己的情况进行项目剩余的开发，因为下面的开发基本跟传统的mvc模式差不多，只不过js的写法要服从vue规范才行，也就是说，下面的一些设计都是按照vue的写法来的，这个需要大家线下去学习官网的知识。

八、补充下可能容易犯错的地方

    1.引用文件的时候一定要清楚路径！

    2.我用的是webStorm编辑器（推荐，很好用），它能智能显示你出错的地方，它会在你错误的地方显示红色的波浪线；另外就是它会把一些变量显示为灰色，如果这些变量没有被使用的话。

    3.将获取的数据展示在前端时，一定要记得正确的引用方法，属性和数据的绑定都用v-bind，举个例子，我要使用seller的数据可以这样写：<div class='seller' v-bind:seller='seller'>，也可简写为<div class='seller' :seller='seller'>，记得不要忘记冒号！这里是显示的地方，还没定义seller这个数据对象。这个时候需要在指定的vue文件的<script>标签里写上一个props属性，属性里面定义seller对象，并且seller对象的类型为Object。当然了，一切的前提是你必须先发起请求！不然是获取不到数据的！看图也许更清楚些：

发起请求获取seller全部数据：

将seller全部数据引用：

定义seller数据对象：

具体使用全部数据中指定数据：

    4.项目中主要学习得是技巧和方法而不是单纯的记忆，得有自己独立思考的空间。