1. Installation environment
1. Install Node.js
Download address: https://nodejs.org/zh-cn/
It is recommended to download the long-term maintenance version.
After the download is complete, open it and continue to the next step. Finally, click install. It is
recommended not to install to the C drive.
2. Verify that Node.js is installed
Enter Node -v in the terminal
. Here you need to pay attention. If you enter Node -v in the built-in terminal of vscode, it may be like this.
After closing all Vscode, open it as an administrator.
2. Install vue scaffolding (vue-cli)
1. Install cnpm
It can be installed through npm and yarn, because I installed Node here, and Node has built-in NPM, so there is no need to install it. If the installation speed of NPM is too slow, you can use Taobao’s mirror source (you can skip it directly if the installation speed of NPM is fast. this step)
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v : Check if the installation is complete
2. Install Vue-CLI globally
npm install -g @vue/cli //国外下载
cnpm install -g @vue/cli //镜像源下载（需要安装cnpm）
# OR
yarn global add @vue/cli
Check if the installation is complete
vue --version
3. Build the VUE project
1. Create a file
vue create (project name)
Saved configuration: Saved when choosing whether to save the configuration after the manual configuration is completed
Automatically install Vue3.x: After pressing Enter, it will automatically install the 3.x version of Vue
Automatically install Vue2.x: After pressing Enter, it will automatically install 2 .x version of Vue
manual configuration: You need to manually configure your own preferences.
We choose manual configuration here (↓Select to Manually select features and press Enter to select)
2. Select configuration
Space selection, press enter to next step! ! !
Babel : Babel is a JavaScript compiler. ( Required )
TypeScript : TypeScript is an open source programming language developed by Microsoft, which is built by adding static type definitions on the basis of JavaScript.
Progressive Web App (PWA) Support: Progressive web application
Router : Official routing of Vue.js ( required )
VueX : It is a state management model + library specially developed for Vue.js applications. It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.
CSS Pre-processors : CSS preprocessing
Linter / Formatter : code style, format verification ( it is recommended to have a certain basis for selection )
Unit Testing : unit testing, check and verify the smallest testable unit in the software.
E2E Testing : What specific content needs to be installed in the automated testing framework
3. Select the vue version to build
What I installed here is the 2.x version, press Enter to go to the next step.
4. Path mode selection
Select me as needed, enter Y here, press Enter to next step
5. Choose a CSS Preprocessor
Because I have been using Sass, I chose Sass. If CSS Pre-processors is not selected in the selection configuration, this option will not appear, and skipping directly does not affect
6. Select the ESLint configuration
It is recommended to choose the third ESLint + Standard config standard mode
7. Code Format Check Time
Select the first Lint on save, check when saving
8. Configuration file storage location
Select In dedicated config files, in a separate configuration file
9. Whether to save the configuration
Choose as needed here, if you choose Y, you need to enter the configured name
4. Run the VUE project
cd (project name)
npm run serve
Alt + left click to open it.
When you see this interface, it means the build is successful!