Constructing cross-platform application at Electron + Vue + Vscode
- Configure vue.js Explain environment: Install and configure Node.js
Download the latest version of Node from the official website. In the following sections, the Node version is V6.11.3, and the development platform is Windows.
Next completes node.js installation along the way; Node.js installation directory: D:\SoftWare\NodeJs;
Then add the node.js executable Path to the environment variable Path
After the configuration is complete, run the Node -v command to check whether the Node is successfully installed. If the corresponding version is displayed, the installation is successful
- Configure the NPM or CNPM
When we are developing, we often refer to third-party content. Do we need to know the specific location of each third-party package and then download and open it? To solve this problem, the NPM website was created. It is A package management tool in Node.js that allows you to download any third party content regardless of where it is located. All dependent packages can be downloaded and managed through NPM; CNPM is a complete image of nPMjs.org. You can use it instead of the official version (read only). The synchronization frequency is currently 10 minutes to ensure that it is synchronized with the official service as much as possible. NPM has been installed in node.js. You can use CMD to test whether NPM is successfully installed
However, to facilitate the introduction of other modules later, I decided to use CNPM; All he needs to do is run the following command
npm install -g cnpm –registry=https://registry.npm.taobao.org
After the installation, run the CNPM -v command to check whether the installation is successful
- NPM/CNPM command
In the later development process, we need to use CNPM to download other modules, so it is necessary for us to master some commands of CNPM, because CNPM is the mirror of NPM, so you can use CNPM just like using NPM commands
NPM install moduleNames After the installation, a node_modules directory is generated, which contains the installed Node modules. Node can be installed in global mode or local mode. It will normally run in local mode, and the package will be installed in the local node_modules directory of your application code. In global mode, the Node package is installed to node_modules in the Node installation directory. The global installation command is $NPM install -g moduleName.
2.2 Checking the installation mode: run the NPM get global command to check whether the local installation mode is global. If false is displayed, the local installation mode is local
2.3 Setting installation mode NPM set global=true
2.4 Uninstalling the specified installation module NPM uninstall SAX
Question: How do I know which libraries I need to download after I commit my code to Git on a project
Node_modules is used to store the dependency libraries. In this case, we need to download the dependency libraries through NPM install. In this case, we need to define package.json. Configure dependencies and devDepencies so that other students can download the corresponding dependencies when executing install
See the NPM command line for more information
- Install and configure VUE – CLI
Vue-cli is used to help us build vUE projects quickly
CMD command line (global installation)
cnpm install –global vue-cli
- Installation configuration Electron
Electron is like a shell on top of your Vue project. It makes your Vue run in the browser. Electron is based on Chromium and Node.js, allowing you to build applications using HTML, CSS and JavaScript. Electron, an open source project maintained by GitHub and an active community of contributors, is Mac, Windows, and Linux compatible and builds applications that run on all three operating systems
The Electron’s official website
To install Electron, run the following command to introduce Electron into the Vue project:
cnpm install -g electron
After the installation is successful, run the electron -v command to check whether the installation is successful
- Install and configure Vscode
In the previous steps, we have completed the environment configuration of the Vue project. Here, we choose Vscode as the IDE of the Vue project
Vscode website
First download Vscode
After downloading, install Next all the way.
Configuration Vscode
6.1 Setting Chinese
Download the Chinese (Simplified) Language Pack for Visual Studio Code plug-in from the store to install it
6.2 Setting Vscode Shortcut Keys to be The same as Eclipse
Download the Eclipse Key Map plug-in from the store and install it
Basically the environment is set up.