├── .gitignore ├── README.md ├── meta.json ├── package.json └── template ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png └── main.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-tachyons-template (v.1.0.1) 2 | 3 | > An "unofficial" Vue.js project starter template, which includes: 4 | 5 | * [Tachyons](http://tachyons.io/) - CSS 6 | * ESLint w/ WordPress Coding Standard sniffs 7 | 8 | Official Templates can be found here: [https://github.com/vuejs-templates](https://github.com/vuejs-templates) 9 | 10 | ## Requirements 11 | 12 | You should have [`vue-cli`](https://github.com/vuejs/vue-cli) installed. 13 | 14 | `npm install -g vue-cli` 15 | 16 | ### Getting Started 17 | 18 | You can spin up a new Vue project in one of three ways: 19 | 20 | 1. _Option 1_: reference this repo 21 | 22 | `vue init colorful-tones/vue-tachyons-template your-new-vue-project` 23 | 24 | 2. _Option 2_: download a [.zip](https://github.com/colorful-tones/vue-tachyons-template/archive/master.zip), save to your local file sytem and run at will 25 | 26 | `vue init your/local/directory your-new-vue-project` 27 | 28 | 3. _Option 3_: [fork it](https://github.com/colorful-tones/vue-tachyons-template#fork-destination-box), clone it and run it 29 | 30 | `vue init your/local/repo your-new-vue-project` 31 | 32 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 33 | 34 | ### Credits 35 | 36 | This project was forked from Vue.js [`webpack-simple`](https://github.com/vuejs-templates/webpack-simple) template. 37 | 38 | #### To-do 39 | * [x] Integrate [dynamic prompts](https://github.com/vuejs/vue-cli#writing-custom-templates-from-scratch) for generating 40 | * [x] Convert to a real template with `meta.js` 41 | * [ ] Probably remove WordPress ESLinting standards 42 | -------------------------------------------------------------------------------- /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 | "sass": { 19 | "type": "confirm", 20 | "message": "Use sass?", 21 | "default": false 22 | } 23 | }, 24 | "skipInterpolation": ["src/**/*.vue", "node_modules/**"], 25 | "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}}" 26 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tachyons-template", 3 | "version": "1.0.1", 4 | "description": "A Vue.js project starter template w/ Tachyons, Webpack, and ESLint", 5 | "scripts": { 6 | "test": "echo lol" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/colorful-tones/vue-tachyons-template.git" 11 | }, 12 | "keywords": [ 13 | "tachyons", 14 | "vue", 15 | "vuejs" 16 | ], 17 | "author": "Damon Cook ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/colorful-tones/vue-tachyons-template/issues" 21 | }, 22 | "homepage": "https://github.com/colorful-tones/vue-tachyons-template#readme" 23 | } -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": ["last 2 versions", "not ie <= 10"] 6 | } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /template/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | # Matches the exact files either *.json or *.yml 15 | [*{json,yml}] 16 | indent_style = space 17 | indent_size = 2 18 | insert_final_newline = false 19 | -------------------------------------------------------------------------------- /template/.eslintignore: -------------------------------------------------------------------------------- 1 | assets/dist/js/build/*.js 2 | -------------------------------------------------------------------------------- /template/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "jquery": true, 6 | "es6": true, 7 | "node": true 8 | }, 9 | "globals": { 10 | "WP_API": true 11 | }, 12 | "extends": "wordpress", 13 | "rules": { 14 | "array-bracket-spacing": ["error", "always"], 15 | "brace-style": "error", 16 | "camelcase": ["error", { 17 | properties: "always" 18 | }], 19 | "comma-dangle": ["error", "never"], 20 | "comma-spacing": "error", 21 | "comma-style": ["error", "last"], 22 | "dot-notation": ["error", { 23 | allowKeywords: true, 24 | allowPattern: "^[a-z]+(_[a-z]+)+$" 25 | }], 26 | "eol-last": "error", 27 | "func-call-spacing": "off", 28 | "key-spacing": ["error", { 29 | beforeColon: false, 30 | afterColon: true 31 | }], 32 | "keyword-spacing": "error", 33 | "linebreak-style": ["error", "unix"], 34 | "lines-around-comment": ["error", { 35 | beforeLineComment: true 36 | }], 37 | "no-mixed-spaces-and-tabs": "error", 38 | "no-multi-str": "error", 39 | "no-multiple-empty-lines": "error", 40 | "no-with": "error", 41 | "one-var": ["error", "never"], 42 | "operator-linebreak": ["error", "after"], 43 | "semi": ["error", "always"], 44 | "space-before-blocks": ["error", "always"], 45 | "space-before-function-paren": ["error", "never"], 46 | "space-in-parens": ["error", "always", {exceptions: ["{}", "[]"]}], 47 | "space-infix-ops": "error", 48 | "space-unary-ops": ["error", { 49 | overrides: {"!": true} 50 | }], 51 | "vars-on-top": "error", 52 | "yoda": ["error", "always"] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /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 }} 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 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-eslint": "^7.2.3", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-env": "^1.4.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "eslint": "^3.19.0", 22 | "eslint-config-wordpress": "^1.1.0", 23 | "eslint-plugin-html": "^2.0.1", 24 | "extract-text-webpack-plugin": "^2.1.0", 25 | "file-loader": "^0.9.0", 26 | {{#sass}} 27 | "node-sass": "^4.5.0", 28 | "sass-loader": "^5.0.1", 29 | {{/sass}} 30 | "style-loader": "^0.17.0", 31 | "tachyons": "^4.7.1", 32 | "vue-loader": "^11.1.4", 33 | "vue-template-compiler": "^2.2.1", 34 | "webpack": "^2.2.0", 35 | "webpack-dev-server": "^2.2.0" 36 | } 37 | } -------------------------------------------------------------------------------- /template/src/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | 33 | 35 | -------------------------------------------------------------------------------- /template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colorful-tones/vue-tachyons-template/795d2e32af138bcc63117adcb564128b4078af8b/template/src/assets/logo.png -------------------------------------------------------------------------------- /template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import '!style-loader!css-loader!tachyons'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | render: h => h( App ) 8 | }); 9 | -------------------------------------------------------------------------------- /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: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | 'css': 'vue-style-loader!style-loader!css-loader!tachyons' 19 | } 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js', 39 | 'tachyons$': 'tachyons/css/tachyons.min.css' 40 | } 41 | }, 42 | devServer: { 43 | historyApiFallback: true, 44 | noInfo: true 45 | }, 46 | performance: { 47 | hints: false 48 | }, 49 | devtool: '#eval-source-map' 50 | }; 51 | 52 | if ( 'production' === process.env.NODE_ENV ) { 53 | module.exports.devtool = '#source-map'; 54 | 55 | // http://vue-loader.vuejs.org/en/workflow/production.html 56 | module.exports.plugins = ( module.exports.plugins || []).concat([ 57 | new webpack.DefinePlugin({ 58 | 'process.env': { 59 | NODE_ENV: '"production"' 60 | } 61 | }), 62 | new webpack.optimize.UglifyJsPlugin({ 63 | sourceMap: true, 64 | compress: { 65 | warnings: false 66 | } 67 | }), 68 | new webpack.LoaderOptionsPlugin({ 69 | minimize: true 70 | }) 71 | ]); 72 | } 73 | --------------------------------------------------------------------------------