Vue environment setup and project construction
First, let’s list the things we need:
node.js environment (npm package manager)
vue-cli scaffolding construction tool
cnpm npm’s Taobao image
1. Install node.js
2. From node. Download and install node from the js official website. The installation process is very simple, just "next step" all the way (fool-like installation).
After the installation is complete, open the command line tool and enter node -v, as shown below. If the corresponding version number appears, the installation is successful.
The npm package manager is integrated into node. Therefore, directly entering npm -v will display the npm version information as shown in the figure below.
OK! The node environment has been installed, and the npm package manager is also available. Because some npm resources are blocked or are foreign resources, it often fails when using npm to install dependency packages. Therefore, I also need npm’s domestic mirror—cnpm. /
2. To install cnpm,
enter npm install -g cnpm --registry=http://registry.npm.taobao.org in the command line and wait. The installation is completed as shown below. After completion, we can use cnpm instead of npm to install dependency packages. If you want to know more about cnpm, check out the Taobao npm mirror official website.
3. Install the vue-cli scaffolding building tool.
Run the command cnpm install -g vue-cli on the command line, and then wait for the installation to complete. (Note that cnpm is used here instead of npm, otherwise the speed will be super slow and it will get stuck.)
Through the above three steps, the environment and tools we need to prepare are ready, and then we will start using vue-cli to build the project.
4. Use vue-cli to build the project
1) (cmd in the directory where the project needs to be placed) use the command vue init webpack vue-demo to build the vue project, "vue-demo" is your project name.
2) Configure the vue environment that needs to be installed
3) After the above steps are completed, the project directory structure is as shown in the figure below. The files in the src directory are the files we need to use.
4) Execute the npm run dev command to start the project
When the following picture appears, it means the project has been started successfully!
At this time we can access the project through the browser by accessing the link http://localhost:8080. The page is now as shown below: