Vue Cli 3 early experience (overall Detailed)

vue new out of vue cli 3, and directly renamed @ vue / cli, came disk him today.

First introductions verbose is not written, and posted a link bar.

• Vue CLi3 github
• View web CLi

If want to understand the difference at Vue Cli new features and 3 and 2, I can look at this:

Difference Vue Cli 3 and 2 new features

---

installation

First, find a place to create a new folder

Second, use cmd into the folder (preferably with cmd here, do not use git bash, or else a lot of trouble after the selection)

Third, the global Install Vue Cli 3

npm install -g @vue/cli
// OR
yarn global add @vue/cli

Four, check the version

vue --version

Fifth, create a project (multi-map warning)

vue create hello-world

Let me talk about my vue version is 3.8.4.

• First it will pop up if need taobao mirror, I chose n

• Then the following interface will pop up:
  
  There are two choices here:
• default (babel, eslint) default package, providing babel and eslint support.

• Manually select features to choose their own functions needed to provide more features to choose from. For example, if you want to support TypeScript, you should choose this one.

Down arrow keys can be used to switch the option. If you only need babel and eslint support, then select the first item, get away, quietly waiting for initialization vue project.

• If you want more support, they select the second item: Switch to the second item, press enter to select menu, the following interface:
  

  vue-cli built supports eight features, multiple choice: Use the arrow keys to switch between the characteristic options, using the space bar to select the current characteristics, using a key to switch to select all, an i-key rollover option.

For each function, here to be a simple description:

• Babel babel do support the use of escape.
• TypeScript support the use of TypeScript writing source code.
• Progressive Web App (PWA) PWA Support 支持.
• Router supports vue-router.
• Vuex support vuex.
• CSS Pre-processors support CSS preprocessor.
• Linter / Formatter support code style checking and formatting.
• Unit Testing support unit testing.
• E2E Testing supports E2E testing.

So based on the development of common projects, taking into account the robustness of the project in principle, support this choice the following features:

• First of Babel mandatory conversion ES6 grammar.
• TypeScript and PWA me less than it is not selected.
• Router Required sense.
• Vuex can later be used together, can also be directly elected
• CSS Pre-processors substantially Required bar (LESS / SASS / Stylus)
• Good Linter / Formatter style guide is a must, the basic mandatory.
• Unit Testing and E2E Testing here so I do not choose less than.

• Press enter to confirm the selected option, the next step:

The next step is to select the details:

1. whether the router history mode selected where n, using hash mode

2. Select a language pre-css, I chose LESS (forgot the screenshot)

3. Select linter configuration I chose the third ESLint + Standard config

• ESLint with error prevention only-- only detect errors.
• ESLint + Airbnb config-- unicorn's Airbnb, someone commented, "This is a most reasonable JavaScript coding standard", which covers almost all aspects of JavaScript.
• ESLint + Standard config - standardJs a powerful JavaScript coding standard, comes linter and automatic code correction. No configuration. Automatic formatting code. Regulatory issues can be found at an early stage and low-level coding error.
• ESLint Prettier-- Prettier as code formatting tools that can unify the entire team coding style.

4. Select the check time, I choose the first

• Save time check
• When submitting a check

5. Next ask here is how to store babel, postcss, eslint and other configuration files, I choose the first one, separate storage

• Separate storage
• Integrated in package.json

6. asked to save the current configuration, I selected the n-

7. Select a package manager to install, this see their own preferences, and I choose yarn

if there will be a selection unit configured to select the test unit testing, generally Mocha + Chai

Sixth, configured, start the installation

Here he will direct the node_modules directly installed.

Seven, installation, enter the project, run the command to start the service

cd hello-world
npm run serve
// OR
yarn serve

Eight, while using Vue Cli2

Vue CLI> = 3 and using the same legacy vue command, so Vue CLI 2 (vue-cli) is covered. If you still need to use the old version of vue init function, you can install a global bridging tool:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project

---

That help small partners upper right corner a praise ~

I feel a small partner to help point a praise ~