LFB / Vue Cli Project
Vue.js 2.x 实战开发项目脚手架
Stars: ✭ 123
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Cli Project
Vivo Shop
基于vue2.0+实现的vivo移动端商城(vue+vuex-ruoter+axios)
Stars: ✭ 846 (+587.8%)
Mutual labels: webpack, vue-cli
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+958.54%)
Mutual labels: webpack, vue-cli
React Article Bucket
总结,积累,分享,传播JavaScript各模块核心知识点文章全集,欢迎star,issue(勿fork,内容可能随时修改)。webpack核心内容部分请查看专栏: https://github.com/liangklfangl/webpack-core-usage
Stars: ✭ 750 (+509.76%)
Mutual labels: webpack, vue-cli
Vue Multiple Pages
A multiple Pages Starter use Vue-cli3
Stars: ✭ 1,079 (+777.24%)
Mutual labels: webpack, vue-cli
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+304.07%)
Mutual labels: webpack, vue-cli
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-14.63%)
Mutual labels: webpack, vue-cli
Vue2 News
基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条(移动端)
Stars: ✭ 462 (+275.61%)
Mutual labels: webpack, vue-cli
Cookiecutter Django Vue
Cookiecutter Django Vue is a template for Django-Vue projects.
Stars: ✭ 462 (+275.61%)
Mutual labels: webpack, vue-cli
Vue Auth Boilerplate
🔑 Vue.js scalable boilerplate with user authentication.
Stars: ✭ 31 (-74.8%)
Mutual labels: webpack, vue-cli
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录,注册,留言,用户发帖,用户评论等功能的SPA Blog。注意,注意,注意,后端API全部自己手写,很适合刚学习vue以及express的小伙伴学习,喜欢请Star鼓励一下我,谢谢!项目预览:
Stars: ✭ 417 (+239.02%)
Mutual labels: webpack, vue-cli
Simply Calculator Vuejs
A simple calculator made by vuejs 用vue.js实现简易计算器
Stars: ✭ 76 (-38.21%)
Mutual labels: webpack, vue-cli
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+969.92%)
Mutual labels: webpack, vue-cli
vue-cli-project
- 👨💻已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,axios. webpack, 储存用vue-ls, 异步async/await, css sass. 下载即使用项目开发。
- 喜欢或对你有帮助的话请点star✨✨,Thanks.
A Vue.js project
Vue cli3.x
基于 Vue-cli3 搭建的前端开发项目模板,已在 vue.config.js 文件中配置好 webpack,仅供参考,开箱即用,欢迎大家围观指教!https://github.com/liangfengbo/vue-cli3-template
使用
# 安装服务
npm install
# 启动服务
npm run dev
说明
src架构
├── App.vue
├── api
│ ├── doctor.js
│ └── fetch.js
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── libs
│ └── util.js
├── main.js
├── router
│ └── index.js
├── store
│ ├── index.js
│ ├── modules
│ └── mutation-types.js
└── views
└── doctor
处理数据页面这2大块,把数据和页面分离,在vuex里面做请求数据,页面只需要做调用数据。
请求接口这块再细分,接口和请求接口分开,我使用了最新的async/await函数做数据请求
api文件夹 主要放后端提供的接口,如
import fetch from './fetch';
export default {
// 获取医生列表
list(params) {
return fetch.get('/doctor/list', params)
},
// 获取医生详情信息
detail(id) {
return fetch.post('/doctor/detail/' + id);
},
}
fetch.js 文件是封装axios请求,以及请求处理,和http状态码的等处理
import Util from '../libs/util'
import qs from 'qs'
import Vue from 'vue'
Util.ajax.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
Util.ajax.interceptors.request.use(config => {
/**
* 在这里做loading ...
* @type {string}
*/
// 获取token
config.headers.common['Authorization'] = 'Bearer ' + Vue.ls.get("web-token");
return config
}, error => {
return Promise.reject(error)
});
Util.ajax.interceptors.response.use(response => {
/**
* 在这里做loading 关闭
*/
// 如果后端有新的token则重新缓存
let newToken = response.headers['new-token'];
if (newToken) {
Vue.ls.set("web-token", newToken);
}
return response;
}, error => {
let response = error.response;
if (response.status == 401) {
// 处理401错误
} else if (response.status == 403) {
// 处理403错误
} else if (response.status == 412) {
// 处理412错误
} else if (response.status == 413) {
// 处理413权限不足
}
return Promise.reject(response)
});
export default {
post(url, data) {
return Util.ajax({
method: 'post',
url: url,
data: qs.stringify(data),
timeout: 30000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
},
get(url, params) {
return Util.ajax({
method: 'get',
url: url,
params,
})
},
delete(url, params) {
return Util.ajax({
method: 'delete',
url: url,
params
})
},
put(url, data) {
return Util.ajax({
method: 'put',
url: url,
data: qs.stringify(data),
timeout: 30000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
}
}
在vuex里面做请求,比如请求医生列表,用async/await,拿到数据存进store数据里面
├── index.js
├── modules
│ └── doctor.js
└── mutation-types.js
import doctor from '../../api/doctor'
import * as types from '../mutation-types'
const state = {
// 医生列表
doctorList: [],
// 医生详情信息
doctorDetail: null,
};
const mutations = {
// 设置医生列表
[types.SET_DOCTOR_LIST](state, data) {
state.doctorList = data
},
// 设置医生详情信息
[types.SET_DOCTOR_DETAIL](state, data) {
state.doctorDetail = data
},
};
const actions = {
/**
* 获取医生顾问列表
* @param state
* @param commit
* @param params
* @returns {Promise<void>}
*/
async getDoctorList({state, commit}, params) {
let ret = await doctor.list(params);
commit(types.SET_DOCTOR_LIST, ret.data.data);
},
/**
* 获取医生详情信息
* @param state
* @param commit
* @param id 医生ID
* @returns {Promise<void>}
*/
async getDoctorDetail({state, commit}, id) {
let ret = await doctor.detail(id);
commit(types.SET_DOCTOR_DETAIL, ret.data.data);
}
};
export default {
state,
actions,
mutations
}
在页面里需要执行引入:
import {mapActions, mapState} from 'vuex'
代码可以具体看文件的代码
└── doctor
├── detail.vue
└── list.vue
<script>
import {mapActions, mapState} from 'vuex'
export default {
components: {},
data() {
return {}
},
computed: {
...mapState({
doctorList: state => state.doctor.doctorList,
})
},
async created() {
// 医生类型
let params = {type: 'EXP'};
// 获取医生列表
await this.getDoctorList(params);
},
methods: {
...mapActions([
// 获取医生列表
'getDoctorList'
]),
// 路由跳转方法
routeLink(link) {
this.$router.push({path: link});
},
}
}
</script>
核心就是把API数据和页面分离,细分把接口,请求API数据方法放在vuex做处理,在页面映射vuex的mapActions提供的接口方法获取数据,做统一管理项目。喜欢或对你有帮助的话请点star✨✨,Thanks.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].