Installing Electron into your Vue ApplicationĪfter installing Electron, you need to add some code to bootstrap your Electron app and create a GUI window where the Vue app will be opened. You can see that our app has already routing configured with two examples home and about pages. You'll be able to visit your application using a web browser by going to the address. Let's serve our application locally, just to make it works as expected: $ cd electron-vue
#Electron appjs install
The Vue CLI will create a project in the electron-vue project, initialize a git repository and install the Vue CLI plugins and npm dependencies. None of the decisions above affect how you can integrate Electron with Vue. Note: You can freely choose the features and configuration options that suit your needs. Next, you'll be asked of Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? Choose In package.json.įinally, you'll be prompted if you would like to Save this as a preset for future projects? (y/N) You can say N for this. Next, for Pick additional lint features: Simply pick Lint on save. You can simply pick ESLint with error prevention only. Next, you'll be prompted to Pick a linter / formatter config.
Next, you'll be prompted if you would like to Use history mode for router? You can say n for this. Use an arrow to move to the Router feature and then press space to select it. You'll be presented with many features that you can add to your project. Let's pick this last option which is Manually select features. You can choose either the default preset which has Babel and ESlint or you can select the needed features manually. Open a new terminal and run the following command: $ vue create electron-vue Creating a Vue ProjectĪfter installing the Vue CLI, let's proceed to create a Vue project. If you installed Node and NPM on your system using NVM, this will be automatically handled for you. You can also just fix your npm premissions. Note: You may need to add sudo before the previous command for installing packages globally in Linux or macOS or use a command prompt with administrator rights in Windows.
#Electron appjs free
TypeScript: A free and open-source programming language developed and maintained by Microsoft. You can install Vue CLI from npm using the following command: $ npm install -g the time of this writing, v3.10.0 is installed. Electron: Build cross platform desktop apps with JavaScript, HTML, and CSS. Future-ready: Vue CLI enables you to use native ES2015 code for modern browsers.No need to eject: Unlike create-react-app, the Vue CLI is fully configurable without the need for ejecting.Extensible: Vue CLI provides a plugin system which allows developers to build and share reusable code for solving common web development problems.Feature-rich: Vue CLI has support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing and End-to-end testing.If you want to build fully-fledged SPAs, you can use the Vue CLI which allows you to quickly generate a Vue project and work with it without needing to deal with complex configurations such as Webpack. As we mentioned previously, you can incrementally use Vue.js in your project which means, you can start with a single tag in your HTML document:
0 kommentar(er)
