从零创建一个vue项目（基于vue2.X，以windows系统为例）

1.安装nodejs,安装方法参见：https://blog.csdn.net/weixin_40563746/article/details/119671711

2.安装vue-cli，安装方法参见：https://cli.vuejs.org/guide/installation.html

3.打开cmd，在窗口中切换到想要创建项目的目录，执行’vue create 你的项目名称’命令，例如‘vue create test’,选择安装的vue版本


3.进入上一步选定的文件夹，可以看到新创建的test项目

4.继续在cms窗口操作，进入test文件夹，执行‘npm run serve’命令，执行成功，提示访问地址。本文的访问地址如下图所示为http://localhost:8080/，在浏览器中输入http://localhost:8080，能打开欢迎页面就是成功了。

5.根据实际需要，安装UI框架，例如ant design of vue

npm install ant-design-vue --save

6.剩余引入样式等操作，参见各UI框架的手册

7.创建vue.config.js文件

在文件根目录下创建vue.config.js文件，文件中的内容为：
module.exports = {
  //Solution For Issue:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
  //zhengkai.blog.csdn.net
  runtimeCompiler: true
}

8.安装Vue Router路由管理器

npm install vue-router

后续引入等操作参见vueRouter官方文档https://router.vuejs.org/zh/installation.html

9.如果需要使用less,在保证vue版本为2.X的基础上，运行：

npm install less@3.0.0
npm install less-loader@5.0.0
注意：less-loader版本过高的话会报错，若是安装了新版，则需要卸载后重新安装

10.request封装，安装axios
1）安装axios

npm install axios

2）创建axios实例

在根目录/src文件夹下创建新的文件夹util，在util文件夹下新建request.js文件，文件中添加如下内容
import axios from 'axios'
const instance = axios.create({
  baseURL: 'api',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

//添加请求拦截器
instance.interceptors.request.use(config=> {
  // 在发送请求之前做些什么
  // 让每个请求携带自定义 token，根据实际情况自行修改
  config.headers['token'] = '12333'
  return config;
});

//添加响应拦截器
instance.interceptors.response.use(response=> {
  // 对响应数据做点什么，根据实际情况修改
  const data = response.data
  if(data.code === 201){
      alert('请登录')
  }
  return response;
},  (error)=> {
  // 对响应错误做点什么，根据实际情况修改
  if(error.response.status === 405){
      alert('网络错误，请重试')
  }
  return Promise.reject(error);
});

function request(url,method,params){
   return new Promise((resolve,reject)=>{
       instance({
           method: method,
           url: url,
           data: params
       }).then(function(response) {
           console.log('请求数据的返回',response)
           resolve(response)
       }).catch(err=>{
           reject(err)
       })

   })

}

export default {
  request:request
}

3）解决跨域问题

在vue.config文件夹中添加如下代码
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 此处的写法，目的是为了 将 /api 替换成 target中的域名，/api与创建axios实例中填写的baseUrl保持一致
                target: 'https://api.test.com/',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

4）axios的使用demo

step1.在src文件夹下创建api文件夹，文件夹中创建index.js文件和service文件夹，service文件夹中创建auth.js文件。
auth.js文件中的内容如下：

import request from "../../utils/request";
//创建方法，根据实际情况修改
export function getUserInfo(params) {
    const url = '/platform/user/getUserInfo'
    const method = 'get'
    return request.request(url,method,params)

}

index.js文件中内容如下：

import auth from "./service/auth"
export default {
    auth
}

step2.在main.js中引用api文件

import api from './api'
Vue.prototype.api = api

step3.在vue文件中使用

<template>
  <div>
    <button @click="request">获取用户信息</button>
  </div>
</template>

<script>
export default {
  name: 'Index',
  components: {
  },
  data(){
    return {
     
    }
  },
  methods:{
    request(){
     this.api.auth.getUserInfo({
       userId:1
     }).then(res=>{
       console.log('res',res)
     })

    }
  }
}
</script>

11.创建mock
1)在src文件夹下创建mock文件夹，mock文件夹下创建build.js文件，文件中内容如下：

export const builder = function(data,message='success',status = 200){
    return new Promise((resolve)=>{
        const returnData = {
            msg:message,
            status:status,
            data:data
        }
        console.log('mock返回的数据为：',returnData)
        resolve(returnData)
    })
}

2)mock文件夹下创建indes.js文件和service文件夹，service文件夹中的文件命名和api/service文件夹的文件命名一致，且方法名也一致。例如：mock/service/auth.js文件中内容如下：

import {builder} from "../build";
export default{
 getUserInfo(params) {
     console.log('mock用户数据，参数为：', params)
     const userInfo = {
         userId:1,
         userName:'张三三',
         phone:"13312341234"
     }
     return builder({
         userInfo
     })
 }
}

index.js中内容如下：

import auth from "./service/auth"
export default {
    auth
}

3)创建mock开启/关闭的配置超参数。在src文件夹下创建config文件，在config文件夹下创建config.js文件，文件中内容如下：

export default {
    mock:true //true:开启mock，false:关闭mock
}

4)在main中引用mock。

import api from './api'
import mock from './mock'
if(config.mock){
  Vue.prototype.$api = mock
}else{
  Vue.prototype.$api = api
}

至此，mock数据创建完毕，修改config.js中的mock开启/关闭状态，在上述第10步中demo中获取用户数据，就可看到创建的mock数据或者从后端请求来的数据。