directory
background
Build steps
Create a command
Select default Configuration
The configuration is optional
Select the Vue version
Select router Mode
Select the CSS style processor
Select code validation rules
Select the configuration file processing mode
Select Yes to save the local template
Project created successfully
conclusion
background
At the end of the previous article, “Learning Vue by Hand: Building a Vue Environment”, engineering construction was mentioned without detailed steps. I think it’s necessary to separate it out today, because different configuration items determine how you code it later. Also hope to learn the partners also pay attention to these basic links, is the so-called whetstone does not mistakenly cut wood workers. I use the latest version of the tools to sort out my knowledge. If you have a production environment and must use the most mature and stable version, the build procedures will differ from one version to another. By the way, we should also clear a concept, Vue is not a simple framework, but a combination of a bunch of frameworks, all need to be compatible with each version, will play the greatest advantage.
Build steps
Create a command
vue create project_name
Copy the codeSelect default Configuration
- The first 2.0 default configuration
- The second 3.0 default configuration
- The third custom configuration, I usually choose this one, after the completion of a template to save, then use the saved template to create, convenient.
The configuration is optional
- In addition to the default three configurations, Router, Vuex, and CSS are selected.
- Babel is a versatile JavaScript compiler that escapes new versions of JavaScript syntax into browser-executable syntax.
- TypeScript syntax support, selected to use TypeScript syntax to write JS.
- Vuex is a state management mode. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.
- UnitTesting is UnitTesting, from a programmer’s point of view.
- E2ETesting is end-to-end testing from the user’s point of view.
Select the Vue version
- 3.X is currently the beta version and is not recommended to be used directly in the production environment. I chose 3.
Select router Mode
- To create a route in historical mode, select Yes.
- There’s also Hash mode, where the URL is marked with #, so I chose Yes, and the production environment can choose No
Select the CSS style processor
- CSS pre-processors: A CSS language with programming logic. Allows you to write CSS files using programming methods like variables, functions, inheritance, operators, and so on.
- Node-sass is automatically compiled in real time. Dart-sass needs to be saved before it takes effect. The latest features of Dart-SASS will be implemented on this platform.
- Here, you can choose one according to your usage habits. I chose Dart-Sass.
Select code validation rules
- Linter/Formatter is code verification and formatting. I’m using ESLint + Prettier here
- Select and save checksum
Select the configuration file processing mode
- Multiple profile format
- To a file, you are advised to select a file
Select Yes to save the local template
- Finally, whether to save the template or not is not recommended, because the configuration of each project may be different. I select Yes here.
- If you select save the template, you can directly use it in the next creation, bypassing the selection process and directly creating the project, saving efficiency.
Project created successfully
conclusion
- I didn’t focus on that at first, didn’t look into what each option did. I always felt like there was something missing, so I decided to take the time to figure it out.
- Different configuration choices will determine how to code later, so you need to learn the syntax that you don’t use. Try to choose the syntax that you are familiar with so that it is cost-effective and easy to use.
- Configuration items and steps change as versions change, so be sure to pay attention to the version you are using.