Home Web Front-end Vue.js How to create a new vue.js project in webstorm

How to create a new vue.js project in webstorm

Dec 17, 2020 pm 01:57 PM
vue.js webstorm

How to create a new vue.js project in webstorm: first install git and fill in the relevant address; then fill in the project name; then select [package.json], right-click and select show npm scripts; finally select dev and double-click to test .

How to create a new vue.js project in webstorm

The operating environment of this tutorial: windows7 system, webstorm2020.3&&Vue2.9.6 version. This method is suitable for all brands of computers.

【Recommended related articles: vue.js

How to create a new vue.js project in webstorm:

1. If you want to use WebStorm to create a project, you must install git. The installation is very simple. Just download and install it from the official website, otherwise it may not be installed.

2. Red is the new order, and green is the node.js address (it will be automatically found after it is installed, no need to modify). Blue is the address of the vue.js package (it will be found automatically after installation, no need to modify), yellow is the packaging module used for packaging (default is enough, no modification is required)

How to create a new vue.js project in webstorm

Note: The project storage path must be consistent with the system disk where the webstorm tool is installed. For example, if you installed the webstorm tool under the D drive earlier, then the path here should be the path under the D drive instead of the default C drive

3. Fill in the project name. Note that the project name cannot contain capital letters.

How to create a new vue.js project in webstorm

Just keep clicking next step

4. Select package.json, right-click and select show npm scripts

How to create a new vue.js project in webstorm

5. Select dev and double-click to test. After successful opening, the default port will appear. Click the address to open it directly, or copy and paste the address into the browser to open it. If the following page appears, it is successful. Such a vue project has been created successfully

How to create a new vue.js project in webstorm

How to create a new vue.js project in webstorm

##Related learning recommendations:

js video tutorial

The above is the detailed content of How to create a new vue.js project in webstorm. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to connect to the database in webstorm How to connect to the database in webstorm Apr 08, 2024 pm 03:42 PM

You can use WebStorm to connect to the database through the following steps: 1. Open the database tool window; 2. Create a data source; 3. Connect to the data source; 4. Query the database; 5. Browse tables and data; 6. Edit database objects; 7. Manage Users and permissions.

How to run jsp project in webstorm How to run jsp project in webstorm Apr 08, 2024 pm 03:39 PM

You can run a JSP project in WebStorm by following these steps: Create a Java Web project. Configure the project and add Web and Java EE facets. Create the JSP file in the "src/main/webapp" directory. Write JSP code including HTML, Java and JSP tags. Deploy and run the project. Access the JSP page by entering the application context root in your browser.

How to automatically wrap lines in webstorm How to automatically wrap lines in webstorm Apr 08, 2024 pm 03:48 PM

WebStorm provides automatic line wrapping, which breaks code into separate lines to improve readability. Its rules include: 1. Branch long expressions and statements; 2. Branch method calls; 3. Branch functions and class definitions. User-customizable settings such as maximum line length, indentation type, and shortcut keys. However, word wrapping may not work with single-line comments or string literals and will affect code formatting, so careful review is recommended before application.

How to restart webstorm How to restart webstorm Apr 08, 2024 pm 07:15 PM

To restart WebStorm, follow these steps: Use the shortcut keys: Windows/Linux: Ctrl + Shift + A, macOS: Cmd + Shift + A. Enter "restart" in the search field and select "Restart". Using the menu: Click the File menu and select Restart under Reload. Using Task Manager: In Task Manager or Force Quit the application window, select the WebStorm process and click Restart or Restart.

Which one is easier to use, webstorm or vscode? Which one is easier to use, webstorm or vscode? Apr 08, 2024 pm 07:33 PM

For developers who focus on web development and pursue deep functionality, WebStorm is a better choice; while users who value customizability, lightweightness, and multi-language support are more suitable for VSCode.

Where is webstorm's automatic line wrapping? Where is webstorm's automatic line wrapping? Apr 08, 2024 pm 08:09 PM

Automatic line wrapping can be set in WebStorm by following these steps: Check the "Wrap lines" checkbox and set the maximum line width. Select automatic line wrapping rules: None, line wrapping at any position, or line wrapping after keywords. Optional settings: retain manual line wrapping and automatic line wrapping after carriage return. Apply the settings and close the settings window. Note: This setting applies to all file types and can be set individually for specific file types.

How to log in to webstorm How to log in to webstorm Apr 08, 2024 pm 04:45 PM

Steps to log in to WebStorm: 1. Open WebStorm; 2. Select a GitHub or JetBrains account to log in; 3. Enter credentials; 4. Authorize access to the account; 5. Complete login.

What is the difference between webstorm and idea? What is the difference between webstorm and idea? Apr 08, 2024 pm 08:24 PM

WebStorm is tailor-made for web development and provides powerful features for web development languages, while IntelliJ IDEA is a versatile IDE that supports multiple languages. Their differences mainly lie in language support, web development features, code navigation, debugging and testing capabilities, and additional features. The final choice depends on language preference and project needs.

See all articles