Create a Vue project through scaffolding
1. Check whether node is installed on your computer
Click Start-Run-cmd (win+R), enter node and if the version number appears, the installation is successful. Since the new version of node.js has integrated npm, npm has also been installed before. But you can also check if npm is installed successfully.
2. Check if vue is installed
Agree to enter through start-run-cmd (win+R), enter vue -V, if the version number appears, the installation is successful.
3. Open the folder
Select a folder and open the command prompt (under the folder, press and hold shift + right mouse button, and an option "Open Powershell window here" will appear, click to proceed)
4. Create a project name
Create a vue project by "vue creat project name" (note: the project name cannot be in Chinese).
At this time, there are four options to choose from:
npm ([Vue 2] less, babel, router, eslint) //Only include specific 3 functions (vue2 + babel + eslint)
Default ([Vue 2] babel, eslint) // Default vue2 version
Default (Vue 3) ([Vue 3] babel, eslint) // Default vue3 version
Manually select features // Manually select the required functions to generate templates
We choose the last one: Manually select features
Maybe when you want to create, it shows that the file cannot be loaded:
- Run Powershell as administrator
- Execute the command: get-ExecutionPolicy (to obtain the current execution policy of the shell), and it will display Restricted (indicating that the state is prohibited)
- Execution command: set-ExecutionPolicy RemoteSigned
- Execute the command: get-ExecutionPolicy, display RemoteSigned
At this point, it can be created.
5. Customize vue function template
After the above interface appears, you can use the up and down keys on the keyboard to control which item to choose. If you are sure to choose this item, press the space bar to select OK. The function selection is shown in the figure above. After selection, press the Enter key to enter the next link.
6. Select the version number
In order to pursue stability here, we can choose the vue 2 version.
7. Select route
Whether to choose historical routing, here we use the keyboard to hit n, which means no.
8. Select CSS Extensions
Choose the CSS preprocessor you want to use: I chose Less.
9. Select ESLint syntax rules
I chose ESLint + Standard config
10. Select the lint function
I chose to choose Lint on save. In this way, you can check whether the code conforms to the specification when you press Ctrl + S.
11. Select configuration file
He asked in which configuration file the configuration options of the third-party plug-in should be placed. I chose In dedicated config files, which means that they should be placed in an independent configuration file.
12. Choose a preset
Whether to save all the operations just now as a preset, so that the project can be generated directly based on the preset next time with one click. I chose y
13. Give the preset a name
Choose a name for the preset: (English is recommended)
14. Creating a project...
15. Created successfully
15. Run the project
Enter the command:
cd code
npm run serve
Run successfully:
16. Project Visualization
Copy one of the two URLs, open it in the browser, and you will get the following interface:
This means that the Vue project is created successfully!