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 code

Select 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.