项目【官网】第三天----前端框架搭建
前端使用的是VUE，所以一开始用VUE的脚手架来创建一个新的项目
包引入
修改package.json,将dependencies修改成下载这样，然后控制台输入npm install
"dependencies": {
"axios": "^0.21.4",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
清理不需要的东西
- public里面
- favicon.ico 网页图标
- index.html
- src
- App.vue
- main.js
-
favicon.ico可以换成自己想要的图标，然后在index.html里面修改
-
index.html修改成官网
-
APP.vue 修改
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- 修改App.vue
<template>
<div id="app" style="overflow: auto;height: 100%;">
<router-view/>
</div>
</template>
<style lang="less">
</style>
注册Element组件库
src下新建plugin文件夹，然后新建index.js文件,我是用来自定义主题，这东西可以自行去玩玩
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../../theme/index.css'
Vue.use(ElementUI)
路由
src下新建router文件夹，然后新建index.js,Main.vue是后面建立用来展示的第一个页面
后面每次新建一个页面都要在这注册
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '@/views/Main'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Main',
component: Main
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
状态
src下新建store文件夹，然后新建index.js,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
清理样式
因为VUE之前的样式有部分不适合，会有一些小bug，先提前改好，后面不用改半天
src下新建style包，然后新建index.less，注意是less文件，这是需要编译的文件，具体我也不懂(前端就是半吊子水)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
封装请求
src下新建utils文件夹
封装请求可以让我们在发送请求时更加方便，还有可能请求拦截等问题
新建http.js文件
import request from './request'
// 封装请求
const http = {
get (url, params) {
const config = {
method: 'get',
url: url
}
if (params) config.params = params
return request(config)
},
post (url, params) {
const config = {
method: 'post',
url: url
}
if (params) config.data = params
return request(config)
},
put (url, params) {
const config = {
method: 'put',
url: url
}
if (params) config.params = params
return request(config)
},
delete (url, params) {
const config = {
method: 'delete',
url: url
}
if (params) config.params = params
return request(config)
}
}
// 导出
export default http
新建request.js文件
import axios from 'axios'
import { Message } from 'element-ui'
// 封装axios 配置拦截器
const instance = axios.create({
baseURL: 'http://120.78.204.20:3060',
timeout: 3000
})
// 响应拦截器
instance.interceptors.response.use(res => {
return res.data
}, error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break
case 401:
error.message = '未授权，请重新登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '请求错误,未找到该资源'
window.location.href = '/NotFound'
break
case 405:
error.message = '请求方法未允许'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器端出错'
break
case 501:
error.message = '网络未实现'
break
case 502:
error.message = '网络错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网络超时'
break
case 505:
error.message = 'http版本不支持该请求'
break
default:
error.message = `连接错误${error.response.status}`
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
Message.error('服务器响应超时，请刷新当前页')
}
error.message = '连接服务器失败'
}
Message.error(error.message)
return Promise.resolve(error.response)
})
export default instance
展示页
views文件夹下新建Main.vue，这是第一个展示页面，这是router有关，path是 / 的就是第一个页面，
<template>
<div>
main
</div>
</template>
<script>
export default {
name: 'Main',
}
</script>
<style scoped lang="less">
</style>
设置端口
在项目文件夹下新建vue.config.js ,这个文件可以修改端口，也可以写代理进行转发
module.exports = {
lintOnSave: false,
devServer: {
host: 'localhost',
port: 3020,
hotOnly: true,
}
}
启动
终端输入npm serve
浏览器输入localhsot:3020
代码目录
有些生成的可能没用，没删，theme是自定义主题的包，dist是build生成的，node_modules是包
其它的都是上面有说到过的
详细代码
gitee 官网V0.0.0