学习多了自然就迷糊了，不学习那注定迷糊。

一、终端创建

1  安装脚手架

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

2 检查版本  Vue CLI v4.5.7

vue -V

3 搭建项目

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                          //手动选择(自定义)的意思

这时候我们选择第三项手动选择。选择的时候按回车就可以实现。(如果这时候你没有上面的三个选项，说明的 vue-cli 是旧版本，需要你更新。)

? 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测试

选择TypeScript的选项，然后再按回车进入下一层选择

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

这里要选择 3.x 的版本，点击回车，

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

是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

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

然后会出现ESLint的一些配置,这里我们选择第一项，默认就好 回车后会让你选择增加lint的特性功能。

? 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（修理），这项我们不进行选择

回车后让你选择这些配置文件时单独存放，还是直接存放在package.json文件里。这里选择放在单独的文件里。

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

最后一个问题，是问你需不需要把这些配置保存下来，下次好直接进行使用。我这里选择不用(n)。淡然你可以自行选择

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

静静得等待即可-------出现下面的信息，说明我们已经安装完成了。

Done in 10.33s.


 $ cd vue3
 $ npm run serve

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

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

把地址放到浏览器的地址栏，看到下面的页面，说明安装ok了。

二、通过 vue ui 图形界面搭建vue3环境

1.如果你安装了最新的vue-cli 可以输入vue ui这个命令 然后终端会出现

�  Starting GUI...
�  Ready on http://localhost:8000
Auto cleaned 1 projects (folder not found).

2.把http://localhost:8000地址拷贝到浏览器地址栏中，就会出现下面的界面。

 

3.点击创建，输入项目名称和包得管理器 我这是项目是 vue3   包装管理器默认的我是npm   点击下一步 

、

4.选择手动，点击下一步

5.选择typescript，其余的看个人需要进行选取。

6.选择vue3.0  eslint选择第一个 然后点击创建项目

7.点击不保存预设。

 

8.这时候再回到 VSCode 的终端中，进入项目cd vue3 然后启动服务npm serve,等到服务启动后在浏览器地址栏输入http://localhost:8080/，就可以看到下面的界面了。

 

这就简单得搭建好了一个项目  下一步学习基本用法