Skip to content
๐ŸŽ Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.
JavaScript Vue CSS HTML AppleScript Dockerfile
Branch: master
Clone or download

Latest commit

nicejade build(deps-dev): bump handlebars from 4.0.12 to 4.3.0 (#27)
build(deps-dev): bump handlebars from 4.0.12 to 4.3.0
Latest commit 2178c40 Dec 28, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update config.yml Oct 18, 2018
build feat: make 2th build signficantly faster โœจ Oct 18, 2018
config docs: update Notes & README ๐Ÿ“ May 8, 2018
src feat: adjust & perfect style ๐Ÿ’„ Jun 14, 2018
static feat: optimize webpack config g โšก๏ธ ๐Ÿ”ง #7 May 4, 2018
test feat(pretest): add simple pre test๐Ÿ˜‚ Oct 30, 2017
.babelrc feat: optimizate inject lodash. close #13 Jun 14, 2018
.dockerignore feat: adjust & perfect style ๐Ÿ’„ Jun 14, 2018
.editorconfig first init commit ๐Ÿ˜Š Jun 17, 2017
.eslintignore.js first init commit ๐Ÿ˜Š Jun 17, 2017
.eslintrc.js feat(eslint): loose setting about eslint function paren๐Ÿ˜Š Nov 1, 2017
.gitignore feat(webpack): optimization webpack packaging ๐Ÿ˜„ Aug 11, 2017
.postcssrc.js first init commit ๐Ÿ˜Š Jun 17, 2017
Dockerfile feat: adjust & perfect style ๐Ÿ’„ Jun 14, 2018
LICENSE Create LICENSE Apr 24, 2018
README.md doc: update README.md ๐Ÿ“ Oct 18, 2018
docker-compose.yml feat: adjust & perfect style ๐Ÿ’„ Jun 14, 2018
index.ejs docs: update Notes & README ๐Ÿ“ May 8, 2018
package-lock.json build(deps-dev): bump handlebars from 4.0.12 to 4.3.0 Dec 28, 2019
package.json build(deps-dev): bump handlebars from 4.0.12 to 4.3.0 Dec 28, 2019
yarn.lock build(deps-dev): bump handlebars from 4.0.12 to 4.3.0 Dec 28, 2019

README.md

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.

You canโ€™t perform that action at this time.