从0搭建vue项目(vue-cli)

也是赶鸭子上架的一次经历，收获很多，记录一下。

前言

关键字：vue-cli，axios，vue-router，flexible

一、开始搭建

1、安装vue-cli

npm install vue-cli

2、初始化项目

vue init webpack <project-name>

然后会出现一系列的选项
（1）项目名
（2）项目描述
（3）作者
（4） Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vu
e files - render functions are required elsewhere

蹩脚的翻译一下：
❯ Runtime + Compiler: recommended for most users（运行+编译：推荐给大多数用户）
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vu
e files - render functions are required elsewhere （仅运行：大概小6kb，但是templates或者其他vue指定的html只能用在.vue文件里，render函数需要在别处）

这里可以参考下https://www.jianshu.com/p/466510d84e36

（5）是否安装vue-router
（6）是否用eslint？
（7）设置单元测试
（8）选一个test runner
（9）设置带上nightwathc的e2e测试
（10）现在是否npm install一下？

image

到这里，基本就搭好了一个vue项目了。

二、引入axios

axios中文文档
安装过程就不说了，这里贴上axios.js的代码

// axios.js
import axios from 'axios'
import { Toast } from "vant";
import api from '../api/api'
import Cookies from 'js-cookie'
import qs from "qs";

// 设置超时
axios.defaults.timeout =  5000;

// 请求拦截器
axios.interceptors.request.use(config => {
// 如果有sid，就在每个请求参数里加上sid
  let IS_TOKEN = Cookies.get('sid')
  if (config.method == 'get') {
      if (IS_TOKEN && config.params) {
          config.params.sid = IS_TOKEN
      }
  }
  if (config.method == 'post') {
      if (IS_TOKEN && config.data) {
          if (config.data instanceof FormData) {
              config.data.append('sid', IS_TOKEN)
          } else {
              const data = qs.parse(config.data)
              data.sid = IS_TOKEN
              config.data = qs.stringify(data)
          }
      }
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器即异常处理
axios.interceptors.response.use(response =>{
  switch (response.data.status) {
    case 0:
    break;
    default:
      Toast(response.data.error_info || '系统错误')
    break;
  }
  return response.data
} , error => {
  // if (error.response.status==404 || error.response.status==500) {
  //     redirect('/404')
  // }
  return Promise.reject(error)   // 返回接口返回的错误信息
})

function get (url, params = {}) {
  return axios({
    method: 'get',
    url,
    params
  })
}

function post (url, data = {}) {
  return axios({
    method: 'post',
    url,
    headers: {
      'Content-Type':'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
  })
}

// 导出post 和 get方法
export default { post,get }

三、vue-router

vue-router在刚开始的时候就选择了安装。目录下有个router文件夹，里面的index.js就是路由配置。
vue-router文档
暂时没遇到什么难点，文档很全面，就把index.js贴上来吧。

// index.js
import Vue from 'vue'
import Router from 'vue-router'

const source100 = r => require.ensure([], () => r(require('@/pages/map1/source100')), 'source100')

export default new Router({
  mode: "hash",// 默认hash；history 去哈希 #
  routes: [
    {
      path: '/:id',
      name: 'source101',
      component: source101
    }
  ]
})

四、flexible

因为是移动端，所以用flexible解决适配问题
参考https://blog.csdn.net/Coding_Jia/article/details/78866220

遇到了很多小细节，待扩展，需要补的知识点太多了。