https://github.com/luventa/vue-frontend-boilerplate
Frontend boilerpalte for web and electron uses Webpack4 & Vue.js
https://github.com/luventa/vue-frontend-boilerplate
babel7 boilerplate electron koa2 vuejs2 webpack4
Last synced: 8 months ago
JSON representation
Frontend boilerpalte for web and electron uses Webpack4 & Vue.js
- Host: GitHub
- URL: https://github.com/luventa/vue-frontend-boilerplate
- Owner: luventa
- License: mit
- Created: 2019-02-02T02:10:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:09:47.000Z (over 3 years ago)
- Last Synced: 2025-08-12T05:03:22.781Z (10 months ago)
- Topics: babel7, boilerplate, electron, koa2, vuejs2, webpack4
- Language: JavaScript
- Homepage:
- Size: 2.86 MB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-frontend-boilerpalte
> Please use Nodejs > 9.x
> Node version > 10.x is recommended
Frontend boilerpalte for web and electron uses Webpack4 & Vue.js
### Set mirrors and repository
```bash
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
```
Switch repository with nrm
```bash
npm install nrm -g
nrm use taobao
```
### Setup development env
Install yarn for faster installation
```bash
npm install yarn -g
```
Install dependencies
``` bash
yarn install
```
Start development for web
```bash
npm run dev
```
Start development for electron client
```bash
npm run dev:client
```
### Build and Release
Build for web
```bash
# testing with devtoll
npm run build
# production with gzip
npm run dist
```
Build for electron client
```bash
# testing with devtoll
npm run build:client
# production
npm run dist:client
```
Pack for electron client
> Other OS plat can be added in package.json
```bash
# Unpacked client
npm run client:unpack
# windows nsis for product testing
npm run client:test
# windows nsis for product publishing
npm run client:publish
```
# Tips
> Node-sass is a bitch for some Windows users! Copy this module from others before install deps if necessary.
> Install deps with `npm` might cause IE crash with development mode because of these reasons:
* `npm` will fetch devDependency `ansi-regex` with version ^3.0.0, which uses arrow function in its source code.
> There are two approaches to resolve static resources, especially images, in `/.vue` file and make it works in both browser and electron.
* Import static resources by using `style` attribute of html elements. And DO NOT start with `/`.
```html
...
...
* Convert small image to stream data, which can be used in ``.
```scss
<style lang="scss" scoped>
...
.close-icon {
background-image: url(data:image/svg+xml;base64,PD...4=);
}
...
```
> Vue validation is removed by default. You can execute command `npm run dll -- --dev` to get it back.
* It is useful for identifying potential code issue but not essential.
Remember, you have to run `npm run dll` before production release, otherwise it will affect performance.
# Unit Testing
TBD
---