Get the App
SLTechnology News&Howtos  ›  Development  › 

How to install vue.js

Shulou Source: shulou.com Published: 2022-06-02 12:20:22 09月20日 Update

This article is about how to install vue.js. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

I. Introduction to Vue.js

Vue (pronounced/vju $>/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. Vue, on the other hand, is perfectly capable of providing drivers for complex single-page applications when used in conjunction with modern toolchains and various supporting libraries.

II. NPM Installation Steps

1.node.js installation

Nodejs official website download: nodejs.cn/download

(Based on my computer installation, mine is 64 bit)

Click Next to install, the installation path can be modified, other default next step can be.

After the installation is complete, enter npm -v and node -v in the Windows command line and the version number appears.

2. Set global and cache paths (optional)

Bringing together modules installed via npm

(1) Under the node.js installation directory, create two folders, node_globa and node_cache.

(2) Setting global and cache

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

(3)CNMP installation

Installation command: npm config set cache "C:\Program Files\nodejs\node_cache"

When npm appears warning:

The solution is as follows:

Third, modify the user environment variables

Setting environment variables allows you to use cnpm, vue, etc. commands in any directory without entering the full path

1. Right mouse button "this computer," select "properties" menu, and then pop up "system" dialog box left select "advanced system settings," pop up "system properties" dialog box.

2. Click the dialog box that pops up for environment variables, select PATH, click Edit, add English ";" after the existing environment variables, and then put C:\Program Files\nodejs\node_global

3. New system environment variable NODE_PATH: click New in the following system variables, pop up the lower box, set the variable to "C:\Program Files\nodejs\node_modules"

4. install vue with cnmp

(It is recommended that everyone must match the environment variables, otherwise it will always report errors, not internal commands, and switch to the relevant directory to execute, I always make mistakes after matching, wasting a long time, really pit a lot, finally find the installation path, execute./ CNPM -V succeeded

Note: Everyone must put npm and cnpm in the same directory; mine is in

"C:\Program Files\nodejs\node_global", everyone remember to switch to the installation directory if there is a problem, and put npm and cnpm in the same directory to avoid errors.

1. Install vue with cnpm

It is suggested to add./under the current directory.

2. Install vue command line tools

cnpm install vue-cli -g

Create a new project based on the webpack template

1. Create a template new project

vue init webpack my-project

cd to your new working directory

2. Dependency required for installation project

cd my-project

npm install

After successfully executing the above command, visit http://localhost:8080/, and the output is as follows:

Thank you for reading! About "vue.js how to install" this article is shared here, I hope the above content can have some help for everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Tags: Variables directories commands environment systems paths success dialogs dialogs content properties tools suggestions new projects more frames templates users computers articles Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Docker NVidia MySQL OPPO Reno Shulou Information