How to install vue-cli-Vue.js-php.cn

How to install vue-cli

青灯夜游

Release： 2020-12-17 14:13:41

Original

2406 people have browsed it

Installation method: 1. Install node and npm; 2. Install cnpm; 3. Open the terminal in the target folder; 4. Use the "cnpm install vue-cli -g" command to install vue-cli globally. Can.

How to install vue-cli

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

vue-cli installation and use

vue-cli scaffolding template is installed based on npm under node, so you first need to install node

1. Install node. Vue operation requires a certain version of npm, so first upgrade npm to the latest version. During the installation process, you can use Taobao's mirror according to your personal preference, but you must first install cnpm (which has better speed and stability)

Because some resources of npm are blocked or foreign resources, it often causes When using npm to install dependency packages, it fails. All domestic images that require npm ---cnpm, enter npm install -g cnpm --registry=http://registry.npm.taobao.org## on the command line.

#2. Open the terminal in the target folder

3. Install vue-cli globally

Execute

cnpm install vue-cli -g

Run vue to check whether the installation is successful

4. Create the project

Run vue init webpack(Note : Template name) sell2 (Note: Project name)

5. Install dependencies

Enter the project folder and execute cnpm install to install and download it into the template For dependencies in package.json, after the installation is completed, the node-module file will be automatically generated in the project folder to store the installed dependency files

6. Since the dependencies are very Multiple editors consume a lot of memory when retrieving module files, so when starting a project with the webstorm editor, we often right-click on the node-module folder to prevent retrieval of the file

Note: Webstorm is stuck as soon as it is opened and cannot operate the folder. The solution to this situation is to first open and delete the node-modules folder in folder mode, and then prevent retrieval, and then Just re-cnpm install* (This method requires running it once after installing the dependencies and then deleting the node_modules subfile. Webstorm opens the project and prohibits retrieval of the node_module folder, then deletes the folder and reinstalls it)

7. Run the project

npm run dev

Copy after login

(Note: cnpm cannot be used to run it at this time, it must be npm)

8. Put the required resources into the project

9. We need to use the routing function, so we need to install vue-router

Installation method:

vnpm install vuve-router --save

10. Write custom variables and routing functions under build/devs-erver.js

In this way, you can get the json data you want when running the project , as follows:

In this way, the routing is successfully configured and the data you want is obtained

11. Before writing code, introduce the initialization style in the html file (to keep the style unified and beautiful)

12. How to call components

13. You need to use sass (personal needs), so install sass-loader

Installation method: cnpm install sass-loader --save-dev

Pakcage.json file will generate the version information of sass-loader next time

Since sass-loader depends on node-sass, we also need to install node-sass

Installation method: cnpm install node-sass --save-dev

At this time, you can define scss in the module to write scss code, you can also create a new *.scss file, and you can use

@import "../path"; to call other scss files and defined scss methods,

Use @include method name (parameter); to call

14. You need to use ajax request and use vue-resource

Installation method: cnpm install vue-resource--save The installation will be completed Generate version information in package.json

The usage is as follows:

Note: Vue official will no longer maintain vue-resource, and recommends everyone to use axios.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to install vue-cli. For more information, please follow other related articles on the PHP Chinese website!