A Nice Boilerplate Template for creating medium plus Vue.js projects.
Vue: "2.5.2"，webpack: "v3.5.5".element-ui: "^1.4.8"
For how to build medium-sized (+) VUE projects, provide some reference based on past experience.
Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.
- Based on
vue-clibuild， Make more optimization for how to to facilitate the use of vue . - Has already included a lot of commonly used libraries， such as
vue-i18n,axios,lodash... - With some experience articles about
Vue, Such as: 如何写一手漂亮的 Vue. And is still updated. - Make more optimization about how to build the application using
WebPack.
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 you must change the port number in /config/index.js. Otherwise npm run dev will fail. 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.
npm run pretest
Using nodejs to build the local server, do a simple pre testv 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/ .
- vue2
- vue-router
- vuex
- vue-i18n
- element-ui
- bootstrap
- axios
- lodash
- moment
- js-cookie
vuex-persistedstate- ... ...
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.getProfile(params).then(result => {
// Handle the correct data you received
this.$message({
message: result,
type: 'success'
})
}).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 .
See the example in the boilerplate template.
Copyright (c) 2017-present, NiceJade.