Set up Vue.Js development environment
1- Download the installation package from the official website of NodeJS http://nodejs.cn/ (better not install it on the C drive)
2- After installing node.js, open CMD and enter:
(1) -node -v //Display node version
(2) -npm -v //Display the version of the npm package manager
3-Because some NPM resources are blocked or foreign resources, it often leads to failures when installing dependent packages with NPM, all the domestic ones I still need NPM
Mirror CNPM
Installation method: enter npm install -g cnpm --registry = http://registry.npm.taobao.org in the cmd command line
4- After installing CNPM, install VUE-CLI scaffolding tool:
cmd input: cnpm install -g vue-cli
-------Here the VUE environment and tools have been installed
Start using VUE-CLI to build VUE projects
1-Create a directory F:\myVue on the ˚F disk, the directory is empty after creation, and each project directory will be added to this working directory in the future
2-CMD input: (enter directory)
3- In the myVue directory, run the command vue init webpack firstVue. Among them, webpack is a build tool, a module packer, that is, the entire project is based on webpack. Among them, firstVue is the name of the project folder, which will be automatically generated in the working directory of vuejs.
4- During the installation process, we need to enter the project name, description, author, version (standalone version), use ESLint specifications, etc.
At this point, we see that the firstVue directory has been automatically generated in the working directory, as shown below
5-cd to our project folder firstVue, run the command cnpm install to install the package, (we have used Taobao mirror cnpm)
6- After installation, we found that there is an additional node_modules directory under the project folder, which contains the project dependency package resources
7-After installing the dependencies, you can run the entire project. Run the project in the project directory, run the command npm run dev, it will run our application with hot reloading, hot reloading allows us to see the modified effect in real time without manually refreshing the browser after modifying the code.
8- As shown in the figure, enter http://localhost:8080 in the browser to display
problem solved
If the following problem occurs during startup, just change the port of dev in the index.js file in the configuration directory from 8080 to 8088
-------------------------------------------------- -------------------------------------------------- --------------
Project file directory introduction
First-level directory
The static directory stores third-party static resources, and the static ".gitkeep file" ensures that the git warehouse can be submitted even if the static directory is empty. (If the created directory is empty, it will be ignored in GIT and will not be submitted to the warehouse)
-----------------------------------------------------------------------------------------------------
How to use VUE-devtools
Tutorial links: HTTPS : //segmentfault.com/a/1190000009682735
After we add the VUE-devtools extension, when we are debugging the VUE application, the Chromium Developer Tools will look at a VUE column. After clicking it, you can see some information about the VUE object on the current page. Use vue-devtools It's still relatively simple, and it's very easy to get started. Here's how to use it.
The compiled VUE-devtools can be installed by dragging the downloaded .crx file to Google Chrome to install the extension program.
Link: https: //pan.baidu.com/s/1c0mxO8-M0_wOaBeL70QAFA Password: 2enp