1. Create an empty vue project and step analysis

1. Create an empty vue project

The environment required by vue:

1. Node.js : Javascript runtime environment
2. npm: package management tool (installed with Node.js)
3. vue.js : official command line tool    npm install vue -g 
4. vue-cli: vue scaffolding npm install -g 
5. wepack: packaging tool for packaging projects    npm install webpack -g
6. npm package management tool: used to manage
7. Vue development tools, generally I like to use Visual Studio Code

2. Create a vue command

        Create a vue project named test in the e:/test/demo directory

(1) Click Start--Input cmd--Enter the command line window

(2) Command:

【1】e: switch to e drive

【2】cd path, locate it under the path For example, cd test/demo means locate the demo folder under the test folder

[3] vue create project name, for example, if you want to create a project named test, enter vue create test—— Please pick a preset  (choose the default configuration or manual configuration)

(1) Select the default configuration (relatively simple) - the default will be ok later

Finally, this is successful, and the test folder will be generated in the e:test/demo directory, which is an empty vue template

 (2) Select manual configuration:

Step 1 : Select the default configuration or manual configuration, choose manual configuration here

 Step 2: Check the features needed for your project      Vue's configuration options (press the up and down keys to move to the item you want to select, press the space bar to select it, * means  to select or cancel, after the selection, press the Enter key to enter step), here I have chosen

Choose Vue version          Vue version selection, I only installed vue2.0, so I don’t have this option here Is
Babel           compatible with low-version browsers, compile ES6 into ES5
TypeScript        is mainly js type check
Progressive Web App (PWA) Support       whether it supports progressive Whether      to configure routing for web application 
Router Whether to configure state management mode
for Vuex          (equivalent to local storage) Whether to configure
CSS Pre-processors     Whether to configure CSS preprocessor
Linter/Formatter        code inspection tool, formatter specification selection
Unit Testing      Whether to create unit tests, development During the process, the front end performs self-running tests on the code. Whether
E2E Testing         creates an end-to-end test

Step 3: Select use class-style component syntax   , whether to use the Class style decorator, here I choose not to use, enter N

the difference:

Without decorators : After app= new Vue()creating a vue instance
and using decorators :class app extends Vue{}

Step 4: Use Babel alongside TypeScript for auto-detected polyfills?  Use Babel with TypeScript for auto-detected polyfills? Select Yes here and enter Y

Step 5: Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)   Whether to use history mode for the router, that is, whether to use history mode or hash mode. Generally choose not to use, N

The difference between hash and history:

        hash

        Hash mode, after the url, there will be #, changing the hash, the page will not be refreshed, the entire page will not be changed, only the content of the routing configuration behind # will be changed, format: url#hash, such as http: http://localhost : 9011/#/chain/info/steps

        Hash principle: Find the corresponding routing rules by listening to the browser's onhashchange() event change

        history

        History mode: there is no # after the url, it looks more beautiful, the format: http://localhost:9011/chain/info/steps, the disadvantage is that (1) if the chain/info/steps route cannot be found, Error 404 will be reported, so you need to set the situation if no resource is matched, (2) each refresh will re-request the entire URL from the backend, that is, re-request the server

        History principle: Use two new APIs pushState() and replaceState() in H5's history and an event onpopstate to monitor URL changes

Step 6: Pick a CSS pre-processor?   Choose a css pre-processor, I choose the second one here

Step 7: Pick a linter / formatter config?   Choose a code formatting detection tool, here I choose the first
        TSLint : ts format inspection tool
        ESLint with error prevention only : ESLint will only remind you of errors
        ESLint + Airbnb config : ESLint Airbnb Standard
        ESLint + Standard config : ESLint Standard Standard
        ESLint + Prettier : ESLint (code quality inspection) + Prettier (code formatting tool)

Step 8: Pick additional lint features?  Code inspection method: check when saving or check when submitting; I choose, check when saving, I choose the first one

Step 9: Pick a unite testing solution   choose which unit testing solution to choose, here I choose the first one

          Mocha + Chai : only provide a simple test structure, if you need other functions, you need to add other libraries/plugins to complete

         Jest : is a testing framework developed by Facebook and is the most full-featured test runner

Step 10: Pick an E2E testing solution   , select the unit testing solution, and Mocha + chaiwe will also choose the first item when it is commonly used the most.

Step 11: Where do you prefer placing config for Babel, ESLint, etc.?   Select the type of end-to-end test, press Enter by default

 

Step 12: Save this as a preset for future projects  , whether to save it as a preset for future projects. Choose y here, and then enter the name to store the current configuration item, such as nameA, and then it will be created and prompted to  npm run serve start the service:

Creating page:

Created: