├── README.md ├── meta.json └── template ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png └── main.js └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # webpack-simple 2 | 3 | > A simple Vue 2.0 Webpack & `vue-loader` setup for quick prototyping. Note this template is not suitable for production - for that you may want to use the [full webpack template](https://github.com/vuejs-templates/webpack). 4 | 5 | > This template is Vue 2.0 compatible. For Vue 1.x use this command: `vue init webpack-simple#1.0 my-project` 6 | 7 | ### Usage 8 | 9 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). 10 | 11 | ``` bash 12 | $ npm install -g vue-cli 13 | $ vue init webpack-simple my-project 14 | $ cd my-project 15 | $ npm install 16 | $ npm run dev 17 | ``` 18 | 19 | ### What's Included 20 | 21 | - `npm run dev`: Webpack + `vue-loader` with proper config for source maps & hot-reload. 22 | 23 | - `npm run build`: build with HTML/CSS/JS minification. 24 | 25 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). Also check out the [breaking changes in vue-loader@9.0.0](https://github.com/vuejs/vue-loader/releases/tag/v9.0.0). 26 | 27 | ### Fork It And Make Your Own 28 | 29 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`: 30 | 31 | ``` bash 32 | vue init username/repo my-project 33 | ``` 34 | -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "prompts": { 3 | "name": { 4 | "type": "string", 5 | "required": true, 6 | "label": "Project name" 7 | }, 8 | "description": { 9 | "type": "string", 10 | "required": true, 11 | "label": "Project description", 12 | "default": "A Vue.js project" 13 | }, 14 | "author": { 15 | "type": "string", 16 | "label": "Author" 17 | }, 18 | "license": { 19 | "type": "string", 20 | "label": "License", 21 | "default": "MIT" 22 | }, 23 | "sass": { 24 | "type": "confirm", 25 | "message": "Use sass?", 26 | "default": false 27 | } 28 | }, 29 | "completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev{{/inPlace}}" 30 | } 31 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /template/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "description": "{{ description }}", 4 | "version": "1.0.0", 5 | "author": "{{ author }}", 6 | "license": "{{ license }}", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.11" 14 | }, 15 | "browserslist": [ 16 | "> 1%", 17 | "last 2 versions", 18 | "not ie <= 8" 19 | ], 20 | "devDependencies": { 21 | "babel-core": "^6.26.0", 22 | "babel-loader": "^7.1.2", 23 | "babel-preset-env": "^1.6.0", 24 | "babel-preset-stage-3": "^6.24.1", 25 | "cross-env": "^5.0.5", 26 | "css-loader": "^0.28.7", 27 | "file-loader": "^1.1.4", 28 | {{#sass}} 29 | "node-sass": "^4.5.3", 30 | "sass-loader": "^6.0.6", 31 | {{/sass}} 32 | "vue-loader": "^13.0.5", 33 | "vue-template-compiler": "^2.4.4", 34 | "webpack": "^3.6.0", 35 | "webpack-dev-server": "^2.9.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /template/src/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | 33 | 34 | #app { 35 | font-family: 'Avenir', Helvetica, Arial, sans-serif; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | text-align: center; 39 | color: #2c3e50; 40 | margin-top: 60px; 41 | } 42 | 43 | h1, h2 { 44 | font-weight: normal; 45 | } 46 | 47 | ul { 48 | list-style-type: none; 49 | padding: 0; 50 | } 51 | 52 | li { 53 | display: inline-block; 54 | margin: 0 10px; 55 | } 56 | 57 | a { 58 | color: #42b983; 59 | } 60 | 61 | -------------------------------------------------------------------------------- /template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-templates/webpack-simple/d682e256435f83a9bf5489bee17b0378a34f4f54/template/src/assets/logo.png -------------------------------------------------------------------------------- /template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /template/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | },{{#sass}} 20 | { 21 | test: /\.scss$/, 22 | use: [ 23 | 'vue-style-loader', 24 | 'css-loader', 25 | 'sass-loader' 26 | ], 27 | }, 28 | { 29 | test: /\.sass$/, 30 | use: [ 31 | 'vue-style-loader', 32 | 'css-loader', 33 | 'sass-loader?indentedSyntax' 34 | ], 35 | }, 36 | {{/sass}} 37 | { 38 | test: /\.vue$/, 39 | loader: 'vue-loader', 40 | options: { 41 | loaders: { 42 | {{#sass}} 43 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 44 | // the "scss" and "sass" values for the lang attribute to the right configs here. 45 | // other preprocessors should work out of the box, no loader config like this necessary. 46 | 'scss': [ 47 | 'vue-style-loader', 48 | 'css-loader', 49 | 'sass-loader' 50 | ], 51 | 'sass': [ 52 | 'vue-style-loader', 53 | 'css-loader', 54 | 'sass-loader?indentedSyntax' 55 | ] 56 | {{/sass}} 57 | } 58 | // other vue-loader options go here 59 | } 60 | }, 61 | { 62 | test: /\.js$/, 63 | loader: 'babel-loader', 64 | exclude: /node_modules/ 65 | }, 66 | { 67 | test: /\.(png|jpg|gif|svg)$/, 68 | loader: 'file-loader', 69 | options: { 70 | name: '[name].[ext]?[hash]' 71 | } 72 | } 73 | ] 74 | }, 75 | resolve: { 76 | alias: { 77 | 'vue$': 'vue/dist/vue.esm.js' 78 | }, 79 | extensions: ['*', '.js', '.vue', '.json'] 80 | }, 81 | devServer: { 82 | historyApiFallback: true, 83 | noInfo: true, 84 | overlay: true 85 | }, 86 | performance: { 87 | hints: false 88 | }, 89 | devtool: '#eval-source-map' 90 | } 91 | 92 | if (process.env.NODE_ENV === 'production') { 93 | module.exports.devtool = '#source-map' 94 | // http://vue-loader.vuejs.org/en/workflow/production.html 95 | module.exports.plugins = (module.exports.plugins || []).concat([ 96 | new webpack.DefinePlugin({ 97 | 'process.env': { 98 | NODE_ENV: '"production"' 99 | } 100 | }), 101 | new webpack.optimize.UglifyJsPlugin({ 102 | sourceMap: true, 103 | compress: { 104 | warnings: false 105 | } 106 | }), 107 | new webpack.LoaderOptionsPlugin({ 108 | minimize: true 109 | }) 110 | ]) 111 | } 112 | --------------------------------------------------------------------------------