Catalog

  • 1. Go into a directory , Create project
  • 2. We choose manual configuration here
  • 3. Select the configuration you need
    • 3.1 Choose whether to use history router
    • 3.2 choice css The preprocessor
    • 3.3 choice Eslint Code validation rules
    • 3.4 Choose when to do code rule detection
    • 3.5 Choose unit tests
    • 3.6 Choose how to store the configuration
  • 3.7 Whether to save the current configuration
  • 4. Waiting for project to be created
  • 5. Execute the command it gives , You can go directly to


Before building the project , Please make sure you have installed node, npm, vue cli. Not installed can refer to the following link to install .


How to install node?

Install well node It is installed by default npm 了 , So you don't have to install it separately .

How to install vue cli?

The theater environment has been set up , Start acting !

1. Go into a directory , Create project

 Insert picture description here
Corresponding command :
vue create project-one

2. We choose manual configuration here

Press ↓ choice “Manually select features”, Press again Enter
 Insert picture description here

3. Select the configuration you need

adopt ↑ ↓ Arrow to select the item you want to configure , Press Space It's a check , Press a It's all... All , Press i It's a negative election . The specific meaning of each configuration item will be explained below .
 Insert picture description here
 Insert picture description here
 Insert picture description here
 Insert picture description here

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel // Transcoder , Can be ES6 The code changes to ES5 Code , In order to execute... In the existing environment . 
( ) TypeScript// TypeScript It's a JavaScript( suffix .js) Superset ( suffix .ts) Includes and extends  JavaScript  The grammar of , Need to be compiled to output  JavaScript Run in browser
( ) Progressive Web App (PWA) Support//  Progressive type Web Applications
( ) Router // vue-router(vue route )
( ) Vuex // vuex(vue State management mode )
( ) CSS Pre-processors // CSS  The preprocessor ( Such as :less、sass)
( ) Linter / Formatter //  Code style checking and formatting ( Such as :ESlint)
( ) Unit Testing //  unit testing (unit tests)
( ) E2E Testing // e2e(end to end)  test 

 Insert picture description here
When you're done, press Enter. Select the specific package of each corresponding function . Choose what you are good at , No one is good at , Choose the one that is widely used , ha-ha , It's convenient to consult others .

3.1 Choose whether to use history router

 Insert picture description here
Vue-Router Using the browser's own hash Patterns and history Pattern to achieve front-end routing ( By calling the interface provided by the browser ).

I suggest to choose n. In this way, it can be used directly after being packed and thrown on the server , Later to use words , You can drive it again by yourself .
choose yes You need to set it on the server side .
Use history mode for router? (Requires proper server setup for index fallback in production)

3.2 choice css The preprocessor

 Insert picture description here
I chose Sass/Scss(with dart-sass)

node-sass It's auto compiled, real-time ,dart-sass It needs to be saved before it takes effect .sass At present, the government mainly promotes dart-sass The latest features will be implemented on this first .( The answer refers to http://www.imooc.com/qadetail/318730)

3.3 choice Eslint Code validation rules

Provide a plug-in javascript Code detection tools ,ESLint + Prettier // More use
 Insert picture description here

3.4 Choose when to do code rule detection

 Insert picture description here

( ) Lint on save //  Save and test
( ) Lint and fix on commit // fix and commit Time to check 

It is recommended to select Save to detect , wait until commit When , Problems may have accumulated a lot .

3.5 Choose unit tests

 Insert picture description here

> Mocha + Chai //mocha flexible , Only a simple test structure , If you need other functions, you need to add other libraries / Plug in complete . You must install... In a global environment
Jest // Simple installation and configuration , Easy to use . built-in Istanbul, You can see the test coverage , Compare with Mocha: Simple configuration 、 Test code is simple 、 Easy and babel Integrate 、 Built in rich expect

3.6 Choose how to store the configuration

 Insert picture description here

> In dedicated config files //  Independent file placement
  In package.json //  discharge package.json in 

If it's a choice Independent file placement , The project will have several separate files as shown in the figure below .
 Insert picture description here

3.7 Whether to save the current configuration

 Insert picture description here
type N Don't record , If you type Y You need to enter a save name , As the first 2 The name I saved in this step is test.

4. Waiting for project to be created

 Insert picture description here

5. Execute the command it gives , You can go directly to

 Insert picture description here