├── src ├── client │ ├── views │ │ └── Readme.md │ ├── components │ │ ├── Readme.md │ │ └── Hello.vue │ ├── store │ │ ├── Readme.md │ │ └── store.js │ ├── static │ │ └── Readme.md │ ├── router │ │ ├── Readme.md │ │ └── index.js │ ├── index.js │ └── App.vue └── server │ ├── dao │ └── Readme.md │ ├── model │ └── Readme.md │ ├── public │ ├── Readme.md │ └── favicon.ico │ ├── router │ └── Readme.md │ ├── config │ └── Readme.md │ ├── views │ └── index.html │ └── index.js ├── .babelrc ├── index.js ├── .gitignore ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── nodemon.json ├── .eslintrc ├── LICENSE ├── package.json └── README.md /src/client/views/Readme.md: -------------------------------------------------------------------------------- 1 | # 存放由组件拼接的页面文件 -------------------------------------------------------------------------------- /src/server/dao/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放Dao层文件 -------------------------------------------------------------------------------- /src/client/components/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放各种组件 -------------------------------------------------------------------------------- /src/client/store/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放vuex的配置文件 -------------------------------------------------------------------------------- /src/server/model/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放Model层文件 -------------------------------------------------------------------------------- /src/server/public/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放静态资源文件 -------------------------------------------------------------------------------- /src/server/router/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放后台路由文件 -------------------------------------------------------------------------------- /src/client/static/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放静态文件，如图片、配置文档 -------------------------------------------------------------------------------- /src/client/router/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放vue-router的配置文件 -------------------------------------------------------------------------------- /src/server/config/Readme.md: -------------------------------------------------------------------------------- 1 | ## 此文件夹专门用于存放后台配置文件，如数据库的配置文件 -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ] 5 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | 3 | require('./src/server') 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | npm-debug.log 4 | 5 | package-lock.json -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/server/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Konata9/vue-express-dev-boilerplate/HEAD/src/server/public/favicon.ico -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/server/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Express Vue 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/client/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | const store = new Vuex.Store({ 7 | state: { 8 | 9 | }, 10 | mutations: { 11 | 12 | }, 13 | actions: { 14 | 15 | } 16 | }) 17 | 18 | export default store -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": true, 3 | "ignore": ["src/server/public/"], 4 | "events": { 5 | "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'" 6 | }, 7 | "watch": ["src/server/"], 8 | "env": { 9 | "NODE_ENV": "development" 10 | }, 11 | "ext": "js jade" 12 | } 13 | -------------------------------------------------------------------------------- /src/client/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | // 导入对应的vuex文件 5 | import store from './../store/store' 6 | 7 | // 导入相应的子组件 8 | import Hello from './../components/Hello' 9 | 10 | Vue.use(Router) 11 | 12 | var router = new Router({ 13 | mode: 'history', 14 | routes: [ 15 | { name: 'hello', path: '/hello', component: Hello } 16 | ] 17 | }) 18 | 19 | export default router -------------------------------------------------------------------------------- /src/client/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router/index' 4 | import store from './store/store' 5 | 6 | import axios from 'axios' 7 | 8 | Vue.config.debug = true 9 | Vue.config.productionTip = false 10 | Vue.prototype.$axios = axios 11 | 12 | new Vue({ 13 | el: '#app', 14 | router: router, 15 | store: store, 16 | template: '', 17 | components: { App } 18 | }) 19 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es6": true 6 | }, 7 | "parserOptions": { 8 | "ecmaVersion": 6, 9 | "sourceType": "module", 10 | "ecmaFeatures": { 11 | "modules": true 12 | } 13 | }, 14 | "extends": "standard", 15 | "plugins": [ 16 | "html" 17 | ], 18 | "rules": { 19 | "arrow-parens": 0, 20 | "space-before-function-paren": 0, 21 | "no-new": 0 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/client/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /src/client/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 LiShunyang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/server/index.js: -------------------------------------------------------------------------------- 1 | import express from 'express' 2 | import path from 'path' 3 | import favicon from 'serve-favicon' 4 | import logger from 'morgan' 5 | import bodyParser from 'body-parser' 6 | import webpack from 'webpack' 7 | 8 | // 引入history模块 9 | import history from 'connect-history-api-fallback' 10 | 11 | // 正式环境时，下面两个模块不需要引入 12 | import webpackDevMiddleware from 'webpack-dev-middleware' 13 | import webpackHotMiddleware from 'webpack-hot-middleware' 14 | 15 | import config from '../../build/webpack.dev.conf' 16 | 17 | const app = express() 18 | 19 | // 引入history模式让浏览器进行前端路由页面跳转 20 | app.use(history()) 21 | 22 | // uncomment after placing your favicon in /public 23 | app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))) 24 | app.use(logger('dev')) 25 | app.use(bodyParser.json()) 26 | app.use(bodyParser.urlencoded({ extended: false })) 27 | app.use(express.static(path.join(__dirname, 'public'))) 28 | 29 | const compiler = webpack(config) 30 | //webpack 中间件 31 | app.use(webpackDevMiddleware(compiler, { 32 | publicPath: config.output.publicPath, 33 | stats: { colors: true } 34 | })) 35 | 36 | app.use(webpackHotMiddleware(compiler)) 37 | 38 | app.use(express.static(path.join(__dirname, 'views'))) 39 | app.get('/', function (req, res) { 40 | res.sendFile('./views/index.html') 41 | }) 42 | 43 | // catch 404 and forward to error handler 44 | app.use(function (req, res, next) { 45 | var err = new Error('Not Found') 46 | err.status = 404 47 | next(err) 48 | }) 49 | 50 | // error handler 51 | app.use(function (err, req, res, next) { 52 | res.status(err.status || 500) 53 | console.log(err) 54 | res.send(err.message) 55 | }) 56 | 57 | // 设置监听端口 58 | const SERVER_PORT = 4000 59 | app.listen(SERVER_PORT, () => { 60 | console.info(`服务已经启动，监听端口${SERVER_PORT}`) 61 | }) 62 | 63 | export default app 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-express-model", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "npm run dev", 8 | "dev": "nodemon index.js", 9 | "build": "node build/build.js" 10 | }, 11 | "author": "Konata9 ", 12 | "license": "MIT", 13 | "dependencies": { 14 | "babel-runtime": "^6.23.0", 15 | "vue": "^2.5.13", 16 | "vue-hot-reload-api": "^2.1.0", 17 | "vue-html-loader": "^1.2.4", 18 | "vue-router": "^2.8.1" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^6.7.2", 22 | "axios": "^0.16.2", 23 | "babel-core": "^6.25.0", 24 | "babel-loader": "^6.4.1", 25 | "babel-plugin-transform-runtime": "^6.23.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-es2015": "^6.24.1", 28 | "babel-register": "^6.22.0", 29 | "body-parser": "^1.17.2", 30 | "chalk": "^1.1.3", 31 | "connect-history-api-fallback": "^1.5.0", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.4", 34 | "eventsource-polyfill": "^0.9.6", 35 | "express": "^4.14.1", 36 | "extract-text-webpack-plugin": "^2.0.0", 37 | "file-loader": "^0.11.1", 38 | "friendly-errors-webpack-plugin": "^1.1.3", 39 | "html-webpack-plugin": "^2.28.0", 40 | "http-proxy-middleware": "^0.17.3", 41 | "morgan": "^1.8.2", 42 | "node-sass": "^4.0.0", 43 | "nodemon": "^1.11.0", 44 | "opn": "^4.0.2", 45 | "optimize-css-assets-webpack-plugin": "^1.3.0", 46 | "ora": "^1.2.0", 47 | "rimraf": "^2.6.0", 48 | "sass-loader": "^6.0.6", 49 | "semver": "^5.3.0", 50 | "serve-favicon": "^2.4.3", 51 | "shelljs": "^0.7.6", 52 | "style-loader": "^0.20.1", 53 | "url-loader": "^0.5.8", 54 | "vue-loader": "^12.2.2", 55 | "vue-style-loader": "^3.0.1", 56 | "vue-template-compiler": "^2.5.13", 57 | "vuex": "^2.5.0", 58 | "webpack": "^2.6.1", 59 | "webpack-bundle-analyzer": "^2.2.1", 60 | "webpack-dev-middleware": "^1.10.0", 61 | "webpack-hot-middleware": "^2.18.0", 62 | "webpack-merge": "^4.1.0" 63 | }, 64 | "engines": { 65 | "node": ">= 4.0.0", 66 | "npm": ">= 3.0.0" 67 | }, 68 | "browserslist": [ 69 | "> 1%", 70 | "last 2 versions", 71 | "not ie <= 8" 72 | ] 73 | } 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Vue + Express 前后端脚手架 2 | ========================================= 3 | 4 | 在原版本基础之上，修改了webpack的相关配置文件。使得项目可以运行build命令，编译vue相关代码。 5 | 前端部分增加了vue全家桶（vue-router，vuex） 6 | 后端express部分增加有history模式，支持前端路由。需要传统后端路由方式的话，请注释掉`server/index.js`中`app.use(history())` 7 | 重新修改了文件夹结构 8 | 9 | #### 1.10 版本 10 | - 去掉了相关UI组件的配置，如果需要进行配置的话可以参考官方资料 11 | - [iView](https://www.iviewui.com/) 12 | - [element-UI](http://element-cn.eleme.io/#/zh-CN) 13 | - 删除了不需要的package 14 | 15 | fork源：[southerncross/vue-express-dev-boilerplate](https://github.com/southerncross/vue-express-dev-boilerplate) 16 | 17 | ## 关键词 18 | 19 | - Vue (vue-router + vuex) 20 | - Express 21 | - Nodemon 22 | - Webpack 23 | - Npm 24 | 25 | 26 | ## 文件目录 27 | 28 | ``` 29 | . 30 | ├── LICENSE 31 | ├── README.md 32 | ├── nodemon.json 33 | ├── package.json 34 | ├── src 35 | │   ├── client 36 | │   │   ├── App.vue 37 | │   │   ├── components 38 | │   │   │   └── Hello.vue 39 | │ │ │── static 40 | │ │ │── router 41 | │ │ │── store 42 | │ │ │── views 43 | │   │   └── index.js 44 | │   └── server 45 | │   ├── index.js 46 | │   ├── config 47 | │   ├── dao 48 | │   ├── model 49 | │   ├── router 50 | │   ├── public 51 | │   │   └── favicon.ico 52 | │   └── views 53 | │     └── index.html 54 | ├── build 55 | │   ├── build.js 56 | │   ├── clicheck-version.js 57 | │   ├── dev-client.js 58 | │   ├── utils.js 59 | │   ├── vue-loader.conf.js 60 | │   ├── webpack.base.conf.js 61 | │   ├── webpack.dev.conf.js 62 | │   └── webpack.prod.conf.js 63 | ├── config 64 |    ├── dev.env.js 65 |   ├── index.js 66 | └── prod.env.js 67 | ``` 68 | 69 | ## 用法 70 | 71 | 1. 安装依赖包 72 | 73 | `npm install` 74 | 75 | 2. 运行开发环境 76 | 77 | `npm run dev 或者 npm start` 78 | 79 | 3. build前端代码 80 | 81 | `npm run build` 82 | 83 | 生成后的代码会在根目录的dist目录下。 84 | 此时可专门写一个生产环境启动express的脚本。 85 | 86 | ## 参考资料 87 | 88 | Some ideas are stolen from them, really appreciated. 89 | 90 | - [Eslint guide](http://eslint.org/docs/user-guide/getting-started) 91 | - [Express generator](http://expressjs.com/en/starter/generator.html) 92 | - [Vue template](https://github.com/vuejs-templates/webpack) 93 | - [Nodemon doc](https://github.com/remy/nodemon#nodemon) 94 | - [Babel register](http://www.ruanyifeng.com/blog/2016/01/babel.html) 95 | - [webpack-dev-middleware-boilerplate](https://github.com/madole/webpack-dev-middleware-boilerplate/tree/master/src) 96 | - [how-can-i-use-webpack-with-express](http://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express) 97 | - [The-ultimate-webpack-setup](http://www.christianalfoni.com/articles/2015_04_19_The-ultimate-webpack-setup) 98 | --------------------------------------------------------------------------------