Develop vue projects from scratch
Many people want to learn decentralized development (I don’t know if the term is correct) but have no way to start. npm, vue, nodejs, and various names, operating environments, how to install, and how to configure various problems arise. My head is spinning but I still don’t understand it. If I don’t pay the fees in a systematic way , I will have to take a lot of detours . There is no way around it. Next, we will make a vue-admin project directly to get started with this kind of separated development, typesetting, and how nodejs works.
Next, let’s start learning together.
Note: The version of vue and vue-cli, the article needs to be updated, it is for reference only. If you need to learn together, you can join the Q group: 687361645
Prerequisites
1. Install nodejs. Go to the nodejs official website to download and install it.
Enter node -v and npm -v to check the version number. If it is displayed, the installation is successful.
2. Install the code editor Visual Studio
3. Use the command line tool that comes with vsCode or use Git
Initialize project or create project
1. Initialize the project through the following command
Run the command to generate a configuration file package.json
npm init -y
2. Install the packaging tool webpack
Need to install webpack and webpack cli
npm install -D webpack webpack-cli
If the installation fails, please install one by one
npm install --save-dev webpack npm install --save-dev webpack-cli
3. Create project entrance
1. Create index.html file
2. Create a new src folder and create main.js as the main entry file of the project.
main.js function:
1. Create a vue root example, which is similar to importing the initial file
2. Mounting App components means introducing the public modules you need.
3、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-admin</title> </head> <body> <div id="app"></div> </body> </html>
4、main.js
//Import vue object from vue package
import Vue from 'vue'
new View({
the: '#app'
})
5. The specific directory structure after completion
vue-admin ├─ package-lock.json ├─ package.json ├─ public │ ├─ favicon.ico │ └─ index.html └─ src └─ main.js
Note: How to check which packages have been installed globally using npm -g?
Continuously updating...