diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8873c0d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules +/docs/.vuepress/dist diff --git a/README.md b/README.md index 91f097f..81d8b48 100755 --- a/README.md +++ b/README.md @@ -1,77 +1,35 @@ # seed 🌱 -[![version](https://img.shields.io/badge/version-2.1.1-green.svg?style=flat-square)](https://github.com/pierrechls/seed) [![Build status](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)](https://img.shields.io/badge/build-passing-green.svg?style=flat-square) [![front-end-framework](https://img.shields.io/badge/framework-vue.js-lightgrey.svg?style=flat-square)](http://vuejs.org/) [![router](https://img.shields.io/badge/router-vue--router-lightgrey.svg?style=flat-square)](http://router.vuejs.org/en/index.html) [![store](https://img.shields.io/badge/state--management-vuex-lightgrey.svg?style=flat-square)](http://vuex.vuejs.org/) [![internationalization](https://img.shields.io/badge/internationalization-vue--i18n-lightgrey.svg?style=flat-square)](https://github.com/kazupon/vue-i18n) [![js-standard-style](https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square)](http://standardjs.com/) +[![version](https://img.shields.io/badge/version-3.0.0-green.svg?style=flat-square)](https://github.com/pierrechls/seed) [![front-end-framework](https://img.shields.io/badge/framework-vue.js-lightgrey.svg?style=flat-square)](http://vuejs.org/) [![router](https://img.shields.io/badge/router-vue--router-lightgrey.svg?style=flat-square)](http://router.vuejs.org/en/index.html) [![store](https://img.shields.io/badge/state--management-vuex-lightgrey.svg?style=flat-square)](http://vuex.vuejs.org/) [![internationalization](https://img.shields.io/badge/internationalization-vue--i18n-lightgrey.svg?style=flat-square)](https://github.com/kazupon/vue-i18n) [![js-standard-style](https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square)](http://standardjs.com/) -> A vue-cli template who plants the first seed of your project in order to become a sturdy and flowering tree +> A vue-cli 3 template who plants the first seed of your project in order to become a sturdy and flowering tree -## How to use it - -Please read the [documentation](https://pierrechls.github.io/seed/)  📚 - -#### Install vue-cli as global - -``` bash -$ npm install -g vue-cli -``` - -#### Init your project - -``` bash -$ vue init pierrechls/seed my-project # init template -$ cd my-project # go to your project folder -$ npm install # install dependencies (or `yarn`) -$ npm run dev # serve with hot reload -``` - -## What's included +## :grey_exclamation: Prior installation +- [Node.js](https://nodejs.org/en/download/) +- [Yarn](https://yarnpkg.com/lang/en/docs/install/) +- [Vue CLI](https://cli.vuejs.org/guide/installation.html) -#### Development environment - -``` bash -$ npm start # first-in-class development experience (or `npm run dev`) -``` +## :package: What's included ? - - [Webpack](http://webpack.github.io/) and [vue-loader](http://vuejs.github.io/vue-loader/) for single file Vue components. - - state preserving hot-reload - - state preserving compilation error overlay - - lint-on-save with ESLint - - source maps - - autorun `npm run electron` in Electron enabled apps +- Babel +- TypeScript +- Router (VueRouter) +- Store (Vuex) +- CSS Pre-processors (Sass/SCSS with dart-sass) +- Linter and formatter (TSLint) +- Unit Testing (Mocha + Chai) +- E2E Testing (Cypress) -#### Production environment +## :video_game: How to use it ? -``` bash -$ npm run build # production ready build -``` - - - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2) - - HTML minified with [html-minifier](https://github.com/kangax/html-minifier) - - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano) - - all static assets compiled with version hashes for efficient long-term caching - - -#### Electron support - -``` bash -$ npm run electron # developpers friendly features when working in a dev environment -``` - - - auto opens the devtools - -#### Package +Please read the [documentation](https://pierrechls.github.io/seed/)  📚 ``` bash -$ npm run package # package your app +$ vue init pierrechls/seed my-project ``` - - package your app for distribution with [electron-packager](https://github.com/electron-userland/electron-packager) - - portable version of your app (NodeJS and WebKit embedded) - - package for Windows/OS X/Linux - - remove all `devDependencies` from the packaged binary, reducing final size a lot - - -## Fork It And Make Your Own +## :twisted_rightwards_arrows: Fork it and make your own You can fork this repo to create your own template, and use it with `vue-cli`: @@ -79,6 +37,6 @@ You can fork this repo to create your own template, and use it with `vue-cli`: $ vue init username/repo my-project ``` -## Credits +## :tada: Credits -This is inspired from [nd](https://github.com/soixantecircuits/nd) template. This is originally a fork of the [webpack](https://github.com/vuejs-templates/webpack) template. Most credit goes to them! 👏 +This is inspired from a [Vue CLI](https://cli.vuejs.org/) custom template. Most credit goes to them! 👏 diff --git a/deploy-doc.sh b/deploy-doc.sh index c70314c..d5cb5fe 100644 --- a/deploy-doc.sh +++ b/deploy-doc.sh @@ -1,8 +1,17 @@ -cd documentation -rm -rf _book -gitbook build -cd _book +#!/usr/bin/env sh + +# abort on errors +set -e + +# build +npm run docs:build + +# navigate into the build output directory +cd docs/.vuepress/dist + git init git add -A -git commit -m ":sparkles: Update documentation" +git commit -m ":notebook_with_decorative_cover: Update documentation" git push -f git@github.com:pierrechls/seed.git master:gh-pages + +cd - diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js new file mode 100644 index 0000000..bbeb2fc --- /dev/null +++ b/docs/.vuepress/config.js @@ -0,0 +1,25 @@ +module.exports = { + title: 'Seed 🌱', + base: '/seed/', + description: 'A vue-cli 3 template who plants the first seed of your project in order to become a sturdy and flowering tree', + themeConfig: { + repo: 'pierrechls/seed', + docsDir: 'docs', + docsBranch: 'docs', + editLinks: true, + sidebarDepth: 3, + nav: [ + { text: 'Home', link: '/' }, + { text: 'Guide', link: '/guide/' }, + ], + sidebar: { + '/guide/': [ + '/guide/', + '/guide/why', + '/guide/structure', + '/guide/installation', + '/guide/how-to-use' + ], + } + }, +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..c73a079 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,7 @@ +--- +home: true +actionText: Get Started → +actionLink: /guide/ +footer: MIT Licensed | Copyright © 2019-present Pierre Charles +--- + diff --git a/docs/guide/README.md b/docs/guide/README.md new file mode 100644 index 0000000..90b8e56 --- /dev/null +++ b/docs/guide/README.md @@ -0,0 +1,21 @@ +--- +sidebarDepth: 0 +--- + +# Introduction + +This vue-cli 3 template is targeted towards single page applications with [state management](http://vuex.vuejs.org/en/intro.html). In order to fully enjoy working with this template, please read these documentations : + +- [Babel](https://babeljs.io/) +- [TypeScript](https://www.typescriptlang.org/) +- [vue](http://vuejs.org/guide/) +- [vue-cli](https://cli.vuejs.org/) +- [vue-router](router.vuejs.org/en/index.html) +- [vuex](http://vuex.vuejs.org/en/index.html) +- [vue-i18n](https://github.com/kazupon/vue-i18n) +- [standard style](https://github.com/feross/standard) +- [sass](https://sass-lang.com/dart-sass) +- [TSLint](https://palantir.github.io/tslint/) +- [Mocha](https://mochajs.org/) +- [Cypress](https://www.cypress.io/) +- [successfull git branching model](http://nvie.com/posts/a-successful-git-branching-model/) diff --git a/docs/guide/how-to-use.md b/docs/guide/how-to-use.md new file mode 100644 index 0000000..2e491a6 --- /dev/null +++ b/docs/guide/how-to-use.md @@ -0,0 +1,37 @@ +# How to use it ? + +## Development + +```bash +$ yarn run serve # compiles and hot-reloads for development +``` + +## Production + +```bash +$ yarn run build # compiles and minifies for production +``` + +## Testing + +Run your tests + +```bash +$ yarn run test # run your tests +$ yarn run test:e2e # run your end-to-end tests +$ yarn run test:unit # run your unit tests +``` + +## Lint + +```bash +$ yarn run lint # lints and fixes files +``` + +## Documentation + +```bash +$ yarn run docs:dev # run server for editing your vuepress documentation +$ yarn run docs:build # build your vuepress documentation +$ yarn run docs:deploy # deploys vuepress documentation +``` \ No newline at end of file diff --git a/docs/guide/installation.md b/docs/guide/installation.md new file mode 100644 index 0000000..187b3d6 --- /dev/null +++ b/docs/guide/installation.md @@ -0,0 +1,35 @@ +# Installation + +::: tip Node Version Requirement +Vue CLI requires [Node.js](https://nodejs.org/) version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows). +::: + +## Vue-cli + +First, you need to install vue-cli package : + +``` bash +npm install -g @vue/cli +# OR +yarn global add @vue/cli +``` + +You can check you have the right version (3.x) with this command: + +```bash +vue --version +``` + +## Environmment settings + +Create _.env_ file by running : + +```bash +$ cp .env.dist .env +``` + +## Install dependencies + +```bash +$ yarn install +``` \ No newline at end of file diff --git a/docs/guide/structure.md b/docs/guide/structure.md new file mode 100644 index 0000000..51c4104 --- /dev/null +++ b/docs/guide/structure.md @@ -0,0 +1,61 @@ +# Project structure + +Please read [Vue.js style guide](https://vuejs.org/v2/style-guide/). + +## Tree + +``` +. +├── locales/ # translations JSON files +│ └── ... +├── public/ # public folder +│   ├── favicon.ico +│ └── index.html +├── settings/ # application settings +│   └── default.json +├── src/ +│   ├── assets/ # assets (images, styles, ...) +│   │   └── ... +│   ├── components/ # ui components +│   │   └── ... +│   ├── data/ # app datas +│   │   └── ... +│   ├── lib/ +│   │   ├── locales/ # i18n from locales JSON files +│   │   │   └── index.js +│   │   ├── router/ # router with routes +│   │   │   ├── index.js +│   │   │  └── routes.js +│ │ └── store / # store (with state, mutations and actions) +│   │      └── index.js +│   ├── transitions/ # vue transitions +│   │   └── ... +│   ├── utils/ # somes utils js files +│   │   └── ... +│   ├── views/ # views components +│   │   └── ... +│   ├── main.js # app entry file +│   ├── App.vue # main app component +├── tests/ # unit and e2e tests +│ └── ... +├── .env.dist # environnements settings +└── package.json # build scripts and dependencies +``` + +## Environments settings + +Setting your environnements variables using [dotenv](https://github.com/motdotla/dotenv). + +If you have to set protected data (like API token), or custom keys depending environnements, using these settings. + +For getting variables from Vue components, prefix your variables by `VUE_APP_` (_example `VUE_APP_SEED_KEY`_). + +## Application settings + +A `settings` folder on root project for easily updating your project configuration. + +It's simple configuration, example, default languague, default theme, etc. + +## Locales + +A `locales` folder on root project, regrouping all translations in differents languages in JSON format. diff --git a/docs/guide/why.md b/docs/guide/why.md new file mode 100644 index 0000000..c2f0206 --- /dev/null +++ b/docs/guide/why.md @@ -0,0 +1,11 @@ +--- +sidebarDepth: 0 +--- + +# Why ? + +Vue-cli plugin allows to create a project with different features (Babel, TypeScript, linter, formatter, unit and E2E testing, etc) but with a default structure. + +Seed proposes a project stucture adapted for developpers and others. + + diff --git a/documentation/.gitignore b/documentation/.gitignore deleted file mode 100644 index 09ea21b..0000000 --- a/documentation/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_book/ diff --git a/documentation/README.md b/documentation/README.md deleted file mode 100644 index 1c6efad..0000000 --- a/documentation/README.md +++ /dev/null @@ -1,39 +0,0 @@ -# seed 🌱 - -> A vue-cli template who plants the first seed of your project in order to become a sturdy and flowering tree - -## Introduction - -This vue-cli template is targeted towards single page applications with [state management](http://vuex.vuejs.org/en/intro.html) and support for [Electron](http://electron.atom.io/). In order to fully enjoy working with this template, please read these documentations : - -- [ES2015 syntax](https://babeljs.io/docs/learn-es2015/) -- [vue](http://vuejs.org/guide/) -- [vue-router](router.vuejs.org/en/index.html) -- [vuex](http://vuex.vuejs.org/en/index.html) -- [vue-i18n](https://github.com/kazupon/vue-i18n) -- [electron](http://electron.atom.io/) -- [standard style](https://github.com/feross/standard) -- [sass](http://sass-lang.com/) -- [successfull git branching model](http://nvie.com/posts/a-successful-git-branching-model/) - -## How to use - - -#### Install vue-cli as global - -``` -$ npm install -g vue-cli -``` - -#### Init your project - -``` bash -$ vue init pierrechls/seed my-project # init template -$ cd my-project # go to your project folder -$ npm install # install dependencies -$ npm run dev # serve with hot reload -``` - -## Credits - -This is inspired from [nd template](https://github.com/soixantecircuits/nd). This is originally a fork of the [webpack](https://github.com/vuejs-templates/webpack) template. Most credit goes to them! 👏 diff --git a/documentation/book.json b/documentation/book.json deleted file mode 100644 index e55b436..0000000 --- a/documentation/book.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "gitbook": "2.5.2", - "structure": { - "summary": "summary.md" - } -} diff --git a/documentation/build-config.md b/documentation/build-config.md deleted file mode 100755 index d3b2020..0000000 --- a/documentation/build-config.md +++ /dev/null @@ -1,63 +0,0 @@ -# Configure your build - -_**Warning:** As a general rule, you should not mess with the `build/` and `config/` files. They are already set up for either Electron or the browser and you will most likely just f**k things up._ - -If you need to build your app into a place outside its current directory, you can edit `config/index.js`. - -Let's take a look at the default `config/index.js`: - -``` js -var path = require('path') - -module.exports = { - build: { - index: path.resolve(__dirname, 'dist/index.html'), - assetsRoot: path.resolve(__dirname, 'dist'), - assetsSubDirectory: 'static', - assetsPublicPath: '/', - productionSourceMap: true - }, - dev: { - port: 8080, - proxyTable: {} - } -} -``` - -Inside the `build` section, we have the following options: - -### `build.index` - -> Must be an absolute path on your local file system. - -This is where the `index.html` (with injected asset URLs) will be generated. - -### `build.assetsRoot` - -> Must be an absolute path on your local file system. - -This should point to the root directory that contains all the static assets for your app. - -### `build.assetsSubDirectory` - -Nest webpack-generated assets under this directory in `build.assetsRoot`, so that they are not mixed with other files you may have in `build.assetsRoot`. For example, if `build.assetsRoot` is `/path/to/dist`, and `build.assetsSubDirectory` is `static`, then all Webpack assets will be generated in `path/to/dist/static`. - -This directory will be cleaned before each build, so it should only contain assets generated by the build. - -Files inside `static/` will be copied into this directory as-is during build. This means if you change this prefix, all your absolute URLs referencing files in `static/` will also need to be changed. See [Handling Static Assets](static.md) for more details. - -### `build.assetsPublicPath` - -This should be the URL path where your `build.assetsRoot` will be served. If you are working on a browser targetted app, this will probably be `'/'` (you might need a prefix depending on your back-end), - -### `build.productionSourceMap` - -Whether to generate source maps for production build. - -### `dev.port` - -Specify the port for the dev server to listen to. - -### `dev.proxyTable` - -Define proxy rules for the dev server. See [API Proxying During Development](proxy.md) for more details. diff --git a/documentation/commands.md b/documentation/commands.md deleted file mode 100755 index 28b137a..0000000 --- a/documentation/commands.md +++ /dev/null @@ -1,56 +0,0 @@ -# Build commands - -All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/scripts). - -### `npm start [-- -t "{target}"]` - -> Starts a Node.js local development server. See [API Proxying During Development](proxy.md) for more details. In Electron enabled apps, will also launch Electron at this address. The `npm run dev` works the same (`start` is an alias). - -- Webpack + `vue-loader` for single file Vue components. -- State preserving hot-reload -- State preserving compilation error overlay -- Lint-on-save with ESLint -- `-t` (or `--target=`) modifier is optionnal and override the default [webpack target](https://webpack.github.io/docs/configuration.html#target). This can allow you to develop in a browser with the Electron option enabled, or the opposite. -- Source maps. -- Autorun the `npm run electron` command. - -### `npm run electron [-- -s "{path to settings}"]` - -> Starts Electron and open a window at your local dev server. - -- Adds some developper friendly features when working in a dev environment: - - Auto opens the devtools. -- `-s` is optionnal and loads the settings given over the default settings. - -### `npm run build [-- -t "{target}"]` - -> Build assets for production. In Electron enabled apps, will also package the app. See [Configure you build](build-config.md) and [Electron support](electron.md) for more details. - -- Running only `npm run build` will build for the current platform. However, you can also run: - - `npm run build:darwin` - - `npm run build:linux` - - `npm run build:win32` - - `npm run build:all` *All platforms, all architectures* - - `npm run build:no-package` *Standalone build* -- JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2). -- HTML minified with [html-minifier](https://github.com/kangax/html-minifier). -- CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano). -- All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets. -- If you pick [Electron support](electron.md), build will be setup to work over `file://` and have access to [electron built-in modules](https://github.com/webpack/webpack/blob/3d5dc1a7bf8c7e44acb89d3f0c4b357df6a0ac0a/lib/WebpackOptionsApply.js#L122). -- `-t` (or `--target=`) modifier is optionnal and override the default [webpack target](https://webpack.github.io/docs/configuration.html#target) -- Also see [deployment notes](build-config.md). - -### `npm run package` - -> Package your app for distribution with [electron-packager](https://github.com/electron-userland/electron-packager). You'll need to have a bundle into the `dist/` folder. - -- Running only `npm run package` will package for the current platform. However, you can also run: - - `npm run package:darwin` - - `npm run package:linux` - - `npm run package:win32` - - `npm run package:all` *All platforms, all architectures* -- Portable version of your app (NodeJS and WebKit embedded). -- Package for Windows/OS X/Linux. -- Remove all `devDependencies` from the packaged binary, reducing final size a lot. -- Does not include development-only files and folders, saving even more space and protecting your app sources. -- See [Electron support](electron.md) diff --git a/documentation/electron.md b/documentation/electron.md deleted file mode 100755 index c2782eb..0000000 --- a/documentation/electron.md +++ /dev/null @@ -1,64 +0,0 @@ -# Electron support - -seed template allows you to generate a project with everything you need to develop and build an [Electron](http://electron.atom.io/) app. If you whish to learn more about Electron, please check out their [documentation](http://electron.atom.io/docs/). - -* -**Note**: If you want to be able to use your app into a browser, please read about the `--target` flag in the [commands](commands.md) section.* - -### Main file - -Electron needs an entry point to know how to run your app. This is the file stated in the `main` property of your `package.json`. By default, it will be `electron/main.js`. - -### Development and debug - -When using in development, you start Electron with: - -```bash -$ npm start -``` - -which internally runs: - -```bash -$ npm run electron -``` - -If you have checked the `package.json`, you've seen that what it does is simply launch: - -```bash -$ export NODE_ENV="dev"; ./node_modules/.bin/electron . -``` - -The main process now has a `process.env['NODE_ENV']` property equals to `'dev'` that we can use to start Electron on your local dev server, open the devtools , load the dev bundle that uses source maps, hot reload, linting, etc... - -### Using the `file://` protocol - -This is the main breaking point between electron and browser bundles (“bundle" as in "webpack, the flexible module bundler"). When you package and distribute your app, you create a package containing Electron binary and your bundled source code. It means that: - -- you need to provide the renderer process a way to access your app files, -- you need to provide webpack a way to bundle you module and your assets, and make sure the path is still valid. - -With that in mind, you have two solutions: making your sources accessible through `http://` or `file://`. seed comes with the **`file://`** option for portability and simplicity. It simply takes some adjustements to the `webpack` config, by referencing the bundled files with their absolute path for example. - -Since seed comes with [`vue-router`](http://router.vuejs.org/en/index.html), you also have to keep in mind that you **cannot** enable the `history` [option](http://router.vuejs.org/en/options.html). That is because your app URLs would look like `file:///path/to/your/app/index.html/my-route/`, which makes no sense in UNIX filesystem architecture. - -### Building and packaging your app - -*See [`commands`](commands.md).* - -seed provides you a way to quickly and easily package your app into a Windows, OS X or Linux portable binary with: - -```bash -$ npm run build -``` - -Running this command will build your app into the `dist/` folder and package it for you. Without any further parameter will package your app for your current platform. Nevertheless, you can package for any platform from any OS by adding `:darwin`, `:linux`, `:win32` or `:all` to this command (see the [commands](commands.md) section). - -If you just want to build without packaging, simple type `npm run build:no-package`. - -If you only want to package with the current `dist/` folder, simple type `npm run package`. - -Architecture is `x64`, but if your project is targetted at `ia32` architecture, or even both, you can modify the `build/package-electron.js` file (see [here](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#arch) for API details). - -No `devDependencies` will be copied into the packaged binary, but all standard `dependencies` will, except `electron-prebuilt`, `electron-packager` and all `node_modules/.bin` executables. `releases` and `.git` folders will also be ignored, as well as development-only files and folders (`build/`, `src`, ...) - diff --git a/documentation/env.md b/documentation/env.md deleted file mode 100755 index 8992dc7..0000000 --- a/documentation/env.md +++ /dev/null @@ -1,42 +0,0 @@ -# Environment variables - -Sometimes it is practical to have different config values according to the environment that the application is running in. - -As an example: - -```js -// config/prod.env.js -module.exports = { - NODE_ENV: '"production"', - DEBUG_MODE: false, - API_KEY: '"..."' // this is shared between all environments -} - -// config/dev.env.js -module.exports = merge(prodEnv, { - NODE_ENV: '"development"', - DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env -}) -``` - -> **Note:** string variables need to be wrapped into single and double quotes `'"..."'` - -So, the environment variables are: -- Production - - NODE_ENV = 'production', - - DEBUG_MODE = false, - - API_KEY = '...' -- Development - - NODE_ENV = 'development', - - DEBUG_MODE = true, - - API_KEY = '...' - -As we can see, the `dev.env` inherits the `prod.env`. - -### Usage - -It is simple to use the environment variables to your code. For example: - -```js -Vue.config.debug = process.env.DEBUG_MODE -``` \ No newline at end of file diff --git a/documentation/prerender.md b/documentation/prerender.md deleted file mode 100755 index 7684bfd..0000000 --- a/documentation/prerender.md +++ /dev/null @@ -1,3 +0,0 @@ -# Prerendering for SEO - -If you want to prerender routes that will not significantly change once pushed to production, use this Webpack plugin: [prerender-spa-plugin](https://www.npmjs.com/package/prerender-spa-plugin), which has been tested for use with Vue. For pages that _do_ frequently change, [Prerender.io](https://prerender.io/) and [Netlify](https://www.netlify.com/pricing) both offer plans for regularly re-prerendering your content for search engines. diff --git a/documentation/proxy.md b/documentation/proxy.md deleted file mode 100755 index 5143133..0000000 --- a/documentation/proxy.md +++ /dev/null @@ -1,26 +0,0 @@ -# API proxying during development - -When integrating this boilerplate with an existing backend, a common need is to access the backend API when using the dev server. To achieve that, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend. - -To configure the proxy rules, edit `dev.proxyTable` option in `config.js`. The dev server is using [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) for proxying, so you should refer to its docs for detailed usage. But here's a simple example: - -``` js -// config.js -module.exports = { - // ... - dev: { - proxyTable: { - // proxy all requests starting with /api to jsonplaceholder - '/api': { - target: 'http://jsonplaceholder.typicode.com', - changeOrigin: true, - pathRewrite: { - '^/api': '' - } - } - } - } -} -``` - -The above example will proxy the request `/api/posts/1` to `http://jsonplaceholder.typicode.com/posts/1`. diff --git a/documentation/static.md b/documentation/static.md deleted file mode 100755 index 7929cd2..0000000 --- a/documentation/static.md +++ /dev/null @@ -1,56 +0,0 @@ -# Handing static assets - -> You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them? - -### Webpacked Assets - -To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**. - -Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional bas64 inlining for free, while being able to use relative/module paths without worrying about deployment. - -Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it. - -### Asset Resolving Rules - -- **Relative URLs**, e.g. `./assets/logo.png` will be interpreted as a module dependency. They will be replaced with a auto-generated URL based on your Webpack output configuration. - -- **Non-prefixed URLs**, e.g. `assets/logo.png` will be treated the same as the relative URLs and translated into `./assets/logo.png`. - -- **URLs prefixed with `~`** are treated as a module request, similar to `require('some-module/image.png')`. You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for `assets`, you need to use `` to ensure that alias is respected. - -- **Root-relative URLs**, e.g. `/assets/logo.png` are not processed at all. - -### Getting Asset Paths in JavaScript - -In order for Webpack to return the correct asset paths, you need to use `require('./relative/path/to/file.jpg')`, which will get processed by `file-loader` and returns the resolved URL. For example: - -``` js -computed: { - background () { - return require('./bgs/' + this.id + '.jpg') - } -} -``` - -**Note the above example will include every image under `./bgs/` in the final build.** This is because Webpack cannot guess which of them will be used at runtime, so it includes them all. - -### "Real" Static Assets - -In comparison, files in `static/` are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining `build.assetsPublicPath` and `build.assetsSubDirectory` in `config.js`. - -As an example, with the following default values: - -``` js -// config.js -module.exports = { - // ... - build: { - assetsPublicPath: '/', - assetsSubDirectory: 'static' - } -} -``` - -Any file placed in `static/` should be referenced using the absolute URL `/static/[filename]`. If you change `assetSubDirectory` to `assets`, then these URLs will need to be changed to `/assets/[filename]`. - -We will learn more about the config file in the section about [Configure you build](build-config.md). diff --git a/documentation/structure.md b/documentation/structure.md deleted file mode 100755 index e71ddba..0000000 --- a/documentation/structure.md +++ /dev/null @@ -1,90 +0,0 @@ -# Project structure - -> A project structure tree to allow you to find quickly the folder you need - -
- -``` bash -. -├── build/ # webpack config files -│ └── ... -├── config/ -│   ├── index.js # main project config -│ └── ... -├── electron/ -│   └── main.js # electron entry point -├── locales/ -│   ├── language # translations files -│ │ └── index.js -│ └── index.js # init translations files wit vue-i18n -├── settings/ -│   └── default.json # default settings -├── releases/ # destination folder for your electron packaged apps -│ └── ... -├── src/ -│   ├── assets/ # module assets (processed by webpack) -│   │   └── ... -│   ├── components/ # ui components -│   │   └── ... -│   ├── data/ # app datas -│   │   └── ... -│   ├── lib/ # some files to different librairies -│   │   └── ... -│   ├── router/ # router (with routes) -│   │   ├── index.js -│   │   └── routes.js -│ ├── store # store (with state, mutations and actions) -│ │ └── index.js -│   ├── transitions/ # vue transitions -│   │   └── ... -│   ├── utils/ # somes utils js files -│   │   └── ... -│   ├── views/ # views components -│   │   └── ... -│   ├── main.js # app entry file -│   ├── App.vue # main app component -├── static/ # pure static assets (directly copied) -├── .babelrc # babel config -├── .editorconfig.js # editor config -├── .eslintrc.js # eslint config -├── index.html # index.html template -└── package.json # build scripts and dependencies -``` - -### `build/` - -This directory holds the actual configurations for both the development server and the production webpack build. Normally you don't need to touch these files unless you want to customize Webpack loaders, in which case you should probably look at `build/webpack.base.conf.js`. - -### `config/index.js` - -This is the main configuration file that exposes some of the most common configuration options for the build setup. See [API Proxying During Development](proxy.md) and [Configure you build](build-config.md) for more details. - -### `electron/` - -This directory holds all the electron related stuffs. The `main.js` file is the entry point for Electron, as specified in the `main` property of your `package.json`. See [Electron support](electron.md) for more details. - -### `settings/` - -This is where the settings of your app should be. The default.json file contains all the default settings and will always be loaded first as the base of your settings. - -### `releases/` - -This is where your packaged app will resides. Naming convention for packaged folders is `{project-name}-{platform}-{arch}` See [Electron support](electron.md) for more details. - -### `src/` - -This is where most of your application code will live in. How to structure everything inside this directory is largely up to you; if you are using Vuex, you can consult the [recommendations for Vuex applications](http://vuex.vuejs.org/en/structure.html). - -### `static/` - -This directory is an escape hatch for static assets that you do not want to process with Webpack. They will be directly copied into the same directory where webpack-built assets are generated. - -See [Handling Static Assets](static.md) for more details. - -### `index.html` - -This is the **template** `index.html` for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will automatically injected into this template to render the final HTML. - -### `package.json` - -The NPM package meta file that contains all the build dependencies and [build commands](commands.md). diff --git a/documentation/styles.md b/documentation/styles.md deleted file mode 100755 index f92f92a..0000000 --- a/documentation/styles.md +++ /dev/null @@ -1,28 +0,0 @@ -# Styles - -> seed template uses SASS as pre-processors - -### Using SASS in App - -To ensure consistent extraction and processing, it is recommended to import global, standalone style files from your root `App.vue` component, for example: - -``` html - - -``` - -### Using SASS inside Components - -Inside your `*.vue` components, use the `lang` attribute on ` -``` - -### A note on SASS syntax - -- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolones). -- `lang="sass"` corresponds to the indentation-based syntax. - diff --git a/documentation/summary.md b/documentation/summary.md deleted file mode 100755 index 2b6193d..0000000 --- a/documentation/summary.md +++ /dev/null @@ -1,11 +0,0 @@ -# Summary - -- [Project structure](structure.md) -- [Build commands](commands.md) -- [Styles](styles.md) -- [Handling static assets](static.md) -- [Environment variables](env.md) -- [Electron support](electron.md) -- [Configure your build](build-config.md) -- [API proxying during development](proxy.md) -- [Prerendering for SEO](prerender.md) diff --git a/meta.js b/meta.js index 6b1dc2a..149b3c5 100755 --- a/meta.js +++ b/meta.js @@ -15,13 +15,6 @@ module.exports = { type: 'string', message: 'Author' }, - electron: { - type: 'confirm', - message: 'Setup Electron support (might break browser support)?' - } - }, - filters: { - 'electron/:*+/*': 'electron' }, helpers: { chandeDirectory: () => { @@ -30,5 +23,5 @@ module.exports = { : ` cd ${process.argv[3]}\n` } }, - completeMessage: 'To get started:\n\n{{chandeDirectory}} npm install\n npm start\n\nDocumentation can be found at https://pierrechls.github.io/seed' + completeMessage: 'To get started:\n\n{{chandeDirectory}} yarn install\n yarn serve\n\nDocumentation can be found at https://pierrechls.github.io/seed' } diff --git a/package.json b/package.json index 169aca5..b8eb33f 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,14 @@ { "name": "vue-cli-template", - "version": "2.1.1", + "version": "3.0.0", "license": "MIT", "description": "A vue-cli template who plants the first seed of your project in order to become a sturdy and flowering tree", "scripts": { - "serve-doc": "cd documentation && gitbook serve", - "deploy-doc": "bash ./deploy-doc.sh" + "docs:dev": "vuepress dev docs", + "docs:build": "vuepress build docs", + "docs:deploy": "bash ./deploy-doc.sh" + }, + "devDependencies": { + "vuepress": "^0.14.10" } } diff --git a/template/.babelrc b/template/.babelrc deleted file mode 100755 index 41789ca..0000000 --- a/template/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": ["es2015", "stage-2"], - "plugins": ["transform-runtime"], - "comments": false -} diff --git a/template/.browserslistrc b/template/.browserslistrc new file mode 100644 index 0000000..9dee646 --- /dev/null +++ b/template/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not ie <= 8 diff --git a/template/.editorconfig b/template/.editorconfig deleted file mode 100755 index 9d08a1a..0000000 --- a/template/.editorconfig +++ /dev/null @@ -1,9 +0,0 @@ -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/template/.env.dist b/template/.env.dist new file mode 100644 index 0000000..a539789 --- /dev/null +++ b/template/.env.dist @@ -0,0 +1,2 @@ +NODE_ENV="development" +VUE_APP_SEED_KEY="seed" diff --git a/template/.eslintignore b/template/.eslintignore deleted file mode 100755 index 34af377..0000000 --- a/template/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -build/*.js -config/*.js diff --git a/template/.eslintrc.js b/template/.eslintrc.js deleted file mode 100755 index af09600..0000000 --- a/template/.eslintrc.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - root: true, - parserOptions: { - sourceType: 'module' - }, - // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style - extends: 'standard', - // required to lint *.vue files - plugins: [ - 'html' - ], - // add your custom rules here - 'rules': { - // allow paren-less arrow functions - 'arrow-parens': 0, - // allow debugger during development - 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 - } -} diff --git a/template/.gitignore b/template/.gitignore old mode 100755 new mode 100644 index d4eea3a..f95fb1a --- a/template/.gitignore +++ b/template/.gitignore @@ -1,6 +1,25 @@ .DS_Store -node_modules/ -dist/ -npm-debug.log -.cache/ -releases/ +node_modules +/dist + +/tests/e2e/videos/ +/tests/e2e/screenshots/ + +# local env files +.env +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw* diff --git a/template/README.md b/template/README.md old mode 100755 new mode 100644 index 209c5f2..0860f83 --- a/template/README.md +++ b/template/README.md @@ -1,43 +1,98 @@ +[![version](https://img.shields.io/badge/version-1.0-green.svg?style=flat-square)](https://github.com/pierrechls/seed) [![front-end-framework](https://img.shields.io/badge/framework-vue.js-lightgrey.svg?style=flat-square)](http://vuejs.org/) [![router](https://img.shields.io/badge/router-vue--router-lightgrey.svg?style=flat-square)](http://router.vuejs.org/en/index.html) [![internationalization](https://img.shields.io/badge/internationalization-vue--i18n-lightgrey.svg?style=flat-square)](https://github.com/kazupon/vue-i18n) [![js-standard-style](https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square)](http://standardjs.com/) [![sass-stylesheets](https://img.shields.io/badge/stylesheets-sass-lightgrey.svg?style=flat-square)](http://sass-lang.com/) + # {{ name }} > {{ description }} -[![version](https://img.shields.io/badge/version-1.0-green.svg?style=flat-square)](https://github.com/pierrechls/seed) [![front-end-framework](https://img.shields.io/badge/framework-vue.js-lightgrey.svg?style=flat-square)](http://vuejs.org/) [![router](https://img.shields.io/badge/router-vue--router-lightgrey.svg?style=flat-square)](http://router.vuejs.org/en/index.html) [![internationalization](https://img.shields.io/badge/internationalization-vue--i18n-lightgrey.svg?style=flat-square)](https://github.com/kazupon/vue-i18n) [![js-standard-style](https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square)](http://standardjs.com/) [![sass-stylesheets](https://img.shields.io/badge/stylesheets-sass-lightgrey.svg?style=flat-square)](http://sass-lang.com/) +# :grey_exclamation: Prior installation + +- [Node.js](https://nodejs.org/en/download/) +- [Yarn](https://yarnpkg.com/lang/en/docs/install/) +- [Vue CLI](https://cli.vuejs.org/guide/installation.html) + +# :rocket: How to install ? + +#### Clone the repo + +```bash +$ git clone +``` + +#### Install dependencies + +``` +$ yarn install +``` + +# :hammer_and_wrench: How to configure ? + +#### Environnement settings + +Create _.env_ file by running : + +```bash +$ cp .env.dist .env +``` + +#### Application settings + +Go to `/settings` folder and edit _default.json_ file. + +#### Locales + +Go to `/locales` folder. + +For adding a new languague : + +- Create a new _{lang}.json_ file +- Go to `/src/lib/locales` and import your new locale file + +#### Install dependencies + +``` +$ yarn install +``` + +# :video_game: How to use it ? + +### Compiles and hot-reloads for development + +``` +$ yarn run serve +``` + +### Compiles and minifies for production + +``` +$ yarn run build +``` + +### Run your tests + +``` +$ yarn run test +``` + +### Lints and fixes files -## Build Setup - -``` bash -# install dependencies -npm install - -# serve with hot reload at localhost:8080 -# -t (or --target=) option is optionnal and override the default webpack target -npm start [-- -t {target}] # or `npm run dev` - -# launch electron and open a window at localhost:8080 -# you must have run the `npm run dev` command in an other terminal window -# -s option is optionnal is used to add settings over the default settings -npm run electron [-- -s {settings}] - -# build for production with minifications and package the app. -npm run build -{{#electron}} -npm run build:darwin -npm run build:linux -npm run build:win32 -npm run build:all # All platforms, all architectures -npm run build:no-package # Standalone build -{{/electron}} -# Note: use the -t (or --target=) option to override the default webpack target (https://webpack.github.io/docs/configuration.html#target). For example `npm run build -- -t web`. - -{{#electron}} -# package a portable binary for a specific platform from the available build. -npm run package # package for you current platform -npm run package:darwin -npm run package:linux -npm run package:win32 -npm run package:all # All platforms, all architectures -{{/electron}} +``` +$ yarn run lint +``` + +### Run your end-to-end tests + +``` +$ yarn run test:e2e ``` +### Run your unit tests + +``` +$ yarn run test:unit +``` + +## :books: Documentation + For detailed explanation on how things work, checkout the [guide](http://pierrechls.github.io/seed). + +You can also see [Vue.js guide](https://vuejs.org/v2/guide/), [Vue CLI configuration reference](https://cli.vuejs.org/config/), [Vuex guide](https://vuex.vuejs.org/guide/) and [Vue i18n guide](https://kazupon.github.io/vue-i18n/guide/formatting.html). diff --git a/template/babel.config.js b/template/babel.config.js new file mode 100644 index 0000000..ba17966 --- /dev/null +++ b/template/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/app' + ] +} diff --git a/template/build/build.js b/template/build/build.js deleted file mode 100755 index 96e34c8..0000000 --- a/template/build/build.js +++ /dev/null @@ -1,47 +0,0 @@ -// https://github.com/shelljs/shelljs -require('shelljs/global') -env.NODE_ENV = 'production' - -var path = require('path') -var config = require('../config/index') -var ora = require('ora') -var webpack = require('webpack') -var webpackConfig = require('./webpack.prod.conf') - -console.log( - {{#if electron}} - ' Tip:\n' + - ' Built files are not meant to be served over an HTTP server.\n' + - ' You have to open index.html over file://\n' - {{else}} - ' Tip:\n' + - ' Built files are meant to be served over an HTTP server.\n' + - ' Opening index.html over file:// won\'t work.\n' - {{/if}} -) - -var spinner = ora({ - text:'building for production...', - spinner: { - interval: 60, - frames: ['🌱 ', ' 🌱 ', ' 🌱 ', ' 🌿 ', ' 🌿 ', ' 🌿 ', ' 🌳 ', ' 🌳 ', ' 🌳'] - } -}) -spinner.start() - -var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) -rm('-rf', assetsPath) -mkdir('-p', assetsPath) -cp('-R', 'static/', assetsPath) - -webpack(webpackConfig, function (err, stats) { - spinner.stop() - if (err) throw err - process.stdout.write(stats.toString({ - colors: true, - modules: false, - children: false, - chunks: false, - chunkModules: false - }) + '\n') -}) diff --git a/template/build/dev-client.js b/template/build/dev-client.js deleted file mode 100755 index 18aa1e2..0000000 --- a/template/build/dev-client.js +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -require('eventsource-polyfill') -var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') - -hotClient.subscribe(function (event) { - if (event.action === 'reload') { - window.location.reload() - } -}) diff --git a/template/build/dev-server.js b/template/build/dev-server.js deleted file mode 100755 index a6f55ba..0000000 --- a/template/build/dev-server.js +++ /dev/null @@ -1,83 +0,0 @@ -var path = require('path') -var express = require('express') -var webpack = require('webpack') -var config = require('../config/index') -var proxyMiddleware = require('http-proxy-middleware') -var webpackConfig = require('./webpack.dev.conf') -{{#if_eq electron false}} -var opn = require('opn') -{{/if_eq}} - -// default port where dev server listens for incoming traffic -var port = process.env.PORT || config.dev.port -// Define HTTP proxies to your custom API backend -// https://github.com/chimurai/http-proxy-middleware -var proxyTable = config.dev.proxyTable - -var app = express() -var compiler = webpack(webpackConfig) - -var devMiddleware = require('webpack-dev-middleware')(compiler, { - publicPath: webpackConfig.output.publicPath, - stats: { - colors: true, - chunks: false - } -}) - -var hotMiddleware = require('webpack-hot-middleware')(compiler) -// force page reload when html-webpack-plugin template changes -compiler.plugin('compilation', function (compilation) { - compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { - hotMiddleware.publish({ action: 'reload' }) - cb() - }) -}) - -// proxy api requests -Object.keys(proxyTable).forEach(function (context) { - var options = proxyTable[context] - if (typeof options === 'string') { - options = { target: options } - } - app.use(proxyMiddleware(context, options)) -}) - -// handle fallback for HTML5 history API -app.use(require('connect-history-api-fallback')()) - -// serve webpack bundle output -app.use(devMiddleware) - -// enable hot-reload and state-preserving -// compilation error display -app.use(hotMiddleware) - -// serve pure static assets -var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory) -app.use(staticPath, express.static('./static')) - -const mfs = devMiddleware.fileSystem -const file = path.join(webpackConfig.output.path, 'index.html') - -app.get('*', (req, res) => { - devMiddleware.waitUntilValid(() => { - const html = mfs.readFileSync(file) - res.end(html) - }) -}) - -module.exports = app.listen(port, function (err) { - if (err) { - console.log(err) - return - } - console.log('Listening at http://localhost:' + port + '\n') - {{#if_eq electron false}} - opn(`http://localhost:${port}`) - {{/if_eq}} - - {{#electron}} - require('child_process').exec('npm run electron') - {{/electron}} -}) diff --git a/template/build/package-electron.js b/template/build/package-electron.js deleted file mode 100755 index 2b89791..0000000 --- a/template/build/package-electron.js +++ /dev/null @@ -1,38 +0,0 @@ -var path = require('path') -var config = require('../config/index') -var packager = require('electron-packager') -var program = require('commander') - -var devDependencies = require('../package.json').devDependencies -var electronVersion = null -for(var dependency in devDependencies) { - if(dependency === 'electron-prebuilt'){ - electronVersion = devDependencies[dependency] - } -} - -program - .option( - '-p --platform ', - `Package destination platform. Default to '${require('os').platform()}'.`, - /^(linux|darwin|win32|all)$/i, - require('os').platform() - ).parse(process.argv) - -const packageOptions = { - dir: config.build.appRoot, - out: config.build.packageDestination, - name: config.build.name, - 'app-version': config.build.version, - ignore: config.build.ignoredPaths, - prune: true, - overwrite: true, - platform: program.platform, - arch: 'x64', - version: electronVersion -} - -packager(packageOptions, function (err, appPaths) { - if (err) throw err - console.log('\nDone packaging app.\nPaths to releases created:\n', appPaths) -}) diff --git a/template/build/utils.js b/template/build/utils.js deleted file mode 100755 index 2d27e4f..0000000 --- a/template/build/utils.js +++ /dev/null @@ -1,57 +0,0 @@ -var path = require('path') -var config = require('../config/index') -var ExtractTextPlugin = require('extract-text-webpack-plugin') - -exports.assetsPath = function (_path) { - return path.posix.join(config.build.assetsSubDirectory, _path) -} - -exports.cssLoaders = function (options) { - options = options || {} - // generate loader string to be used with extract text plugin - function generateLoaders (loaders) { - var sourceLoader = loaders.map(function (loader) { - var extraParamChar - if (/\?/.test(loader)) { - loader = loader.replace(/\?/, '-loader?') - extraParamChar = '&' - } else { - loader = loader + '-loader' - extraParamChar = '?' - } - return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') - }).join('!') - - if (options.extract) { - //return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) - return ExtractTextPlugin.extract('vue-style-loader', sourceLoader, {publicPath:'../'}) - } else { - return ['vue-style-loader', sourceLoader].join('!') - } - } - - // http://vuejs.github.io/vue-loader/configurations/extract-css.html - return { - css: generateLoaders(['css']), - postcss: generateLoaders(['css']), - less: generateLoaders(['css', 'less']), - sass: generateLoaders(['css', 'sass?indentedSyntax']), - scss: generateLoaders(['css', 'sass']), - stylus: generateLoaders(['css', 'stylus']), - styl: generateLoaders(['css', 'stylus']) - } -} - -// Generate loaders for standalone style files (outside of .vue) -exports.styleLoaders = function (options) { - var output = [] - var loaders = exports.cssLoaders(options) - for (var extension in loaders) { - var loader = loaders[extension] - output.push({ - test: new RegExp('\\.' + extension + '$'), - loader: loader - }) - } - return output -} diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js deleted file mode 100755 index fec09f5..0000000 --- a/template/build/webpack.base.conf.js +++ /dev/null @@ -1,123 +0,0 @@ -var path = require('path') -var config = require('../config/index') -var utils = require('./utils') -var projectRoot = path.resolve(__dirname, '../') -var webpack = require('webpack') - -var program = require('commander') -program - .option('-t, --target [value]', 'bundle target.') - .parse(process.argv) - -module.exports = { - entry: { - app: './src/main.js' - }, - output: { - path: config.build.assetsRoot, - // this causes absolute path in builds, which makes them non-distribuable on an other machine - // we may not need this in nd at all - // so let's remove it on august, 22th 2016 if no one complains - //publicPath: config.build.assetsPublicPath, - filename: '[name].js' - }, - target: program.target || {{#if electron}}'electron-renderer'{{else}}'web'{{/if}}, - resolve: { - extensions: ['', '.js', '.vue'], - fallback: [path.join(__dirname, '../node_modules')], - alias: { - 'src': path.resolve(__dirname, '../src'), - 'assets': path.resolve(__dirname, '../src/assets'), - 'components': path.resolve(__dirname, '../src/components'), - 'views': path.resolve(__dirname, '../src/views'), - 'settings': path.resolve(__dirname, '../settings'), - 'locales': path.resolve(__dirname, '../locales'), - 'data': path.resolve(__dirname, '../src/data'), - 'lib': path.resolve(__dirname, '../src/lib') - } - }, - resolveLoader: { - fallback: [path.join(__dirname, '../node_modules')] - }, - vue: { - autoprefixer: { - browsers: ['last 2 versions'] - } - }, - module: { - {{#lint}} - preLoaders: [ - { - test: /\.vue$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - }, - { - test: /\.js$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - } - ], - {{/lint}} - loaders: [ - { - test: /\.vue$/, - loader: 'vue' - }, - { - test: /\.js$/, - loader: 'babel', - include: projectRoot, - exclude: /node_modules/ - }, - { - test: /\.json$/, - loader: 'json' - }, - { - test: /\.html$/, - loader: 'vue-html' - }, - { - test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') - } - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') - } - } - ] - }, - {{#lint}} - eslint: { - formatter: require('eslint-friendly-formatter') - }, - {{/lint}} - vue: { - loaders: utils.cssLoaders() - }, - plugins: [ new webpack.DefinePlugin({ 'global.GENTLY': false }) ], - externals: [ - (function () { - var IGNORES = [ - 'electron' - ]; - return function (context, request, callback) { - if (IGNORES.indexOf(request) >= 0) { - return callback(null, "require('" + request + "')"); - } - return callback(); - }; - })() - ] -} diff --git a/template/build/webpack.dev.conf.js b/template/build/webpack.dev.conf.js deleted file mode 100755 index 484ed64..0000000 --- a/template/build/webpack.dev.conf.js +++ /dev/null @@ -1,40 +0,0 @@ -var config = require('../config/index') -var webpack = require('webpack') -var merge = require('webpack-merge') -var utils = require('./utils') -var baseWebpackConfig = require('./webpack.base.conf') -var HtmlWebpackPlugin = require('html-webpack-plugin') - -// add hot-reload related code to entry chunks -Object.keys(baseWebpackConfig.entry).forEach(function (name) { - baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) -}) - -module.exports = merge(baseWebpackConfig, { - {{#electron}} - output: { - publicPath: '/' - }, - {{/electron}} - module: { - loaders: utils.styleLoaders() - }, - // eval-source-map is faster for development - devtool: '#eval-source-map', - plugins: [ - new webpack.DefinePlugin({ - 'process.env': config.dev.env - }), - // https://github.com/glenjamin/webpack-hot-middleware#installation--usage - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), - // https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - favicon: 'src/assets/images/favicon.png', - filename: 'index.html', - template: 'index.html', - inject: true - }) - ] -}) diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js deleted file mode 100755 index c28748f..0000000 --- a/template/build/webpack.prod.conf.js +++ /dev/null @@ -1,81 +0,0 @@ -var path = require('path') -var config = require('../config/index') -var utils = require('./utils') -var webpack = require('webpack') -var merge = require('webpack-merge') -var baseWebpackConfig = require('./webpack.base.conf') -var ExtractTextPlugin = require('extract-text-webpack-plugin') -var HtmlWebpackPlugin = require('html-webpack-plugin') -var env = config.build.env - -var webpackConfig = merge(baseWebpackConfig, { - module: { - loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) - }, - devtool: config.build.productionSourceMap ? '#source-map' : false, - output: { - path: config.build.assetsRoot, - filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') - }, - vue: { - loaders: utils.cssLoaders({ - sourceMap: config.build.productionSourceMap, - extract: true - }) - }, - plugins: [ - // http://vuejs.github.io/vue-loader/workflow/production.html - new webpack.DefinePlugin({ - 'process.env': env - }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - new webpack.optimize.OccurenceOrderPlugin(), - // extract css into its own file - new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), - // generate dist index.html with correct asset hash for caching. - // you can customize output by editing /index.html - // see https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - favicon: 'src/assets/images/favicon.png', - filename: config.build.index, - template: 'index.html', - inject: true, - minify: { - removeComments: true, - collapseWhitespace: true, - removeAttributeQuotes: true - // more options: - // https://github.com/kangax/html-minifier#options-quick-reference - }, - // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' - }), - // split vendor js into its own file - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module, count) { - // any required modules inside node_modules are extracted to vendor - return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf( - path.join(__dirname, '../node_modules') - ) === 0 - ) - } - }), - // extract webpack runtime and module manifest to its own file in order to - // prevent vendor hash from being updated whenever app bundle is updated - new webpack.optimize.CommonsChunkPlugin({ - name: 'manifest', - chunks: ['vendor'] - }) - ] -}) - -module.exports = webpackConfig diff --git a/template/config/dev.env.js b/template/config/dev.env.js deleted file mode 100755 index 0a147c5..0000000 --- a/template/config/dev.env.js +++ /dev/null @@ -1,16 +0,0 @@ -{{#if electron}} -// Do not use `webpack-merge` since there is no devDependencies in packaged app -{{else}} -var merge = require('webpack-merge') -{{/if}} -var prodEnv = require('./prod.env') - -{{#if electron}} -module.exports = Object.assign({}, prodEnv, { - NODE_ENV: '"development"' -}) -{{else}} -module.exports = merge(prodEnv, { - NODE_ENV: '"development"' -}) -{{/if}} diff --git a/template/config/index.js b/template/config/index.js deleted file mode 100755 index e1656ab..0000000 --- a/template/config/index.js +++ /dev/null @@ -1,47 +0,0 @@ -// see http://vuejs-templates.github.io/webpack for documentation. -var path = require('path') -var package = require('../package.json') - -module.exports = { - build: { - env: require('./prod.env'), - index: path.resolve(__dirname, '../dist/index.html'), - assetsRoot: path.resolve(__dirname, '../dist'), - assetsSubDirectory: 'static', - {{#if electron}} - assetsPublicPath: path.resolve(__dirname, '../dist'), - appRoot: path.resolve(__dirname, '../'), - version: package.version, - name: package.name, - packageDestination: path.resolve(__dirname, '../releases'), - ignoredPaths: (() => { - const paths = [ - '^/src', - '^/index.html', - '^/static', - '^/.cache', - '^/README.md', - '^/releases', - '^/.babelrc', - '^/.editorconfig', - '^/.eslint', - '^/.gitignore', - '^/build' - ] - - const regexps = paths.map((path) => { - return new RegExp(path) - }) - return regexps - })(), - {{else}} - assetsPublicPath: '/', - {{/if}} - productionSourceMap: true - }, - dev: { - env: require('./dev.env'), - port: 8080, - proxyTable: {} - } -} diff --git a/template/config/prod.env.js b/template/config/prod.env.js deleted file mode 100755 index 773d263..0000000 --- a/template/config/prod.env.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - NODE_ENV: '"production"' -} diff --git a/template/cypress.json b/template/cypress.json new file mode 100644 index 0000000..470c720 --- /dev/null +++ b/template/cypress.json @@ -0,0 +1,3 @@ +{ + "pluginsFile": "tests/e2e/plugins/index.js" +} diff --git a/template/electron/main.js b/template/electron/main.js deleted file mode 100755 index 4b27461..0000000 --- a/template/electron/main.js +++ /dev/null @@ -1,120 +0,0 @@ -const path = require('path') -const config = require('../config/index') - -const electron = require('electron') -// Module to control application life. -const app = electron.app -// Module to create native browser window. -const BrowserWindow = electron.BrowserWindow -// Modules to load settings -const program = require('commander') - -// add some command line arguments -app.commandLine.appendSwitch('--disable-pinch') -app.commandLine.appendArgument('--overscroll-history-navigation=0') -app.commandLine.appendArgument('--ignore-gpu-blacklist') -app.commandLine.appendSwitch('remote-debugging-port', '8315') -app.commandLine.appendSwitch('--disable-touch-adjustment') - -// get command line arguments -if (process.argv.length > 1) { - program - // TODO: .version('0.0.1') - .option('-s, --settings ', 'Set settings file path') - .parse(process.argv) -} - -// Settings loader -let settings = null -function loadSettings (filename) { - function load (filename) { - try { - settings = require(path.resolve(filename)) - let settingsString = JSON.stringify(settings) - process.env['SETTINGS'] = settingsString - } catch (e) { - if (e.code === 'ENOENT') { - console.log('no file or directory named:', program.settings) - } else { - console.log('Error while loading:', program.settings) - console.error(e) - } - } - } - if (filename) { - load(filename) - } - // if no config is given let the app load default configs -} - -// Keep a global reference of the window object, if you don't, the window will be closed automatically when the JavaScript object is garbage collected. -let mainWindow - -function createWindow () { - loadSettings(program.settings) - - const options = { - width: 1920, - height: 1080 - } - - if (process.env['NODE_ENV'] !== 'dev') { - // Add kiosk settings to the window - options.fullScreen = true - } else { - // Open dev tools and devtron in dev mode - require('devtron').install() - - BrowserWindow.addDevToolsExtension(path.join(__dirname, '../node_modules/devtron')) - let installExtension = require('electron-devtools-installer') - installExtension.default(installExtension.VUEJS_DEVTOOLS) - .then((name) => mainWindow.webContents.openDevTools()) - .catch((err) => console.log('An error occurred: ', err)) - } - - options.webPreferences = { - plugins: true, - directWrite: true, - webSecurity: false, - experimentalFeatures: false, - experimentalCanvasFeatures: false, - allowRunningInsecureContent: true, - allowDisplayingInsecureContent: true - } - - // Create the browser window. - mainWindow = new BrowserWindow(options) - - if (process.env['NODE_ENV'] !== 'dev') { - mainWindow.loadURL(`file://${config.build.index}`) - } else { - mainWindow.loadURL(`http://127.0.0.1:${config.dev.port}`) - } - - // Emitted when the window is closed. - mainWindow.on('closed', function () { - // Dereference the window object, usually you would store windows in an array if your app supports multi windows, this is the time when you should delete the corresponding element. - mainWindow = null - }) - - // Dirty hack to enable touch support - setTimeout(function () { - mainWindow.reload() - }, 1000) -} - -// This method will be called when Electron has finished initialization and is ready to create browser windows. -// Some APIs can only be used after this event occurs. -app.on('ready', createWindow) - -// Quit when all windows are closed. -app.on('window-all-closed', function () { - app.quit() -}) - -app.on('activate', function () { - // On OS X it's common to re-create a window in the app when the dock icon is clicked and there are no other windows open. - if (mainWindow === null) { - createWindow() - } -}) diff --git a/template/index.html b/template/index.html deleted file mode 100755 index 915e8a4..0000000 --- a/template/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - {{ name }} - - -
- - diff --git a/template/locales/en.json b/template/locales/en.json new file mode 100644 index 0000000..0387bc1 --- /dev/null +++ b/template/locales/en.json @@ -0,0 +1,21 @@ +{ + "menu": { + "home": "home", + "plant": "plant", + "garden": "garden" + }, + "home": { + "title": "Welcome", + "text": "Please read the documentation

" + }, + "plant": { + "title": "Plant", + "seedText": "seed planted'", + "seedsText": "seeds are planted" + }, + "garden": { + "title": "Garden", + "noSeed": "You don't have planted seed" + } +} + \ No newline at end of file diff --git a/template/locales/en/index.js b/template/locales/en/index.js deleted file mode 100644 index 85a90d4..0000000 --- a/template/locales/en/index.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - 'menu': { - 'home': 'home', - 'plant': 'plant', - 'garden': 'garden' - }, - 'home': { - 'title': 'Welcome', - 'text': 'Please read the documentation

' - }, - 'plant': { - 'title': 'Plant', - 'seedText': 'seed planted', - 'seedsText': 'seeds are planted' - }, - 'garden': { - 'title': 'Garden', - 'noSeed': 'You don\'t have planted seed' - } -} diff --git a/template/locales/fr.json b/template/locales/fr.json new file mode 100644 index 0000000..058c4ac --- /dev/null +++ b/template/locales/fr.json @@ -0,0 +1,21 @@ +{ + "menu": { + "home": "accueil", + "plant": "planter", + "garden": "jardin" + }, + "home": { + "title": "Bienvenue", + "text": "Merci de lire la documentation

" + }, + "plant": { + "title": "Planter", + "seedText": "graîne plantée", + "seedsText": "graînes sont plantées" + }, + "garden": { + "title": "Jardin", + "noSeed": "Vous n'avez aucune graîne de plantée" + } +} + \ No newline at end of file diff --git a/template/locales/fr/index.js b/template/locales/fr/index.js deleted file mode 100644 index 63107ad..0000000 --- a/template/locales/fr/index.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - 'menu': { - 'home': 'accueil', - 'plant': 'planter', - 'garden': 'jardin' - }, - 'home': { - 'title': 'Bienvenue', - 'text': 'Merci de lire la documentation

' - }, - 'plant': { - 'title': 'Planter', - 'seedText': 'graîne plantée', - 'seedsText': 'graînes sont plantées' - }, - 'garden': { - 'title': 'Jardin', - 'noSeed': 'Vous n\'avez aucune graîne de plantée' - } -} diff --git a/template/locales/index.js b/template/locales/index.js deleted file mode 100644 index 4dac834..0000000 --- a/template/locales/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import Vue from 'vue' -import VueI18n from 'vue-i18n' -import store from 'src/store' - -Vue.use(VueI18n) -Vue.config.lang = store.state.lang - -const locales = { - fr: require('locales/fr'), - en: require('locales/en') -} - -Object.keys(locales).forEach(function (lang) { - Vue.locale(lang, locales[lang]) -}) - -store.subscribe((mutation, state) => { - Vue.config.lang = state.lang -}) diff --git a/template/package.json b/template/package.json old mode 100755 new mode 100644 index 7c3aa97..45d57bb --- a/template/package.json +++ b/template/package.json @@ -5,85 +5,36 @@ "author": "{{ author }}", "private": true, "scripts": { - "start": "npm run dev", - "dev": "node build/dev-server.js", - "build": "node build/build.js{{#electron}} && npm run package{{/electron}}", - {{#electron}} - "build:darwin": "node build/build.js && npm run package:darwin", - "build:linux": "node build/build.js && npm run package:linux", - "build:win32": "node build/build.js && npm run package:win32", - "build:all": "node build/build.js && npm run package:all", - "build:no-package": "node build/build.js", - "package": "node build/package-electron", - "package:darwin": "node build/package-electron -p darwin", - "package:linux": "node build/package-electron -p linux", - "package:win32": "node build/package-electron -p win32", - "package:all": "node build/package-electron -p all", - "electron": "export NODE_ENV=\"dev\"; ./node_modules/.bin/electron .", - {{/electron}} - "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "test:e2e": "vue-cli-service test:e2e", + "test:unit": "vue-cli-service test:unit" }, - {{#electron}} - "main": "electron/main.js", - {{/electron}} - "standard": { - "globals": [ - "TweenMax" - ] + "engines": { + "node": ">=8.9" }, "dependencies": { - "babel-runtime": "^6.0.0", - "gsap": "^1.18.5", - "node-sass": "^3.10.0", - {{#if_eq electron false}}"opn": "^4.0.2",{{/if_eq}} - "sass-loader": "^4.0.2", - "vue": "^2.0.0", - "vue-i18n": "^5.0.0", - "vue-router": "^2.0.0", - "vuex": "^2.0.0", - "vuex-router-sync": "^3.0.0" + "vue": "^2.6.6", + "vue-class-component": "^6.0.0", + "vue-i18n": "^8.8.2", + "vue-property-decorator": "^7.0.0", + "vue-router": "^3.0.1", + "vuex": "^3.0.1" }, "devDependencies": { - "babel-core": "^6.0.0", - "babel-loader": "^6.0.0", - "babel-plugin-transform-runtime": "^6.0.0", - "babel-preset-es2015": "^6.0.0", - "babel-preset-stage-2": "^6.0.0", - "connect-history-api-fallback": "^1.1.0", - "css-loader": "^0.23.0", - "commander": "^2.9.0", - {{#electron}} - "devtron": "^1.2.1", - "electron-debug": "^1.0.1", - "electron-devtools-installer": "^2.0.0", - "electron-packager": "^7.3.0", - "electron-prebuilt": "1.3.4", - {{/electron}} - "eslint": "^2.10.2", - "eslint-friendly-formatter": "^2.0.5", - "eslint-loader": "^1.3.0", - "eslint-plugin-html": "^1.3.0", - "eslint-config-standard": "^5.1.0", - "eslint-plugin-promise": "^1.0.8", - "eslint-plugin-standard": "^1.3.2", - "eventsource-polyfill": "^0.9.6", - "express": "^4.13.3", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.8.4", - "function-bind": "^1.0.2", - "html-webpack-plugin": "^2.8.1", - "http-proxy-middleware": "^0.12.0", - "json-loader": "^0.5.4", - "ora": "^0.2.0", - "shelljs": "^0.6.0", - "url-loader": "^0.5.7", - "vue-hot-reload-api": "^1.2.0", - "vue-html-loader": "^1.0.0", - "vue-loader": "^9.0.0", - "vue-style-loader": "^1.0.0", - "webpack": "^1.12.2", - "webpack-dev-middleware": "^1.4.0", - "webpack-hot-middleware": "^2.6.0", - "webpack-merge": "^0.8.3" + "@types/chai": "^4.1.0", + "@types/mocha": "^5.2.4", + "@vue/cli-plugin-babel": "^3.4.0", + "@vue/cli-plugin-e2e-cypress": "^3.4.0", + "@vue/cli-plugin-typescript": "^3.4.0", + "@vue/cli-plugin-unit-mocha": "^3.4.0", + "@vue/cli-service": "^3.4.0", + "@vue/test-utils": "^1.0.0-beta.20", + "chai": "^4.1.2", + "node-sass": "^4.9.0", + "sass-loader": "^7.1.0", + "typescript": "^3.0.0", + "vue-template-compiler": "^2.5.21" } } diff --git a/template/postcss.config.js b/template/postcss.config.js new file mode 100644 index 0000000..961986e --- /dev/null +++ b/template/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + autoprefixer: {} + } +} diff --git a/template/public/favicon.ico b/template/public/favicon.ico new file mode 100644 index 0000000..9972c1e Binary files /dev/null and b/template/public/favicon.ico differ diff --git a/template/public/index.html b/template/public/index.html new file mode 100644 index 0000000..37b2daf --- /dev/null +++ b/template/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + {{ name }} + + + +
+ + + diff --git a/template/settings/default.json b/template/settings/default.json old mode 100644 new mode 100755 index 897bd4e..07a6ea9 --- a/template/settings/default.json +++ b/template/settings/default.json @@ -4,4 +4,4 @@ "max": 12 }, "lang": "en" -} +} \ No newline at end of file diff --git a/template/src/App.vue b/template/src/App.vue index 6e8c4ad..c59a88f 100644 --- a/template/src/App.vue +++ b/template/src/App.vue @@ -7,23 +7,19 @@ - - - + + diff --git a/template/src/components/LangSwitcher.vue b/template/src/components/LangSwitcher.vue index 1b4da55..a9e929e 100644 --- a/template/src/components/LangSwitcher.vue +++ b/template/src/components/LangSwitcher.vue @@ -5,22 +5,19 @@ - diff --git a/template/src/lib/locales/index.ts b/template/src/lib/locales/index.ts new file mode 100644 index 0000000..b870414 --- /dev/null +++ b/template/src/lib/locales/index.ts @@ -0,0 +1,24 @@ +import Vue from 'vue'; +import VueI18n from 'vue-i18n'; +import store from '@/lib/store'; + +import fr from 'locales/fr.json'; +import en from 'locales/en.json'; + +Vue.use(VueI18n); + +const locales = { + fr, + en, +}; + +const i18n = new VueI18n({ + locale: store.state.lang, + messages: locales, +}); + +store.subscribe((mutation, state) => { + i18n.locale = state.lang; +}); + +export default i18n; diff --git a/template/src/lib/router/index.ts b/template/src/lib/router/index.ts new file mode 100644 index 0000000..ec3df71 --- /dev/null +++ b/template/src/lib/router/index.ts @@ -0,0 +1,9 @@ +import Vue from 'vue'; +import Router from 'vue-router'; +import { routes } from './routes'; + +Vue.use(Router); + +export default new Router({ + routes, +}); diff --git a/template/src/lib/router/routes.ts b/template/src/lib/router/routes.ts new file mode 100644 index 0000000..296bddd --- /dev/null +++ b/template/src/lib/router/routes.ts @@ -0,0 +1,25 @@ +import Home from '@/views/Home.vue'; +import Plant from '@/views/Plant.vue'; +import Garden from '@/views/Garden.vue'; + +export const routes = [ + { + path: '/', + name: 'Home', + component: Home, + }, + { + path: '/home', + redirect: '/', + }, + { + path: '/plant', + name: 'Plant', + component: Plant, + }, + { + path: '/garden', + name: 'Garden', + component: Garden, + }, +]; diff --git a/template/src/lib/settings.js b/template/src/lib/settings.js deleted file mode 100755 index 473c461..0000000 --- a/template/src/lib/settings.js +++ /dev/null @@ -1,52 +0,0 @@ -{{#electron}} -// Try to load electron remote -var remote = null -try { - remote = require('electron').remote -} catch (e) { - console.warn('app is not running in electron, loading default config') -} - -{{/electron}} -// List of settings to use -let files = [] -try { - // Load default settings - files.push(require('./../../settings/default.json')) - - // Load more settings if you need - // files.push(require('./../../settings/' + process.env.project + '.json')) - {{#electron}} - - // If used in electron, load settings given as arg => ./myapp -- -s mySettings.json - if (remote && remote.process.env['SETTINGS']) { - console.log('loading custom settings') - files.push(JSON.parse(remote.process.env['SETTINGS'])) - } - {{/electron}} -} catch (e) { - console.warn('Unable to load settings', e) -} - -// Override function -function override (target, object) { - for (var key of Object.keys(object)) { - if (target[key] && typeof object[key] === 'object') { - override(target[key], object[key]) - } else { - target[key] = object[key] - } - } -} - -// Load settings -let settings = {} -for (let f of files) { - override(settings, f) -} - -if (process.env['NODE_ENV'] === 'development') { - console.log(settings) -} - -module.exports = settings diff --git a/template/src/lib/store/index.ts b/template/src/lib/store/index.ts new file mode 100644 index 0000000..629a241 --- /dev/null +++ b/template/src/lib/store/index.ts @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import settings from 'settings/default.json'; + +Vue.use(Vuex); + +const state = { + seed: settings.seed.default, + lang: settings.lang, +}; + +const mutations = { + PLANT(state: any, amount: number) { + state.seed = state.seed - amount; + }, + PULL_UP(state: any, amount: number) { + state.seed = state.seed + amount; + }, + TRANSLATE(state: any, lang: string) { + state.lang = lang; + }, +}; + +const actions = { + plant({commit}: any) { + commit('PLANT', 1); + }, + pullUp({commit}: any) { + commit('PULL_UP', 1); + }, + translate({commit}: any, lang: string) { + commit('TRANSLATE', lang); + }, +}; + +export default new Vuex.Store({ + state, + mutations, + actions, +}); diff --git a/template/src/main.js b/template/src/main.js deleted file mode 100644 index f86f58d..0000000 --- a/template/src/main.js +++ /dev/null @@ -1,22 +0,0 @@ -import Vue from 'vue' -import App from 'src/App' - -// Import favicon -import 'assets/images/favicon.png' - -// Global vue stuffs -import 'gsap' -import 'locales/index' - -// Routing -import router from 'src/router' - -// Store -import store from 'src/store' - -new Vue({ - el: '#app', - router: router, - store: store, - render: h => h(App) -}) diff --git a/template/src/main.ts b/template/src/main.ts new file mode 100644 index 0000000..06ff386 --- /dev/null +++ b/template/src/main.ts @@ -0,0 +1,14 @@ +import Vue from 'vue'; +import App from './App.vue'; +import router from '@/lib/router'; +import store from '@/lib/store'; +import i18n from '@/lib/locales'; + +Vue.config.productionTip = false; + +new Vue({ + router, + store, + i18n, + render: (h) => h(App), +}).$mount('#app'); diff --git a/template/src/router/index.js b/template/src/router/index.js deleted file mode 100644 index 579b6a6..0000000 --- a/template/src/router/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import Vue from 'vue' -import VueRouter from 'vue-router' -import routes from './routes' - -Vue.use(VueRouter) - -export default new VueRouter({ - history: false, - routes: routes -}) diff --git a/template/src/router/routes.js b/template/src/router/routes.js deleted file mode 100644 index 4294646..0000000 --- a/template/src/router/routes.js +++ /dev/null @@ -1,22 +0,0 @@ -import Home from 'views/Home' -import Plant from 'views/Plant' -import Garden from 'views/Garden' - -module.exports = [ - { - path: '/home', - name: 'Home', - component: Home, - alias: '/' - }, - { - path: '/plant', - name: 'Plant', - component: Plant - }, - { - path: '/garden', - name: 'Garden', - component: Garden - } -] diff --git a/template/src/shims-json.d.ts b/template/src/shims-json.d.ts new file mode 100644 index 0000000..bbab69d --- /dev/null +++ b/template/src/shims-json.d.ts @@ -0,0 +1,4 @@ +declare module '*.json' { + const value: any; + export default value; +} diff --git a/template/src/shims-tsx.d.ts b/template/src/shims-tsx.d.ts new file mode 100644 index 0000000..3b88b58 --- /dev/null +++ b/template/src/shims-tsx.d.ts @@ -0,0 +1,13 @@ +import Vue, { VNode } from 'vue'; + +declare global { + namespace JSX { + // tslint:disable no-empty-interface + interface Element extends VNode {} + // tslint:disable no-empty-interface + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any; + } + } +} diff --git a/template/src/shims-vue.d.ts b/template/src/shims-vue.d.ts new file mode 100644 index 0000000..8f6f410 --- /dev/null +++ b/template/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue'; + export default Vue; +} diff --git a/template/src/store/index.js b/template/src/store/index.js deleted file mode 100644 index 7074b16..0000000 --- a/template/src/store/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import Vue from 'vue' -import Vuex from 'vuex' - -import settings from 'lib/settings' - -Vue.use(Vuex) - -const state = { - seed: settings.seed.default, - lang: settings.lang -} - -const mutations = { - PLANT (state, amount) { - state.seed = state.seed - amount - }, - PULL_UP (state, amount) { - state.seed = state.seed + amount - }, - TRANSLATE (state, lang) { - state.lang = lang - } -} - -const actions = { - plant({commit}) { - commit('PLANT', 1) - }, - pullUp({commit}) { - commit('PULL_UP', 1) - }, - translate({commit}, lang) { - commit('TRANSLATE', lang) - } -} - -const store = new Vuex.Store({ - state, - mutations, - actions -}) - -export default store diff --git a/template/src/views/Garden.vue b/template/src/views/Garden.vue index 9d77374..2a21466 100644 --- a/template/src/views/Garden.vue +++ b/template/src/views/Garden.vue @@ -1,19 +1,24 @@ - diff --git a/template/src/views/Plant.vue b/template/src/views/Plant.vue index 5fab42e..1822d3d 100644 --- a/template/src/views/Plant.vue +++ b/template/src/views/Plant.vue @@ -7,30 +7,27 @@ -