• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

JavaScript Puzzlers in VueX

好久没更了,开了新项目,重构老版本的前后台页面和功能,最近在做调研和一些文档,技术选型及结构如下:
前台:前台部分使用nuxt.js(Vue2+Vue-Router+Vuex+Vue-Meta+Webpack )+Mock.js+Axios

├─.nuxt
│  ├─components
│  └─dist
├─assets                     需经webpack处理的静态资源
│  ├─css
│  └─js
├─components                 所有组件
├─dist                       生成文件
│  ├─about
│  │  └─history             其他页面文件
│  ├─index.html              启动文件
│  └─_nuxt                   生成资源文件
├─layouts
├─middleware                  Nuxt.js中间件,c/s渲染均会在路由改变前执行,需next/返回promise,支持异步
├─pages                       Nuxt.js的页面文件,会根据文件生成路由
│  └─about
├─plugins                     第三方组件 + 自有js库 + 其他插件性质的脚本
├─static                      不经编译器处理的静态资源
└─store                       Vux 相关
|--nuxt.config.js             nuxt main config.js
|--package.json               npm package
|--README.md                  说明文档

后台:Vue2.0+Vue-Router+Vuex+Axios+Webpack+ElementUI

├─build                    spa启动生成/webpack配置
├─config                   spa发布配置/开发发布使用Common URL
├─dist                     spa发布路径
│  └─static                静态资源
│      ├─css
│      ├─fonts
│      ├─img
│      ├─js
│      └─mockdata
│       --index.html        启动文件
├─src                       引用路径
│  ├─api                   API文件
│  ├─assets                静态资源文件
│  │  ├─404_images
│  │  └─iconfont
│  ├─components            组件库
│  ├─router                全局路由
│  ├─store                 V uex
│  │  └─modules
│  ├─styles                样式文件
│  ├─utils                 过滤方法
│  └─views                 开发路径/页面文件
│      ├─layout
└─static                    静态资源
│   └─mockdata              mockdata文件
│----index.html              启动文件
│----favicon.ico             网站图标
│----package.json            启动文件
│----README.md               说明

其中管理后台是传统的SPA,前后端分离,一撸到底,没什么好说的,前台方面,开发选用Nuxt.js对接后台API的方式,主要考虑前端spa结构对seo优化不力,使用多页面发布/呈现方式,每个页面单独设置seo信息,最开始是使用webpack配置的多页面,也就是生成对应页面.vue的html页面,后面从服务器渲染ssr相关找到的Nuxt.js就专用Nuxt.js了,特点就是自动路由和对应生成页面(比刚才说的webpack里配置要优雅许多),所以对于网站有SEO方面要求的原可以看看考虑这个;
Nuxt.js 官网

Vue.js2.0出好久了,搭配Vuex,比起1.0改动还是蛮大的,忙里偷闲写了一个小Demo,使用Vuex储存/操作数据,几种写法熟悉了一下,有兴趣可以玩一下,数据都还保存在本地,写法什么的还比较糙,后面有时间再优化吧,Github address

 

线上Demo,戳这里:JavaScript Puzzlers

顺便吐槽一下,一直在github上学习,却没提交代码的习惯,以后强化这方面的内容吧。


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明JavaScript Puzzlers in VueX
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址