vue开发H5步骤详解（环境搭建+rem布局+域名配置+请求）

环境搭建

01. 安装Node.js  Node.js安装包及源码
    下载地址为：https://nodejs.org/en/download/、64 位安装包下载地址 : 
    https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
02. 检测一下node版本，在cmd命令框框内输入命令  node --version 查看node是否安装成功
03. 查看npm版本 输入命令 npm -v、
    npm版本需要大于3.0、如果当前版本比较低可以升级它 cnpm install npm -g
    '提示' 在这里没有安装淘宝cnpm镜像的可以安装一下
    npm install -g cnpm --registry=https://registry.npm.taobao.org
 
    cnpm 和 npm有什么区别：因为npm安装插件是从国外服务器下载，受网络影响大，
    可能出现异常，如果npm的服务器在中国就好了，所以淘宝团队干了这事
 
    npm 可以安装node插件    cnpm使用的是淘宝网的镜像
 
04. 安装vue  cnpm install vue
05. Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页面应用
06 cnpm install --global vue-cli  // 安装vue-cli脚手架
            

项目创建

01. vue init webpack my-project    // 创建一个基于webpack的项目
02. // 这里需要进行一些配置，默认回车即可
03. cd my-project // 进入项目
04. cnpm install  // 安装相关项目依赖
05. cnpm run dev  // 运行项目  http://locahost:8080  打开项目

rem自适应布局
在使用vue-cli搭建好项目框架后，在目录结构的index.html文件中添加一段代码：

之后，在写css时，只要将px单位替换成rem，这里设置的比例是100px=1rem,例如，宽度为100px时，可以直接写成1rem。

<script>
  fnResize()
    window.onresize = function () {
    fnResize()
  }
  
  function fnResize() {
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth
    if (deviceWidth >= 750) {
      deviceWidth = 750
    }
    if (deviceWidth <= 320) {
      deviceWidth = 320
    }
    document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'
  }
</script>

数据请求
安装 axios

01. cnpm install axios --save  // 直接使用cnpm install来进行安装
02. import axios from 'axios'  // 在要使用axios的地方引入axios

域名配置

config/index.js

proxyTable: {
      '/apis': {
        target: 'http://www.baidu.com',  //域名,主要修改这一块
        changeOrigin: true,
        pathRewrite: {
          '^/apis': '/'  //注意名字
        },
      }
    },

//修改下面的两个文件，启动的时候自动判断环境来切换域名
//注意单引号里面的双引号
dev.env.js //本地环境配置文件

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"/apis/"'   //本地域名
 })
``
prod.env.js   //线上环境配置文件

module.exports = {
NODE_ENV: ‘“production”’,

API_ROOT:’“http://www.baidu.com/”’ //线上域名 }
``
文件中使用

var baseUrl = process.env.API_ROOT; 
axios.get(baseUrl+'数据接口') //数据接口一般就是域名后面的东西，后端告知

全局使用axios
首先在主入口文件main.js中引用：

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

之后就可以使用了，在组件文件中的methods里去使用了：

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}