All Projects → jingjingke → Vuepro Demo

jingjingke / Vuepro Demo

练习项目,欢迎交流学习,会陆续填坑。因使用的页面完全来自“草根金融”APP,所以请勿用于商业或公司项目。

Projects that are alternatives of or similar to Vuepro Demo

Vue-MintShop
🍖 🍉 使用 ES6 + Mock.js + vue2.0 全家桶开发的前后端分离的外卖App。开发文档、流程完整详尽,非常适合作为个人练手项目。
Stars: ✭ 626 (+214.57%)
Mutual labels:  vue-router, vue-demo
Vue Mintshop
🍖 🍉 使用 ES6 + Mock.js + vue2.0 全家桶开发的前后端分离的外卖App。开发文档、流程完整详尽,非常适合作为个人练手项目。
Stars: ✭ 552 (+177.39%)
Mutual labels:  vue-demo, vue-router
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (-80.4%)
Mutual labels:  vue-router, vue-demo
Douban
Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
Stars: ✭ 2,324 (+1067.84%)
Mutual labels:  vue-demo, vue-router
Vbox
vue实现的音乐Web App
Stars: ✭ 73 (-63.32%)
Mutual labels:  vue-demo, vue-router
meal-ticket
前端基于webpack+vue+vux,后端基于express+lowdb。有了这些,开发一个项目将会变得很轻松。
Stars: ✭ 19 (-90.45%)
Mutual labels:  vue-router, vue-demo
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+149.75%)
Mutual labels:  vue-demo, vue-router
vue-mall
vue企业级商城练手项目并且提供接口唷
Stars: ✭ 14 (-92.96%)
Mutual labels:  vue-router, vue-demo
Vue Cnode
一个vuex vue-router vue-resource的单页面应用demo,api来自cnodejs. vue 1
Stars: ✭ 174 (-12.56%)
Mutual labels:  vue-demo, vue-router
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+469.85%)
Mutual labels:  vue-demo, vue-router
Vue Website
🍰 想用vue把我现在的个人网站重新写一下,新的风格,新的技术,什么都是新的!
Stars: ✭ 351 (+76.38%)
Mutual labels:  vue-demo, vue-router
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+941.21%)
Mutual labels:  vue-demo, vue-router
Vue 163 Music
【停止维护】网易云音乐web版,支持PC端常用功能,localStorage保存播放列表
Stars: ✭ 788 (+295.98%)
Mutual labels:  vue-demo, vue-router
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-40.7%)
Mutual labels:  vue-demo, vue-router
Vue2 Basic Demo
这里是关于学习vue2.0的相关例子和项目,欢迎一起学习!
Stars: ✭ 125 (-37.19%)
Mutual labels:  vue-demo, vue-router
Vue Tiny Code
这里有一个仿 Chrome 调色盘,有一个拖动排版的页面,还有一些新奇的小点子。
Stars: ✭ 170 (-14.57%)
Mutual labels:  vue-router
Vue Cheatsheet
Modified version of the official VueMastery cheatsheet
Stars: ✭ 188 (-5.53%)
Mutual labels:  vue-router
Lin Cms Vue
🔆 Vue+ElementPlus构建的CMS开发框架
Stars: ✭ 2,341 (+1076.38%)
Mutual labels:  vue-router
Symfony Vuejs
Source code of the tutorial "Building a single-page application with Symfony 4 and Vue.js"
Stars: ✭ 170 (-14.57%)
Mutual labels:  vue-router
Vue Electron
vue-blog client,base on vue-electron,axios, vuex, vue-router.
Stars: ✭ 193 (-3.02%)
Mutual labels:  vue-router

vuePro-demo

练习项目基本是用vue2和vue-router2来实现的,满多地方可以填坑的。欢迎交流学习,使用的页面完全来自“草根金融/宋江贷”APP,所以请勿用于商业或公司项目。

线上访问地址:https://jingjingke.github.io/vuePro-demo/dist/

使用

(1)克隆项目

		git clone https://github.com/jingjingke/vuePro-demo.git

(2)安装node_modules文件夹:

		npm install

或去我的百度网盘获取rar压缩包点击这个地址

【2017.03.03】这个rar压缩包已经不是最新了,如果继续使用的话,还需要执行一次npm install

(3)开发,输入命令行

		npm run dev

(4)发布,可输入命令行

		npm run build

注意:【生产环境】在根目录config/index.js文件中build对象'assetsPublicPath'属性 我填写的是我当前的线上资源需放置的地址:'https://jingjingke.github.io/vuePro-demo/dist/' (根据你的资源位置填写相应的值,默认值可能会出现生产环境资源404-url不正确的情况)

前置知识

开发中使用了vue-cli(webpack包)、vue2、vue-router2、vuex2以及部分ES6语法(箭头语法)。建议阅读:

vue2中文指南:http://cn.vuejs.org/v2/guide/

vue-router2:http://router.vuejs.org/zh-cn/index.html

vuex指南开始:http://vuex.vuejs.org/zh-cn/intro.html

另外可查看vue2中文指南上面的例子汇总(只整理了部分,方便我自己使用而做的),点击查看

目录结构


├── build                    // webpack打包配置(不说明它下面的文件)
├── config                   // webpack环境配置(不说明它下面的文件)
├── dist                     // 运行build后生成目录(存放需要的发布代码)
├── src                      // 生产目录(着重说明)
│   ├── assets               // 静态资源(css,font,img,js)
│   ├── components           // vue组件
│   ├── config               // Vue全局方法/过滤器
│   ├── data                 // 数据文件(json)
│   ├── views                // 业务页面
│   ├── main.js              // 项目入口文件
│   └── router.js            // 路由配置
├── .babelrc                 // babel工具配置
├── .editorconfig            // 编码风格配置(不太影响开发)
├── .gitignore               // git项目忽略上传的文件/文件夹配置
├── .project                 // 我编辑器生成的,对项目无用
├── README.md                // 说明文档
├── _config.yml              // git pages选择风格生成的
├── package.json             // 项目配置信息

项目截图

项目首页截图1 项目首页截图2 项目首页截图3 项目首页截图4

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].