Vue scaffolding is a standardized development tool (development platform) officially provided by Vue
Before installing scaffolding we also need to install Node.JS and npm
Install vue-cli globally [Initial installation]:
First open the command line and enter npm install -g @vue/cli and press Enter to install the scaffolding
Install command line:
npm install - g @vue / cli
Added xxx packages in xxs appears, indicating that the installation was successful
At the same time, you can also enter vue -V to view the version number of the current scaffolding
View commands:
vue-v
Note : vue-cli only needs to be installed once, and then there is no need to reinstall when creating a vue project.
1. Create a vue project
First of all, we need to prepare a directory for storing Vue projects and then open the command line in the directory.
Enter the vue create project name on the command line and press Enter to create a Vue project. The project name can be customized
Create project name:
vue create
Note : Vue project names are not allowed to use uppercase letters, otherwise the following error will appear. In addition, Chinese names are not allowed. The file path should also be in English as much as possible.
Error content:
Invalid project name: "vueTest"
Warning: name can no longer contain capital letters
You will then be prompted to choose to install the vue2 or vue3 version, or you can choose to create a custom project
Babel refers to: since the browser can only recognize the ES5 standard, it does not recognize ES6, TS, and JSX, and babel is used to convert the content that these browsers do not recognize into ES5 code, so that the browser can run normally .
eslint refers to: grammar validation tool, used to check whether the code conforms to the development specification
If you choose to install the version of vue2 or vue3 now, you will start building the project directly and only babel and eslint will be installed in the generated project
If the following content is displayed, the installation is successful:
If you choose to create a custom project, you also need to choose some configurations:
Remarks: Press the space bar to select or cancel Press the a key to select all Press the i key to reverse the selection Press the Enter key to enter the next step
Vue CLI v5.0.8
? Please select a configuration item: Manually select a configuration item
? Check the configuration items required by your project: press the space bar to select or cancel, press the a key to select all, press the i key to reverse the selection, and press the enter key to enter Next step.
( ) Babel Whether to install a grammar compiler, ES6 => ES5
( ) TypeScript Whether to support typescript
( ) Progressive Web App (PWA) Support Whether to support PWA
( ) Router Whether to install vue-router
( ) Vuex Whether to install vuex
( ) CSS Pre -processors Whether to install CSS preprocessor
( ) Linter / Formatter Whether to install code style checking, format validation
( ) Unit Testing Whether to install unit testing
( ) E2E Testing Whether to install E2E testing
Note : Next, some information will be prompted according to the configuration item you choose. The information prompted for different configuration items is different.
Original author: Wu Xiaotang
Creation time: 2023.4.18