Vue3-cli创建项目

前言

开发环境

创建项目

vue create 项目名（必须是小写)

自定义项目配置文件

这里我们选择 manually select features(手动选择功能)，然后回车。

项目名必须小写，否则会报错。
name can no longger contain capital letters(名称不能包含大写字母)

选自己需要的配置

按上下键，然后按空格键选中需要的选项，最后按回车键进入下一步。

( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式，Vue3 不建议使用）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

选择Vue版本

根据自己项目需要 选择 Vue 2.x 或者3.x 。本文以3.x 为例。

类样式组件选择

use class-style component syntax
是否使用类样式组件语法，我这里选择N（不使用）。

沿用TypeScript使用Babel

Use Babel alongside TypeScript

是否沿用TypeScript使用Babel，我这里选择 Y（是）。

路由选择

是否使用history路由模式(不带#号的)，输入 N。

css 模式选择

选择css 模式，我们选择 dart-sass
css 预处理器，node-sass是自动编译实时的，dart-sass需要保存后才会生效。

代码验证模式

代码验证模式，我们选择 ESLint with error prevention only。(也可选择其他的，比如 ESLint + Prettier)

热更新模式

热更新模式，选 Lint on save 保存的时候就热更新

配置文件存放

配置文件存放，我这里选择 package.json
配置文件存放在单独的文件里 选 In dedicated config files

保存创建的选项

Save this as a preset for future projects?（）
是否保存创建的选项，保存的话，下次创建也会按这个选择来创建，我选择 N 不保存

选择管理安装依赖

选择用什么管理器来管理安装依赖。由于我这里安装了 YARN 和 PNPM ，所以会多出来两个选择。默认是NPM。
我这里选择YARN 。

安装 YARN

npm install yarn -g

安装PNPM

npm install -g pnpm

项目Demo下载

等待项目创建完成即可。出现红框中的命令就代表项目创建完成了。
由于之前选择的依赖管理器不一样，红框中的启动命令会不一样。

等待项目下载完成

启动项目

执行红框中的命令，启动项目。

查看项目Demo主页

在浏览器中打开访问地址，即可查看项目的主页。

至此，Vue3 + TypeScript 项目创建完成。