All Projects → nicejade → Vue Boilerplate Template

nicejade / Vue Boilerplate Template

Licence: mit
🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Boilerplate Template

Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-54.88%)
Mutual labels:  vuex, admin, vue-router, element-ui
Awesome Vue Cli3 Example
🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Stars: ✭ 160 (-65.29%)
Mutual labels:  lodash, vuex, pwa, vue-router
Venture Management
一个包含vuejs和nodejs技术的全栈项目
Stars: ✭ 208 (-54.88%)
Mutual labels:  lodash, vuex, vue-router, element-ui
Vue Ts Daily
基于vue、Typescript、pwa的一款习惯养成app
Stars: ✭ 735 (+59.44%)
Mutual labels:  vuex, vuejs2, pwa, vue-router
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (-66.81%)
Mutual labels:  vuex, admin, vue-router, element-ui
Docker Vue Node Nginx Mongodb Redis
🐉 An awesome boilerplate, Integrated Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to develop & build your web applications more efficient and elegant.
Stars: ✭ 34 (-92.62%)
Mutual labels:  vuex, pwa, vue-router, element-ui
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-34.71%)
Mutual labels:  vuex, vuejs2, vue-router, element-ui
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-65.29%)
Mutual labels:  vuex, vuejs2, pwa, vue-router
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+441.65%)
Mutual labels:  vuex, vuejs2, admin, element-ui
vue-admin-work
🎉🎉🚀🚀🚀🚀vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限🚀🚀🚀🎉🎉
Stars: ✭ 74 (-83.95%)
Mutual labels:  admin, vue-router, element-ui
vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (-78.09%)
Mutual labels:  admin, vue-router, element-ui
Vue Acl
Access Control List plugin for VueJS 2.0
Stars: ✭ 376 (-18.44%)
Mutual labels:  vuex, vuejs2, vue-router
Roastandbrew
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book
Stars: ✭ 300 (-34.92%)
Mutual labels:  vuex, vuejs2, vue-router
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-44.47%)
Mutual labels:  vuex, vuejs2, vue-router
Vue Typescript Music
🔥 基于 vue 全家桶 音乐项目(Music project) vue+typescript 实现 高仿 网易云音乐 移动端WebApp
Stars: ✭ 94 (-79.61%)
Mutual labels:  lodash, vuex, vue-router
Vue Element Admin
🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Stars: ✭ 73,044 (+15744.69%)
Mutual labels:  vuex, admin, element-ui
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (-39.48%)
Mutual labels:  vuex, vue-router, element-ui
Front End Doc
前端文档汇总(觉得对您有用的话,别忘了star收藏哦^_^ !)
Stars: ✭ 372 (-19.31%)
Mutual labels:  vuex, element-ui, front-end
Dokit
基于 Spring Boot2、 Jpa、 Spring Security、JWT、redis、Vue的前后端分离的后台管理系统开发平台, 用户管理、菜单管理、角色管理、字典管理、权限控制的方式为RBAC,操作日志、异常日志、接口限流、项目支持数据权限管理,支持一键生成前后端代码(支持在线预览及打包下载),支持前端菜单动态路由 可一键部署服务器应用,数据库。系统中活跃用户状态监控,监视当前系统CPU、内存、磁盘、堆栈等相关信息,基于Element UI在线表单设计及生成Vue代码。
Stars: ✭ 348 (-24.51%)
Mutual labels:  vuex, vue-router, element-ui
Vue Store
基于Vue+Vue-Router+Vuex+Element-ui+axios,参考小米商城,实现的电商项目。
Stars: ✭ 308 (-33.19%)
Mutual labels:  vuex, vue-router, element-ui

Vue Boilerplate Template

  twitter
🍒(vue webpack vuex vue-router vue-i18n element-ui) out of the box
🍎 Nice Boilerplate Template for creating medium plus Vue.js(2.*) project


Goal and Philosophy

For how to build medium-sized (+) VUE projects, provide some reference based on past experience. The latest Vue Boilerplate based on vue-cli3 has been open source: awesome-vue-cli3-example, If you pay attention to it, I believe it is very worthwhile 🎉.

Prerequisites

Node.js (>=4.x, 8.x preferred), Npm version 4+(Yarn preferred), and Git.

Demo

Online Demo Page

Advantage

Usage

git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

Go to http://localhost:8080/. If port 8080 is already in use on your machine, the program will specify the available port (incremental) for you, for example, 8081 / 8082 .... Of course, you can temporarily replace the port using the following command:

PORT=8888 npm run dev

Additional supplement: You need to make sure that PORT is a command that can be executed on your machine .

More Command
npm run build

Equivalent execution node build.js, initiate a build project .

npm run build:dll

Equivalent execution webpack --config build/webpack.dll.conf.js, For more information see webpack.DllPlugin.

npm run jarvis / yarn run jarvis

run webpack-jarvis(A very intelligent browser based Webpack dashboard),In your browser open: localhost:1337 , you have it.

JARVIS for Webpack

npm run pretest

Using nodejs to build the local server: http://localhost:3000/ , do a simple pre test for the code after the package.

npm run analyz

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. It will automatically open this address:http://localhost:8888/ .

webpack-bundle-analyzer

Dependent plugin list

  • vue2
  • vue-router
  • vuex
  • vue-i18n
  • axios
  • bootstrap
  • element-ui
  • lodash
  • moment dayjs
  • js-cookie
  • ... ...

Operation request

Your backend can return the following format data, it's better .

{
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

At the front end, you can handle the request like this:

let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

So considerate, Template has been helped to handle the request uniformly, so you can be so easy to use, of course, you can change your own as needed in the helper/ajax.js file .

Links

Writing

See the example in the boilerplate template. Or An example that has been applied, Online address: https://nicelinks.site.

License

MIT

Copyright (c) 2017-present, nicejade.

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