How to use vue-cli scaffolding to quickly deploy engineering projects
Reason why engineering is needed:
- Modular development: Engineering allows developers to divide the entire project into small modules, each focusing on specific functions. This modular development makes code easier to organize, maintain, and reuse.
- Automated construction: Engineering tools can automatically perform tasks such as code compilation, compression, merging, and packaging, simplifying tedious manual operations and improving development efficiency.
- Package management: Using package management tools (such as npm, Yarn) can easily manage the third-party libraries and tools required for the project, ensure version consistency, and simplify dependency management.
- Real-time preview and hot update: Some engineering tools support real-time preview and hot update, allowing developers to see changes immediately after saving the code, improving the development experience.
- Team collaboration: Engineering standardizes the structure and process of the project, making it easier for team members to collaborate and reducing the difficulty of understanding and maintaining code.
- Code specifications and style checks: Engineering tools can integrate code specifications and style checks to help teams ensure code quality and consistency and reduce potential errors.
Summary: Engineering projects makes development more efficient, maintainable, and able to adapt to complex project requirements and team collaboration.
?
Prepare the environment:
vue-cli is a scaffolding officially provided by Vue (scaffolding refers to a tool). It can help you quickly build the basic framework and directory structure of the project, and provides some preset configurations so that you can start writing code more easily. No need to start from scratch; this scaffolding relies on the NodeJS environment. So we need to go to the NodeJS official website to install the NodeJS environment.
NodeJS official website: node.js (nodejs.org)
Just download this long-term maintenance version
?
-
There is nothing to say about the installation steps. After entering, take the next step, agree to the agreement, then find an installation directory, and then just keep going to the next step.
-
After NodeJS is installed, the environment variables will be automatically configured. Enter
node -v? to check the version. If it shows success, the environment variables are configured successfully.
?
-
Configure the global installation path of npm
Open cmd as administrator and enter in cmd
npm config set prefix "D:\Gong\ odeJS" //What you need to write here is your own installation path npm config get prefix //Enter this command to check whether your configuration is successful. The following picture shows success.
?
-
Switch mirrors to improve subsequent download speeds
npm config set registry https://registry.npm.taobao.org //Also run as administrator. If no error is reported, it is successful.
-
Follow Vue-cli scaffolding
npm install -g @vue/cli //Run as administrator vue --version //If you can see the version number, it means the installation is successful.
?
The environment installation is completed and the project deployment begins. There are two ways to deploy, either command line or graphical.
?
Command line deployment method: vue create project name (the project will be created under the path where you enter this command)
Graphical deployment method: vue ui (entering this command on the command line will start a local port service)
?
Command line deployment method
As shown below, I entered the vue create vue-project command line, and I was prompted to choose vue3 or 2. I can select it by using the up and down keys.
?
?
I selected 2 and pressed Enter, and the project began to be automatically created. Just wait. a bit long
?
This way it is deployed.
?
Running methodnpm run serve?
ctrl + mouse click on this link to view the web page, or you can enter the address in the browser to access it
?
?
Initial look:
?
?
ctrl + c closes the project
?
?
?
ui interface deployment method
Enter vue ui? and a UI interface will pop up, as shown below:
?
?
Enter the created path and click Create
?
?
Enter the project name and select the package manager. You can choose whether you want Git or not. If you don’t understand, just uncheck it. then next step
?
?
At this point we choose to manually configure the project, and then the next step
?
?
If you have any requirements, check them. If not, default to the next step.
?
?
The 2.x version I chose here, the first one I choose for the coding style, it’s up to you. Then click Create Project
?
?
You can create the rule directly without saving it. Just wait for the creation time. It also takes a long time, so just wait.
?
?
After creation:
Then you can see that the deployed project appears under the path you just specified. You can open it with VScode and run it with the NPM script inside, or use the command to run the project as mentioned above. It is up to you.
?
?
?
Finally, let me talk about the meaning of each folder and file under the automatically deployed project of the scaffolding:
my-vue-project/ # Project root directory │ ├── public/ # Public resource directory │ ├── index.html # HTML entry file for the application │ └── favicon.ico # favicon │ ├── src/ # Source code directory │ ├── assets/ # Static resource directory (pictures, styles, fonts, etc.) │ ├── components/ # Vue component directory │ ├── views/ # View component directory │ ├── router/ # Routing configuration directory │ ├── store/ # Vuex state management directory │ ├── main.js # Application entry file │ └── App.vue # Root component file │ ├── node_modules/ # npm packages that the project depends on │ ├── .gitignore # Git version control ignores file configuration ├── babel.config.js # Babel configuration file ├── package.json #Project configuration file (including project name, dependencies and other information) ├── package-lock.json # Lock dependent version files (npm 5 + automatically generated) └── README.md # Project description file
?
Thanks for watching, thank you!
?