vue项目搭建 (一)

由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以帮我指证,必定虚心接受

技术栈: vue2+vue-router+vuex+axios+webpack+es6/7

项目布局

vue-cli构建初始项目后,在src中进行增删修改

// 此处是模仿github上  bailicangdu  的
├── src
| ├── apsi
| | ├── api.js // 接口详情配置
│ ├── components // 组件
| | ├── common // 公共组件
│ ├── config // 基本配置
│ │ ├── fetch.js // 获取数据
│ ├── images // 公共图片
│ ├── plugins // 引用的插件
│ ├── router
│ │ └── router.js // 路由配置
│ ├── service // 数据交互统一调配
│ │ ├── getData.js // 获取数据的统一调配文件,对接口进行统一管理
│ ├── store // vuex的状态管理
│ │ ├── action.js // 配置actions
│ │ ├── getters.js // 配置getters
│ │ ├── index.js // 引用vuex,创建store
│ │ ├── mutation-types.js // 定义常量muations名
│ │ └── mutations.js // 配置mutations
│ └── style
│ ├── common.css // 公共样式文件
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件,加载各种公共组件
├── favicon.ico // 图标
├── index.html // 入口html文件

对上述结构进行详细分析

  • apis

    • api.js
    // 这里写所有的接口,便于后期修改管理,若是变动,只需修改当前即可,而不是牵一发动全身
// 切换域名
let baseUrl = null
if (process.env.NODE_ENV === 'development') { //开发环境
baseUrl = 'http://ip:端口号'
} else if (process.env.NODE_ENV === 'production') { //生产环境
baseUrl = 'http://'+ window.location.host
}
//这样后期知道请求方式,都可以好修改,一目了然
const apis = {
getImgs: {
url: '/imgs',
method: 'get',
},
getUser: {
url: '/user',
method: 'post',
},
...
}
export {
baseUrl,
apis,
}
  • components

    • common 用来存放公共组件,便于使用
  • config

    • fetch.js 在下一次中重点分析
  • store

    • getters.js
  export default {}
  • action.js 正常来说,请求数据 (ajax)写在这里,但当请求相当多时,数据相当不好处理,比正常请求麻烦多了,因而变为 单独建立一个 service文件,用来进行数据请求
  import { setUserInfo } from './mutation-types'
import { getUser } from './../service/getData'
export default {
getUserInfo({commit}) {
const res = await getUser()
commit(setUserInfo, res)
},
}
  • mutations.js
  import { getUser } from './mutation-types'
export default {
[getUser](state, data) {
state.user = data
}
}
  • mutation-types.js
  export const getUser = 'getUser'
  • index.js
  import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
user: '', //用户信息
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
  • router

    • router.js
  import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 路由懒加载
const Component1 = () => import('./../components/component1')
const Error = () => import('./../components/error')
const router = new Router({
// 使用元信息进行匹配
routes: [
{path: '/', name: 'Component1', meta: { flag: 'in'}, component: Component1},
{path: '/error', name: 'Error', meta: { flag: 'in'}, component: Error},
{path: '*', redirect: {path: '/error'}}
]
})
// 鉴权
import store from './../vuex/index'
router.forEach((to, from, next) => {
const menuList = store.state.user.menuList //用户菜单
const isLogin = store.state.isLogin // 是否登录
// 判断是否有资格进入
let isEnter = false
if (menuList.includes(to.meta.flag)) {
flag = true
} else {
flag = false
} if (isEnter && isLogin) {
next()
} else {
if (to.path === '/error') {
next()
} else {
next('/error')
}
}
})

我这个只是很浅的,若是深究,每个又可以无限下去,折腾不起,越深,坑越多,难爬,只好先把基础打扎实些了

  • 总结

    • 下一个专门写网络请求,感觉有很多坑,网上封装的都有些局限,希望我能抛砖引玉,有个更优雅的解决办法
    • 路由这个我只是浅显的点一下,里面还有一些我都不知道的,没用到
    • vuex 希望可以看到 module具体如何使用就好了,特别是这个action,坑太多,累

还希望各位看官多多指正,谢谢了

vue项目搭建 (一)的更多相关文章

  1. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  2. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  3. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  4. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  5. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  6. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  7. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  8. requirejs + vue 项目搭建

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug, ...

  9. Vue项目搭建

    1.环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registry=https:// ...

随机推荐

  1. Java基础知识陷阱(八)

    本文发表于本人博客. 这次我来说说关于&跟&&的区别,大家都知道&是位运算符,而&&是逻辑运算符,看下面代码: public static void m ...

  2. idea 取消控制台的行数限制

    有时候我们要输出大量的信息放到控制台显示,但是多了之后就出现最上面的信息被覆盖删除, 因此就需要设置控制台的显示行数,但在idea7之后的版本中,取消了对控制台行数设置选项, 只能通过更改配置文件进行 ...

  3. eclipse 创建jsp报错

  4. c++之旅:类型的强制转换

    类型强制转换 在编程的时候我们经常遇到类型的强制转换,C++为此提供了更安全的转换方式,在编程中我们更多的应该采用C++提供的类型转换方式 基本类型转换 基本类型转换用的最多,一般将高精度转换为低精度 ...

  5. SparkSQL程序设计

    1.创建Spark Session val spark = SparkSession.builder . master("local") .appName("spark ...

  6. python在CentOS 7中的安装

    CentOS 7 中默认安装了python2.7.5,可能部分开发人员需要使用python3系列的产品,因为版本不“向下”兼容,诸如print函数,因此需要对于不同的项目进行python版本之间的切换 ...

  7. 20145316《Java程序设计》第9周学习总结

    20145316<Java程序设计>第9周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...

  8. 谷歌技术"三宝"之BigTable(转)

    原文地址:   http://blog.csdn.net/opennaive/article/details/7532589 2006年的OSDI有两篇google的论文,分别是BigTable和Ch ...

  9. 20145310 GDB调试汇编堆栈分析

    GDB调试汇编堆栈分析 由于老师说要逐条分析汇编代码,所以我学习卢肖明同学的方法,重新写了一篇博客. 代码: #include<stdio.h> short addend1 = 1; st ...

  10. 尝试编辑java程序

    尝试编译java程序 之前在用软件eclipse编译过简单的hello  java程序,因为软件操作简单,后来学会了用命令符来编译程序.代码如下 public class abc     {      ...