Vue3.0 start to quickly build a project (1)

If you study too much, you will be confused. If you don't study, you will be confused.

1 Install scaffolding

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

2 Check the version Vue CLI v4.5.7

vue -V

3 Build the project

vue create vue3.0

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

At this time, we choose the third option manually. It can be realized by pressing enter when selecting. (If you do not have the above three options at this time, the vue-cli described is an old version and you need to update it.)

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

Select TypeScriptthe option, and then press enter to enter the next level of selection

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

Here to select the 3.x version, click enter,

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Whether to compile JSX in the form of TypeScriptand Babel. Here we also choosen

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

Then there will be ESLintsome configurations, here we choose the first item, the default is just fine. After pressing Enter, you will be able to choose the added lintfeatures.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix（修理），这项我们不进行选择

After pressing Enter, you can choose whether to store these configuration files separately or directly in the package.jsonfile. The choice here is placed in a separate file.

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

The last question is whether you need to save these configurations and use them directly next time. I choose not to use (n) here. Indifferently you can choose by yourself

Save this as a preset for future projects? (y/N)

Just wait quietly ------- the following message appears, indicating that we have completed the installation.

Done in 10.33s.


 $ cd vue3
 $ npm run serve

Enter cd vue3the project on the command line as prompted , and then enter to npm run serveopen the project preview. At this time, two addresses will be given, both of which can access the current project.

根据提示在命令行输入cd vue3-1进入项目，然后再输入yarn serve开启项目预览。这时候就会给出两个地址，都可以访问到现在的项目.

Put the address in the address bar of the browser and see the following page, indicating that the installation is ok.

This is as simple as setting up a project, the next step is to learn the basic usage

Vue3.0 start to quickly build a project (1)

Guess you like