vue2+webpack4+vue-cli3+node16+npm8核心集成文件

#mockjs和axios安装
老命令
npm install --save-dev mockjs
新命令
npm install -D mockjs

老命令
npm install --save axios
新命令
npm install -S axios
#查询vue版本，只能通过package.json依赖查询

#查询vue-cli版本命令
vue -V

#查询node版本命令
node -v

#查询npm版本命令
npm -v

#安装前端某个组件的指定版本，如已安装先卸载后装
卸载
npm uninstall -g vue-cli
安装
3.0以下：
npm install -g vue-cli@版本号
3.0及以上：
npm install -g @vue/cli@版本号

几个参数的说明，来源作者为intrwins和草没味儿的瓜

i 是 install 的简写
-g 是全局安装，不带 -g 会安装在个人文件夹
-S 与 --save 的简写，安装包信息会写入 dependencies 中
-D 与 --save-dev 的简写，安装包写入 devDependencies 中
dependencies 与 devDependencies
dependencies 生产阶段的依赖,也就是项目运行时的依赖
devDependencies 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用的


About.vue
```vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>

export default {
  data(){
    return{
      loginObj:{
        userName:"admin",
        password:"123",
      }
    }
  },
  created(){
    this.$http.post("/getDataList", this.loginObj).then(function(res){
      console.log(res.data);
    })


  }
}
</script>

package.json

{
  "name": "vuemock",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "core-js": "^2.6.5",
    "qs.js": "^0.1.12",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "mockjs": "^1.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.6.10"
  }
}

mock.js

import Mock  from 'mockjs'
const Random = Mock.Random;
 
function getData(){
    let datalist= [];
    for (let i = 0; i < 10; i++) {
      let newData = {
        order: Random.natural(16),
        account:Random.name(),
        time:Random.now(),
        title: Random.csentence(4), //  Random.csentence( min, max )
        baoxiu: Random.csentence(2),
        product: Random.csentence(4,10),
        number:Random.natural(1, 100),
        price:Random.float(20, 500, 2,2),
        addrss:Random.csentence(15,30),
        name: Random.cname(),
        tel:Random.natural(11),
        state:Random.csentence(5),
        id:Random.natural(1,5),
        thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
        author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
        date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
      }
      datalist.push(newData)
    }
    return {
      data: datalist
    }
  }
 
function setMsg(){
  let datalist= [];
  for (let i = 0; i < 10; i++) {
    let newData = {
      order: Random.natural(16),
      account:Random.name(),
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    datalist.push(newData)
  } 
  return {
    data: datalist
  }
}
 
const data = Mock.mock('/getDataList',getData);
const data1 = Mock.mock('/setMsg',setMsg)
export default {data , data1 };

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import qs from 'qs'
import mockdata from './mock'

Vue.prototype.$http = axios
Vue.prototype.qs = qs
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')