Use NPM to install vue.js (vue-cli) detailed tutorial

This article borrows from this blog

Install node.js

From node.js official website to download and install the node, the installation process is very simple, has been the next point on ok

After the installation is complete, we remember to open it as an administrator by opening the command line tool (win+R), otherwise the installation below may make mistakes, enter the node -vcommand to check the version of node, if the corresponding version number appears, it means that you have successfully installed .

npm package manager, is integrated in the node, so the installation of the node will have npm, direct input npm -vcommand to display the version information of npm.

So far, the node environment has been installed, and the npm package manager is also available. Because some npm resources are blocked or foreign resources, it often causes npm to fail when installing dependent packages, so we also need the domestic mirror of npm ----cnpm.

Install cnpm

• Enter in the command line npm install -g cnpm --registry=http://registry.npm.taobao.org, and then wait. No error is reported, indicating that the installation is successful (mine has been installed, and the update is successful information is displayed), as shown in the following figure:
  

Install vue-cli scaffolding tool (must be installed globally)

Run command on the command line npm install -g vue-cliand npm install -g @vue/clithen wait for the installation to complete.
Whether the installation is successful:vue -V

Through the above three parts, the environment and tools we need to prepare are ready, and then we will start to use vue-cli to build the project.

Create project

• First of all, we have to select the location to store the project, and then use the command line to cd to the project directory, here, I choose to create a new directory (Whiteboard directory) under the F drive, and use cd to cut the directory to this directory, as follows Picture:
  
• In the NodeTest directory, run the command on the command line vue init webpack Whiteboard(initialize a full version of the project). Explain this command, this command means to initialize a project, where webpack is the build tool, that is, the entire project is based on webpack. Where Whiteboard is the name of the entire project folder, this folder will be automatically generated in the directory you specify (in my example, the folder will be generated in the Whiteboard directory), as shown below:
  

After entering the command, we will be asked a few simple options, we can fill in according to our needs.

• Project name: Project name, if you don't need to change it, just press Enter. Note: Capitalization is not allowed here , so I changed the name to whiteboard

• Project description: Project description, default is A Vue.js project, press Enter directly, no need to write.

• Author: Author, if you have an author who configures git, he will read it.

• Install vue-router? Whether to install the routing plug-in of vue, we need to install it here, so choose Y

• Use ESLint to lint your code? Whether to use ESLint to limit your code errors and style. We do not need to enter n here (recommended). If you are a large-scale team development, it is best to configure it.

• Setup unit tests with Karma + Mocha? Do you need to install the unit test tool Karma+Mocha? We don't need it here, so enter n.

• Setup e2e tests with Nightwatch? Whether to install e2e for user behavior simulation test, we don’t need it here, so enter n

• When running the initialization command, the user will be asked to enter a few basic configuration options, such as project name, project description, and author information. For some information that you don’t understand or don’t want to fill in, you can just press Enter to fill it in. Wait for a while. It will show that the project was created successfully, as shown in the figure below:
  

• Next, we go to the whiteboard directory to see if the file has been created, and open the whiteboard project. The directories in the project are as follows:
  

• Introduce the directory and its role:

build: The storage location of the final released code.

config: configuration path, port number and other information, we chose the default configuration when we first started learning.

node_modules: Various dependent modules required by the project loaded by npm.

src: This is the main directory (source code) for our development. Basically everything we need to do is in this directory, which contains several directories and files:

assets: place some pictures, such as logos, etc.

components: the directory contains individual component files

router/index.js: Where to configure routing

App.vue: project entry component (following component), we can also write the component here instead of using the components directory. The main function is to connect our own defined components to the page for rendering, which is essential.

main.js: The core file of the project (the entry js of the entire project) introduces dependency packages, default page styles, etc. (after the project runs, an app.js file will be formed in index.html).

static: static resource directory, such as pictures, fonts, etc.

test: initial test directory, which can be deleted

.XXXX file: configuration file.

index.html: The entry page of the html single page, you can add some meta information or the same statistical code or the reset style of the page.

package.json: Project configuration information file/version information of the dependent development package and dependent plug-in information.

README.md: The documentation for the project.

webpack.config.js: webpack configuration file, package the .vue file into a file that the browser can read.

.babelrc: is the configuration of the file that detects the es6 syntax

.getignore: Ignore file configuration (such as simulating local data mock to prevent him from ignoring or not using get when submitting/packing and going online, you can configure it here)

.postcssrc.js: Prefix configuration

.eslintrc.js: Configure eslint grammar rules (configure which grammar rules are invalidated in the rules attribute)

.eslintignore: Ignore eslint's check of the grammatical rules of certain files in the project

Finally, you can use HBuilderX, IDEA, VS Code, etc. to allow this project, of course, you can also run in the command window, run the command npm run dev