Vue3入门系列（一）创建项目

如发现文章中有什么问题或者遗漏的地方，请在评论中指出，谢谢！

环境准备

Vue依赖NodeJs的环境，需要先安装Nodejs。

NodeJs安装

1. 打开NodeJs下载页
2. 选择自己系统对应的版本下载。
   

比如我的电脑是64位的Windows10系统，就选择红框中的版本进行下载，安装过程略，一直下一步就行了，注意选择安装位置。
3. 验证安装
在cmd命令行中输入 node -v，如果输出版本号则代表安装成功
4. npm自带的源是国外的地址，如果部分打不开或嫌速度慢可百度设置淘宝镜像。
5. 设置node全局依赖缓存路径

# 全局依赖目录
npm config set prefix "D:\install\NodeJs\node_global"
# 缓存目录
npm config set cache "D:\install\NodeJs\node_cache"

自行更改为自己的目录

使用npm包管理器

安装@vue/cli工具

在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。
打开cmd使用命令全局安装@vue/cli

npm install -g @vue/cli

安装完成之后在cmd中输入命令验证安装

vue -V

如果显示：‘vue’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。则打开上边配置的全局依赖目录(我配置的目录是D:\install\NodeJs\node_global)，查看下边是否有vue.cmd文件

将该目录配置进电脑的环境变量中，复制路径，在桌面上右键此电脑—>>选择属性—>>打开高级系统设置—>>点击环境变量—>>在系统变量中找到Path,双击打开，点击新建，粘贴刚才复制的路径，点击确定，再次确认。win+r打开cmd重新输入命令即可看到效果

创建项目

使用命令创建项目

vue create project-name

选择镜像源(可能在选择后不会再出现)

命令中的project-name是项目名字,可以自定义，其它的就是固定写法
回车后新版的会提示默认源网速较慢，是否使用淘宝镜像(够人性化)

键入Y之后回车

选择preset

你会被提示选取一个 preset(如上图)。

1. 包含babel+eslint的vue2版本；
2. 包含babel+eslint的vue3版本；
3. 自己手动选择。
   既然本文是vue3，那就可以选择第二个或者第三个，这里我选择下第三个，跟大家大概说一下第三个的流程。
   上下键选择，回车是确认

手动选择依赖

1. 选择vue版本，让它默认选中就好；
2. babel，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言；
3. TypeScript，选择之后可以让项目支持TypeScript, TypeScript提供静态类型检查；
4. PWA支持，严格说来不是一个产品，而是一种理念，或者叫打包产品，因为他是把众多能让WEB产品APP化的能力的一个集合；
5. Router–路由，官方的路由管理器，它和 Vue.js 的核心深度集成；
6. Vuex， 是一个专为 Vue.js 应用程序开发的状态管理模式，集中管理状态;
7. CSS 预处理器，一种具有编程逻辑的css语言;
8. Linter/Formatter，代码检查，格式检查;
9. unit Testing，项目单元测试;
10. E2E Testing，E2E自动化测试。
    根据自己的需要进行选择，选完依赖之后回车确认选择，之后提示选择vue版本。
    空格键选中，上下键进行切换，a键全选，i键反选

选择vue版本

这里选择3.x版本，回车确认选择。

选择linter/formatter配置：

1. 只配置使用 ESLint 官网的推荐规则(只进行报错提醒)
2. 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置(不严谨模式)
3. 使用 ESLint 官网推荐的规则 + Standard 第三方的配置(正常模式)
4. 使用 ESLint 官网推荐的规则 + Prettier 第三方的配置(严谨模式)
   这里根据个人偏好选择。

选择在什么时候检测

这里是选择检测时机

1. 保存时检测
2. 提交代码时检测
   一般选择保存的时候检测
   

选择配置文件位置(babel,eslint等的配置文件)

1. 生成各自独立的配置文件
2. 生成在package.json中
   
   建议生成各自的配置文件

询问是否生成预设模板

y生成模板，n不生成，根据个人偏好选择，我这里就直接略过了。

等待项目初始化完成

这里是在生成项目并根初始化下载选择的依赖

项目初始化完成截图

根据命令提示依次进入项目文件夹、启动项目

# 进入项目文件夹
cd project-name
# 启动项目
npm run serve

项目启动成功截图

访问给出的地址

至此，以npm的方式创建项目完毕。

使用Vite

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

检查npm的版本

打开cmd输入npm -v,查看npm的具体版本。

根据版本执行不同的命令创建项目

# npm 6.x版本命令
npm init vite@latest vite-project-name --template vue
# npm 7.x版本命令 需要加上额外的双短横线
npm init vite@latest vite-project-name -- --template vue

命令中vite-project-name是项目的名字，template vue是在指定vite项目的模板，这里使用vue的模板

执行命令

在cmd中输入对应版本的命令，之后会提示先安装vite，然后创建项目，键入y之后回车，如下图所示。

这里跟@vue/cli创建项目有所不同的是先生成项目配置文件，之后手动下载依赖。
所以先进入项目文件夹，然后输入命令npm install下载依赖，依赖下载完毕才能启动项目。
依次执行上述截图中给出的命令。

进入项目，下载依赖，启动项目

访问项目

项目启动成功后访问给出的地址

至此，使用vite创建项目成功。

参考文档

Vue官网文档
VueCli官网文档
vue-cli3新建项目时babel到底是个什么玩意?
vue脚手架创建项目时的 linter / formatter 配置选择

参考文档可能会有漏写的，如有发现请在评论中指正，谢谢！