Vue项目搭建（2018-08-11）

       对于Vue的学习，我一开始就是在官网上看看API，后来越看越迷糊，干脆直接先搭起来一个项目边实践边学习（每个人都有自己适合的学习方法）直接开始我搭建项目的过程和心得。首先电脑要安装node环境，如不了解请自行搜索安装，我在搭建项目的时候使用的是vue-cli，这个是一个脚手架它可能有很多用途，我目前使用这个来快速的搭建一个新的Vue项目，安装命令  npm install --global @vue/cli  这是官方推荐的安装命令（这种方式需要的node版本目前是7以上，如果node版本太低需要升级，如果你安装了n模块可以直接使用 sudo n stable 直接升级，不然需要先npm install -g n安装一下），我在安装的时候不知道是网络原因吗有个包下载不下来，我使用了淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 安装完毕以后，我们就可以创建项目了，直接 vue create  project-name（项目名字）

有选项就直接yes就好了，可以看到结束以后在文件下生成了cvm文件夹，打开看里面的内容

在控制台进入cvm目录下，然后 npm run serve

浏览http://localhost:8080/ 就可以看到项目了。

-------------------------------------------分割线-----------------------------------------------

再来另一种方式 npm install --global vue-cli 安装，然后使用命令 vue init webpack cvm，其实我比较推荐这种方式安装，因为package里面引入的模块比较多，我前期对整个框架不是很熟悉，所以都配置好有助于更高的理解整个框架。

可以看到弹出很多选项，看名字不难理解，但是有个 ESLint，我建议刚开始像我这种菜鸡别选要，老司机随意，这个是检验你代码格式，并不是我写的代码太乱，真的是阿岳老师太严格了。其余的选项直接继续就可以了，它会帮你下载安装package中的模块，等一等就OK了。国际惯例先看看文件夹下都有啥

 

编辑器推荐大家使用WebStorm或者Visual Studio Code，后者是免费。先来做一个简单的例子

首先在/cvm/src/components 下创建一个 login.vue文件，代码如下

<template>
<form>
  <label>用户名</label>
  <input type="text"/>
  <label>密码</label>
  <input type="password"/>
  <input type="submit" value="登录"/>
</form>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style>

</style>

然后打开/cvm/src/router/index.js 文件 修改代码如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/login',
      name: 'login',
      component: login
    }
  ]
})

这个时候我们打开控制台，到项目目录下 npm run dev，项目启动成功以后访问http://localhost:8081/#/login就可以看到我们的页面，有点丑希望大家不要介意，我们要的是有趣的灵魂，而不是好看的皮囊，哈哈我就是不想写样式。

关于路由的跳转，我怕自己写不好，推荐大家去看一下https://blog.youkuaiyun.com/u013938465/article/details/79421239，深入Vue-Router源码分析路由实现原理， 希望大家耐心的看完。回到项目在看，在重新捋一下，首先我们在控制台输出 npm run dev，打开package.json来看

我们实际上执行的是下面这条命令

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

其实入口也就是main.js，在这里初始化了Vue实例，然后路由又混入beforeCreate钩子操作，所以会根据我们输入的路径进行组件匹配，所以在index.html中会把我们组件渲染在id="app"的div中。基本上搭建也就是这个样子，可以自己去添加不同的vue模版，添加一些事件让路由进行跳转。

注：如果不想路径上带#号，可以加上 mode： 'history'(但是build代码的时候要把这个注释掉)，这个我们没看具体原理，有兴趣可以去

github 地址：https://github.com/vuejs/vue-router 下载源码学习。

在加一点接口调用的总结，我现在用的是axios请求后台，我自己做了一个文件怕以后有新的需求所以拿出来写了

/**
 * Created by mtgr1020 on 2018/8/8.
 */
import axios from 'axios'

var axiosInstance = axios.create();

//静态请求数据
axiosInstance.defaults.baseURL = "";
axiosInstance.defaults.timeout = 30000;
axiosInstance.defaults.headers.post['content-type'] = 'application/json;charset=utf-8';
axiosInstance.defaults.headers.get['content-type'] = 'application/json;charset=utf-8';

axiosInstance.requestData=function (config) {return config;};//请求拦截数据处理
axiosInstance.responseData=function (response) {return response;};//请求返回拦截数据处理
axiosInstance.error=function (error) { return error;};//错误处理

/**
 * 请求拦截器
 */
  axiosInstance.interceptors.request.use(function (config) {
    //静态请求数据统一处理
    if(!config.tokenId){
      config.headers.token = sessionStorage.getItem("token");
    }
    config = axiosInstance.requestData(config);
    return config;
  });

/**
 * 请求返回拦截器
 */
  axiosInstance.interceptors.response.use(function (response) {
    response = axiosInstance.responseData(response);
    //会话过期  当前会话已过期，请重新访问。
    return response.data;
  }, function (error) {
    //error.message  报错：Request failed with status code 404      请求超时：timeout of 1ms exceeded
    error = axiosInstance.error(error);
    return Promise.reject(error.message);
  });
export default axiosInstance;

只需要在main.js中去引入这个文件给axiosInstance，然后 window.$http = Vue.prototype.$http = axiosInstance;这样你就可以在method中 直接this.$http去调用后台接口（/test/v1/login）了，在实际开发中很难避免要跨域，所以我们需要在 config/index.js，target中是你实际请求的地址路径，你需要在你调用的接口前加上/api/test/v1/login/，你在运行npm run dev的时候会启动一个另一个服务器帮你做转发。

build的时候就运行 npm run build就会在项目下创建一个dist文件夹，里面包含index.html和 static文件夹，需要注意的就是两点

另一个就是在路由配置文件，如果加了 mode： 'history' 请先注释掉在build。如果有什么疑问欢迎大家留言，这篇文章可能就写到这为止了，毕竟是自己初次使用心得，如有错误还请各位能指出修改，以免误导他人。