人资第一天

132 阅读1分钟

1.# 项目基础模板下载与启动

git拉取基础项目模板
$ git clone git@gitee.com:panjiachen/vue-admin-template.git hrsaas # 拉取基础模板的代码

git 下载完毕后, 可以将 .git 文件夹删除, 我们后面自己初始化

安装项目依赖(定位到项目目录下)

$ npm i  #安装依赖 yarn

启动项目

 $ npm run dev #启动开发模式的服务 yarn dev
注意:如果下载过程中出现以下错误,只需要在终端输入yarn add core-js然后再重新输入yarn dev

image.png

下载成功后显示下面頁面,最后点击Login进行登录

image.png

2.api 接口文件夹

image.png

image.png

3.重置网站端口与名称

image.png

image.png

4.# 建立远程Git仓库并完成初始提交

image.png

5. 目录与配置文件说明

 下载npm i mockjs -D
 下载yarn add axios

image.png

image.png

image.png

6.随机生成对象数,姓名和年龄

image.png

<template>
 <div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
  import HelloWorld from './components/HelloWorld.vue'
  import axios from 'axios'
 //测试接口是否正常打印

 export default {
        name: 'App',
        components: {
        HelloWorld
      },
 async created(){
 const res = await axios.get('/user')
 console.log(res.data)
}
}
 </script>

 <style>
 #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
 </style>

image.png

image.png

7. 配置文件

在开发环境下可以使用.env.development的环境变量数据

在产品上线环境下可以使用.env.production的环境变量数据

如果在终端输入npm run build只会查找env.production文件里面的内容

image.png

image.png

8. api 接口文件夹

1.在src/utils下创建文件request.js

image.png

2.在src/api下创建文件test.js

image.png

3.在App.vue文件上调用函数

image.png

image.png