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
下载成功后显示下面頁面,最后点击Login进行登录
2.api 接口文件夹
3.重置网站端口与名称
4.# 建立远程Git仓库并完成初始提交
5. 目录与配置文件说明
下载npm i mockjs -D
下载yarn add axios
6.随机生成对象数,姓名和年龄
<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>
7. 配置文件
在开发环境下可以使用.env.development的环境变量数据
在产品上线环境下可以使用.env.production的环境变量数据
如果在终端输入npm run build只会查找env.production文件里面的内容
8. api 接口文件夹
1.在src/utils下创建文件request.js
2.在src/api下创建文件test.js
3.在App.vue文件上调用函数