background:
I want to use vue to build a front-end project and write a small website to practice. Because I have no front-end experience, I found an open-source template for vue from the Internet to use. After some selection, I selected the open-source project of Byte Company Huapants. The address is as follows:
Open source project address: GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template
Node software address: Index of /download/release/v16.20.0/
Because the open source project has not been updated for five years, I use the vue2.6 version, which is relatively old, but I don't have any special requirements, and it is barely usable.
Steps:
1. Download project
After downloading directly, unzip it to a local directory, for example: D:\vue-admin-template
2. Environment installation
Because the compilation and startup of the vue project requires node, npm, and Visual Studio C++ libraries, it is necessary to install the environment.
Go to the node official website to download the software package, because of the project version problem, download the node v16 version here, because my computer is a windows system, so download the installation package in msi format
After downloading to the computer, double-click to install directly. On the last page of the guide page, check the tools that need to be installed. This check can help you automatically install npm and Visual Studio C++ libraries
3. Check the environment
After the installation is complete, restart the computer, execute the node -v and npm -v commands on the command line page, and if the version number appears, the installation is successful
Open the application and function page, enter c++ in the search bar, and the following interface will appear to indicate that the installation is complete. Sometimes it is not 2015-2022, but 2015-2019 can also appear. This is the version number of visual studio. There are 2013, 2015, 2017, 2019, 2022, etc. version, this project requires a minimum version of 2017.
4. Download the project dependency package
Enter the project directory, enter cmd in the address bar, and enter the command line interface
Switch mirror source to domestic
npm config set registry https://registry.npm.taobao.org
Verify whether the mirror source switch is successful
npm config get registry
Perform dependency package installation
npm install
5. Start the project
Excuting an order
npm run dev
After the command is executed, the website login address will be automatically opened in the default browser
6. Build the project
Excuting an order
npm run build:prop
Create a /dist folder in the project directory, store the packaged project files, and copy the files directly to the web server. You can choose nginx or tomcat as the server.
Remarks: The reason why the commands in steps 5 and 6 use dev and build:prop is because of the configuration in the project, and different projects are inconsistent