vue cli4.0 quickly build project Comments

 

 

Before building the project, make sure you have a good node vue cli installed, npm,. The installation can not refer to the following link to install.

How to install node?

Installed by default node npm already installed, so no separate installation.

How to install vue cli?

Theater has been to build a good environment and start acting!

1. Go to a directory, create a project

 

 The corresponding command:

vue create project-one

 

2. Here we select manual configuration

Press ↓ to select "Manually select features", then press Enter

 3. Select the configuration items you need

Select the item you want to configure by ↑ ↓ arrows, press the space bar is selected, press a whole is selected, press i is anti-choice. Each specific configuration item What does it mean there will be explained below.

 

 

Copy the code
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> () Babel // transcoder, code can be converted for ES6 ES5 code to the existing execution environment. 
() TypeScript // TypeScript is a JavaScript (suffix .js) superset (suffix .ts) includes and extends the syntax of JavaScript, JavaScript needs to be compiled output to run in the browser
() Progressive Web App (PWA) Support // Progressive Web Applications
() Router // vue-router (vue routing)
() Vuex // vuex (vue of state management)
() CSS Pre-processors // CSS preprocessor (eg: less, sass)
() Linter / Formatter // check code style and format (eg: ESlint)
() Unit Testing // test unit (unit tests)
() E2E Testing // e2e (end to end) test
Copy the code

 

After finished selecting press Enter. Select each packet corresponding to a specific function. You choose good, no good, they chose to use the wide, ha ha, easy to consult others.

 

3.1 choose whether to use history router

 

 Vue-Router using its own hash browser history modes and features to achieve distal routing mode (by calling the interface provides a browser).

  • I am here to recommend the election n. Such packaging thrown out on the server can be used directly, to use the words of the late, you can own to open up.
  • Choose yes, then the server side need to set it again.

    Use history mode for router? (Requires proper server setup for index fallback in production)

 

3.2 Preprocessor select css

I chose Sass / Scss (with dart-sass) 

node-sass is automatically compiled in real time, the dart-sass need to save to take effect. sass main characteristics of the latest official push dart-sass will first be implemented in the above. (The answer reference http://www.imooc.com/qadetail/318730 )

 

3.3 Code validation rules selected Eslint

Providing a plug of javascript code detection tools, ESLint + Prettier // use more

 

3.4 choose when to detect code rule

() Lint on save // ​​save on detection
() Lint and fix on commit // fix and commit time to check

It is recommended to choose Save detected until commit time, the problem may have accumulated a lot.

 

3.5 Test selection unit

 

> Mocha + Chai // mocha flexible, providing only a simple test structure, if need other functions need to add additional libraries / plug-in is complete. You must be installed in the global environment
Jest // installation configuration is simple, easy to use. Built-in Istanbul, you can view the test coverage, compared to the Mocha: simple configuration, test code is simple and easy to integrate and babel, built-in rich expect

 

3.6 How to select the storage configuration

> In dedicated config files // separate file placement
  An In package.json // release package.json ri

If it is selected independently file placement, as few items will separate file shown in FIG.

 

3.7 whether to save the current configuration

Type N is not recorded, if you type Y need to enter the name of preservation, as I saved in step 2 to see the name of test.

 

4. Wait create project

 

5. Run it gives, can directly access the

Here we had to build a project completed friends ~ ~

Have questions please leave a message ~ ~

Before building the project, make sure you have a good node vue cli installed, npm,. The installation can not refer to the following link to install.

How to install node?

Installed by default node npm already installed, so no separate installation.

How to install vue cli?

Theater has been to build a good environment and start acting!

1. Go to a directory, create a project

 

 The corresponding command:

vue create project-one

 

2. Here we select manual configuration

Press ↓ to select "Manually select features", then press Enter

 3. Select the configuration items you need

Select the item you want to configure by ↑ ↓ arrows, press the space bar is selected, press a whole is selected, press i is anti-choice. Each specific configuration item What does it mean there will be explained below.

 

 

Copy the code
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> () Babel // transcoder, code can be converted for ES6 ES5 code to the existing execution environment. 
() TypeScript // TypeScript is a JavaScript (suffix .js) superset (suffix .ts) includes and extends the syntax of JavaScript, JavaScript needs to be compiled output to run in the browser
() Progressive Web App (PWA) Support // Progressive Web Applications
() Router // vue-router (vue routing)
() Vuex // vuex (vue of state management)
() CSS Pre-processors // CSS preprocessor (eg: less, sass)
() Linter / Formatter // check code style and format (eg: ESlint)
() Unit Testing // test unit (unit tests)
() E2E Testing // e2e (end to end) test
Copy the code

 

After finished selecting press Enter. Select each packet corresponding to a specific function. You choose good, no good, they chose to use the wide, ha ha, easy to consult others.

 

3.1 choose whether to use history router

 

 Vue-Router using its own hash browser history modes and features to achieve distal routing mode (by calling the interface provides a browser).

  • I am here to recommend the election n. Such packaging thrown out on the server can be used directly, to use the words of the late, you can own to open up.
  • Choose yes, then the server side need to set it again.

    Use history mode for router? (Requires proper server setup for index fallback in production)

 

3.2 Preprocessor select css

I chose Sass / Scss (with dart-sass) 

node-sass is automatically compiled in real time, the dart-sass need to save to take effect. sass main characteristics of the latest official push dart-sass will first be implemented in the above. (The answer reference http://www.imooc.com/qadetail/318730 )

 

3.3 Code validation rules selected Eslint

Providing a plug of javascript code detection tools, ESLint + Prettier // use more

 

3.4 choose when to detect code rule

() Lint on save // ​​save on detection
() Lint and fix on commit // fix and commit time to check

It is recommended to choose Save detected until commit time, the problem may have accumulated a lot.

 

3.5 Test selection unit

 

> Mocha + Chai // mocha flexible, providing only a simple test structure, if need other functions need to add additional libraries / plug-in is complete. You must be installed in the global environment
Jest // installation configuration is simple, easy to use. Built-in Istanbul, you can view the test coverage, compared to the Mocha: simple configuration, test code is simple and easy to integrate and babel, built-in rich expect

 

3.6 How to select the storage configuration

> In dedicated config files // separate file placement
  An In package.json // release package.json ri

If it is selected independently file placement, as few items will separate file shown in FIG.

 

3.7 whether to save the current configuration

Type N is not recorded, if you type Y need to enter the name of preservation, as I saved in step 2 to see the name of test.

 

4. Wait create project

 

5. Run it gives, can directly access the

Here we had to build a project completed friends ~ ~

Have questions please leave a message ~ ~

Guess you like

Origin www.cnblogs.com/tzwbk/p/12486404.html