一、搭建Vue3开发环境
Vue-cli ：Vue.js 开发的标准工具 ，官方项目创建工具
vue-cli, 新版的vue-cli还提供了图形界面，如果你对命令行陌生，也可以使用图形界面。 安装命令：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
建议使用npm进行安装，yarn安装后，不能使用vue命令。
1、vue-cli命令行创建项目
创建项目命令：
vue create vue3-test
回车后到：
? 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 //手动选择(自定义)的意思
要使用TypeScript进行开发 Vue3 的代码，选择第三项手动选择，回车到：
? 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测试
回车到：
? 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 class-style component syntax? (Y/n) y
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
? 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（修理），这项我们不进行选择
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
//配置文件时单独存放，还是直接存放在`package.json`文件里。这里选择放在单独的文件里。
Save this as a preset for future projects? (y/N) n
//是否需要把这些配置保存下来，下次创建项目时进行使用
回车开始创建项目：
Done in 10.33s.
$ cd vue3-1
$ npm run serve
项目创建成功
2、vue-cli图形界面创建项目
安装了最新版的Vue-cli就可以使用 vue ui这个命令，开启一个 UI 界面,然后会出现下面的提示。
Starting GUI.
Ready on http://localhost:8000
这时会自动跳转到浏览器，如果没有跳转，只需要浏览器访问http://localhost:8000即可：
然后创建新项目即可：
创建流程和配置选择与命令创建项目相同，只是改成了图形化的模式。
二、Vue3开发环境项目结构
1、目录结构
|-node_modules -- 所有的项目依赖包都放在这个目录下
|-public -- 公共文件夹
---|favicon.ico -- 网站的显示图标
---|index.html -- 入口的html文件
|-src -- 源文件目录，编写的代码基本都在这个目录下
---|assets -- 放置静态文件的目录，比如logo.pn就放在这里
---|components -- Vue的组件文件，自定义的组件都会放到这
---|App.vue -- 根组件，这个在Vue2中也有
---|main.ts -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js -- Eslint的配置文件，不用作过多介绍
|-.gitignore -- 用来配置那些文件不归git管理
|-package.json -- 命令配置和包管理文件
|-README.md -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json -- 关于TypoScript的配置文件
|-yarn.lock -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中
2、package.json
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
}
这三个命令的意思是：
- serve : 在开发时用于查看效果的命令，视频中演示看一下效果
- build : 打包打码，一般用于生产环境中使用
- lint : 检查代码中的编写规范
package.json中另外两个比较重要的配置项dependencies和devDependencies。这两个都是用来记录安装包信息的，但如果要想完全搞清楚他们的区别，你先要弄清楚什么是开发环境和生产环境。
- 开发环境： 作为一个程序员，每天作的事情都是在开发环境中，编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
- 生产环境：就是代码已经上线，放到了正式的服务器上，公司开始运营去赚钱的代码。
明白了这两个概念后，dependencies下的包是生产环境中必须用到的，当然开发环境也需要。devDependencies是只有开发环境中使用的，上线后这些包就没用了，打包后也不会打包进去的代码。
学习日期：2022/1/10
视频参考：www.bilibili.com/video/BV1L5…
仅供个人学习和记录
