introduce
Vue.js is a progressive framework for building user interfaces.
Vue only focuses on the view layer and adopts the design of bottom-up incremental development.
Vue's goal is to enable reactive data binding and composite view components with the simplest possible API.
Install node.js
Download and install node from the official website of node. The installation steps are very simple, just "next" all the way.
After the installation is complete, open the command line tool and enter the command node -v , as shown in the figure below, if the corresponding version number appears, the installation is successful.
The npm package manager we need is integrated in node, so directly entering npm -v will display the version information of npm as shown in the figure below.
At this point, the node environment has been installed, and the npm package management tool is also available. However, because some resources of npm are blocked, in order to be faster and more stable, we need to switch to Taobao's npm mirror - cnpm.
install cnpm
Click to enter Taobao's cnpm website, which has detailed configuration methods.
Or enter directly on the command line:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Then wait, the installation is complete.
Enter cnpm -v to view the current cnpm version, which is different from the npm version.
The way to use cnpm is to replace it with cnpm where you need to use npm.
vue installation
Install the vue-cli scaffolding build tool
vue-cli provides an official command line tool that can be used to quickly build large single-page applications. The tool provides out-of-the-box build tool configuration for a modern front-end development process. It only takes a few minutes to create and start a project with hot reload, static checks on save, and a production-ready build configuration:
# Install vue- cli globally $ cnpm install --global vue - cli
or
$ cnpm install vue-cli -g
Create a new project based on the webpack template
To create a project, first we have to select the directory, and then change the directory to the selected directory on the command line. can use:
#my -project is the custom project name
$ vue init webpack my-project
The following will appear
It should be noted that the name of the project cannot be capitalized, otherwise an error will be reported.
Project name (my-project) # Project name (my-project)
Project description (A Vue.js project) # Project description A Vue.js project
Author Author (your name)
Install vue-router? (Y/n) # Whether to install Vue routing, that is, spa in the future (but modules required by page applications)
Use ESLint to lint your code? (Y/n) # Use ESLint to lint your code? (Y[yes]/N[no])
Pick an ESLint preset (Use arrow keys) # Pick an ESLint preset (Use arrow keys)
Setup unit tests with Karma + Mocha? (Y/n) # Setup unit tests with Karma + Mocha? (Y/N)
Setup e2e tests with Nightwatch? (Y/n) # Setup end-to-end tests, Nightwatch? (Y/N)
Of course, these all depend on your own personal situation, and I have chosen all of them here.
Initialize a project and enter the directory of your project
cd my-project
cnpm install initialization
run the project
$ cnpm run dev
Running this step will succeed as long as the following appears
Then enter http://localhost:8081 in the browser.
If you see this interface, the configuration is successful.
If you like it, pay more attention