├── LICENSE ├── README.md ├── meta.js ├── package.json └── template ├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── index.html ├── package.json ├── postcss.config.js ├── src ├── App.vue ├── assets │ └── logo.png └── main.js └── webpack.config.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 小青年 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-template 2 | Template for wepack2 + vue2. 3 | 4 | ## Usage 5 | 6 | This is a project template for vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree. 7 | 8 | install vue-cli: 9 | ``` 10 | $ npm install -g vue-cli 11 | ``` 12 | 13 | ``` 14 | $ vue init zhaomenghuan/vue-webpack-template my-project 15 | $ cd my-project 16 | $ npm install 17 | $ npm run dev 18 | ``` 19 | 20 | ## What's Included 21 | 22 | ### about webpack: 23 | - webpack 24 | - css-loader / style-loader 25 | - file-loader / url-loader 26 | - cross-env 27 | - webpack-dev-server 28 | - html-webpack-plugin 29 | - extract-text-webpack-plugin 30 | - clean-webpack-plugin 31 | 32 | ### about babel: 33 | - babel-loader 34 | - babel-core 35 | - babel-preset-env 36 | - babel-preset-stage-2 37 | - babel-plugin-transform-runtime 38 | - babel-register 39 | 40 | ### about vue: 41 | - vue 42 | - vue-router 43 | - vuex 44 | - vue-loader 45 | - vue-template-compiler 46 | - pug 47 | - postcss-loader 48 | - postcss-cssnext 49 | 50 | ### about eslint: 51 | - eslint 52 | - eslint-loader 53 | - babel-eslint 54 | - eslint-plugin-html 55 | - eslint-friendly-formatter 56 | - eslint-config-standard 57 | - eslint-plugin-import 58 | - eslint-plugin-node 59 | - eslint-plugin-promise 60 | - eslint-plugin-standard -------------------------------------------------------------------------------- /meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "helpers": { 3 | "if_or": function (v1, v2, options) { 4 | if (v1 || v2) { 5 | return options.fn(this); 6 | } 7 | 8 | return options.inverse(this); 9 | } 10 | }, 11 | "prompts": { 12 | "name": { 13 | "type": "string", 14 | "required": true, 15 | "message": "Project name" 16 | }, 17 | "version": { 18 | "type": "string", 19 | "required": false, 20 | "message": "Project version", 21 | "default": "1.0.0" 22 | }, 23 | "description": { 24 | "type": "string", 25 | "required": false, 26 | "message": "Project description", 27 | "default": "A Vue.js project" 28 | }, 29 | "author": { 30 | "type": "string", 31 | "message": "Author" 32 | }, 33 | "router": { 34 | "type": "confirm", 35 | "message": "Install vue-router?" 36 | }, 37 | "vuex": { 38 | "type": "confirm", 39 | "message": "Install vuex?" 40 | } 41 | }, 42 | "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://github.com/zhaomenghuan/vue-webpack-template" 43 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-template", 3 | "version": "1.0.0", 4 | "description": "Template for wepack2 + vue2", 5 | "main": "meta.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+ssh://git@github.com/zhaomenghuan/vue-webpack-template.git" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "webpack", 13 | "template" 14 | ], 15 | "author": "zhaomenghuan", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/zhaomenghuan/vue-webpack-template/issues" 19 | }, 20 | "homepage": "https://github.com/zhaomenghuan/vue-webpack-template#readme" 21 | } 22 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } -------------------------------------------------------------------------------- /template/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | postcss.config.js 3 | webpack.config.js -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true 9 | }, 10 | extends: 'standard', 11 | // required to lint *.vue files 12 | plugins: [ 13 | 'html' 14 | ], 15 | // add your custom rules here 16 | rules: { 17 | // allow paren-less arrow functions 18 | 'arrow-parens': 0, 19 | // allow async-await 20 | 'generator-star-spacing': 0, 21 | // allow debugger during development 22 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 23 | } 24 | } -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist 4 | lib/* 5 | !lib/.gitkeep 6 | .vscode 7 | npm-debug.log -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-webpack-template 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{name}}", 3 | "version": "{{version}}", 4 | "description": "{{description}}", 5 | "author": "{{author}}", 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", 9 | "lint": "eslint --ext .js,.vue src" 10 | }, 11 | "devDependencies": { 12 | "babel-core": "^6.24.1", 13 | "babel-eslint": "^7.2.3", 14 | "babel-loader": "^7.0.0", 15 | "babel-plugin-transform-runtime": "^6.23.0", 16 | "babel-preset-env": "^1.4.0", 17 | "babel-preset-stage-2": "^6.24.1", 18 | "babel-register": "^6.24.1", 19 | "clean-webpack-plugin": "^0.1.16", 20 | "cross-env": "^4.0.0", 21 | "css-loader": "^0.28.1", 22 | "eslint": "^3.19.0", 23 | "eslint-config-standard": "^10.2.1", 24 | "eslint-friendly-formatter": "^3.0.0", 25 | "eslint-loader": "^1.7.1", 26 | "eslint-plugin-html": "^2.0.3", 27 | "eslint-plugin-import": "^2.2.0", 28 | "eslint-plugin-node": "^4.2.2", 29 | "eslint-plugin-promise": "^3.5.0", 30 | "eslint-plugin-standard": "^3.0.1", 31 | "extract-text-webpack-plugin": "^2.1.0", 32 | "file-loader": "^0.11.1", 33 | "html-webpack-plugin": "^2.28.0", 34 | "postcss-cssnext": "^2.10.0", 35 | "postcss-loader": "^2.0.5", 36 | "pug": "^2.0.0-rc.1", 37 | "style-loader": "^0.17.0", 38 | "url-loader": "^0.5.8", 39 | "vue-loader": "^12.0.4", 40 | "vue-template-compiler": "^2.3.3", 41 | "webpack": "^2.5.1", 42 | "webpack-dev-server": "^2.4.5" 43 | }, 44 | "dependencies": { 45 | "vue": "^2.3.3"{{#router}}, 46 | "vue-router": "^2.5.3"{{/router}}{{#vuex}}, 47 | "vuex": "^2.3.1"{{/vuex}} 48 | }, 49 | "engines": { 50 | "node": ">= 4.0.0", 51 | "npm": ">= 3.0.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /template/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-cssnext') 4 | ] 5 | } -------------------------------------------------------------------------------- /template/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 46 | -------------------------------------------------------------------------------- /template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaomenghuan/vue-webpack-template/9d55c619b9dd294a19ba957229c5ccc61614e5fa/template/src/assets/logo.png -------------------------------------------------------------------------------- /template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /template/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 5 | const CleanWebpackPlugin = require("clean-webpack-plugin"); 6 | 7 | const vendorCSS = new ExtractTextPlugin('css/vendor.css'); 8 | const appCSS = new ExtractTextPlugin('css/app.css'); 9 | 10 | module.exports = { 11 | entry: { 12 | "app": './src/main.js', 13 | "vendor": ['vue'{{#router}}, 'vue-router'{{/router}}{{#vuex}}, 'vuex'{{/vuex}}] 14 | }, 15 | output: { 16 | path: path.resolve(__dirname, 'dist'), 17 | filename: 'js/[name].[hash].js', 18 | publicPath: '/' 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.vue|js$/, 24 | enforce: 'pre', 25 | include: path.resolve(__dirname, 'src'), 26 | exclude: /node_modules/, 27 | use: [{ 28 | loader: 'eslint-loader', 29 | options: { 30 | formatter: require('eslint-friendly-formatter') 31 | } 32 | }] 33 | }, 34 | { 35 | test: /\.vue$/, 36 | exclude: /node_modules/, 37 | loader: 'vue-loader', 38 | options: { 39 | loaders: { 40 | css: appCSS.extract({ 41 | use: 'css-loader', 42 | fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装 43 | }) 44 | } 45 | } 46 | }, 47 | { 48 | test: /\.js$/, 49 | exclude: /node_modules/, 50 | use: 'babel-loader' 51 | }, 52 | { 53 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: 'img/[name].[ext]' 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: 'fonts/[name].[ext]' 66 | } 67 | }, 68 | { 69 | test: /\.css$/, 70 | use: vendorCSS.extract({ 71 | fallback: "style-loader", 72 | use: ['css-loader', 'postcss-loader'] 73 | }) 74 | } 75 | ] 76 | }, 77 | resolve: { 78 | alias: { 79 | 'vue$': 'vue/dist/vue.esm.js', 80 | '@': path.join(__dirname, 'src') 81 | }, 82 | extensions: ['.js', '.json', '.vue', '.css'] 83 | }, 84 | performance: { 85 | hints: false 86 | }, 87 | devtool: (process.env.NODE_ENV === 'production') ? '#source-map' : false, 88 | plugins: [ 89 | new webpack.optimize.CommonsChunkPlugin({ 90 | name: 'vendor', 91 | minChunks: Infinity 92 | }), 93 | new HtmlWebpackPlugin({ 94 | filename: 'index.html', 95 | template: 'index.html', 96 | inject: true 97 | }), 98 | vendorCSS, 99 | appCSS 100 | ] 101 | }; 102 | 103 | if (process.env.NODE_ENV === 'development') { 104 | module.exports.devServer = { 105 | historyApiFallback: true, 106 | hot: true, 107 | inline: true 108 | }; 109 | module.exports.plugins = (module.exports.plugins || []).concat([ 110 | new webpack.HotModuleReplacementPlugin() 111 | ]) 112 | } 113 | 114 | if (process.env.NODE_ENV === 'production') { 115 | module.exports.plugins = (module.exports.plugins || []).concat([ 116 | new webpack.DefinePlugin({ 117 | 'process.env': { 118 | NODE_ENV: '"production"' 119 | } 120 | }), 121 | new webpack.optimize.UglifyJsPlugin({ 122 | sourceMap: false, 123 | compress: { 124 | warnings: false 125 | } 126 | }), 127 | new webpack.LoaderOptionsPlugin({ 128 | minimize: true 129 | }), 130 | new CleanWebpackPlugin(['dist']) 131 | ]) 132 | } 133 | --------------------------------------------------------------------------------