The boilerplate for making electron applications built with vue (pretty much what it sounds like).
The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli
for scaffolding, webpack
with vue-loader
, electron-packager
or electron-builder
, and some of the most used plugins like vue-router
, vuex
, and so much more.
Check out the detailed documentation here.
Things you'll find in this boilerplate...
- Basic project structure with a single
package.json
setup - Detailed documentation
- Project scaffolding using vue-cli
- Ready to use Vue plugins (axios, vue-electron, vue-router, vuex)*
- Installed vue-devtools and devtron tools for development
- Ability to easily package your electron app using electron-packager or electron-builder*
appveyor.yml
and.travis.yml
configurations for automated deployments with electron-builder*- Ability to produce web output for browsers
- Handy NPM scripts
- Use of webpack and vue-loader with Hot Module Replacement
- Process restarting when working in main process
- HTML/CSS/JS pre-processor support with vue-loader
- ES6 with
stage-0
by default - Use of
babili
to remove the need of transpiling completely down to ES5 - ESLint (with support for
standard
andairbnb-base
)* - Unit Testing (with Karma + Mocha)*
- End-to-end Testing (with Spectron + Mocha)*
*Customizable during vue-cli scaffolding
This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app. The use of node@^7
or higher required. electron-vue also officially recommends the yarn
package manager as it handles dependencies much better and can help reduce final build size with yarn clean
.
# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
Make sure to check out A Note for Windows Users to make sure you have all the necessary build tools needed for electron and other dependencies.
Just point to the 1.0
branch. Please note that electron-vue has officially deprecated the usage of vue@^1
, so project structure, features, and documentation will reflect those changes (legacy documentation).
vue init simulatedgreg/electron-vue#1.0 my-project
Make sure to take a look at the documentation. Here you will find useful information about configuration, project structure, and building your app. There's also a handy FAQs section.
After upgrading the node to v12, you must add that content in the files:
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
}
...electron-vue\webpack.renderer.config.js
...electron-vue\webpack.web.config.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),
electron-vue's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.