创建Vue3项目

项目结构

vue3-ts-cms
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  ├─ main.ts
│  ├─ shims-vue.d.ts
├─ tsconfig.json

进入项目创建界面

打开命令窗口，进入到指定的文件目录下，输入命令进入创建Vue项目界面。

vue create 项目名称

选择手动创建

选择Manually select features（手动选择特性）

选择所需特性

• 手动配置 Router 和 Vuex

进入选择特性界面，这里不选择自动集成 Router 和 Vuex ，后面进行手动配置（也可以选择自动集成）。

特性	说明
Choose Vue version	选择Vue的版本
Babel	对代码进行转化
TypeScript	支持TypeScript
Progressive Web App (PWA) Support	对webapp支持
Router	路由
Vuex	对状态进行管理
CSS Pre-processors	CSS预处理器
Linter / Formatter	代码格式化
Unit Testing	测试
E2E Testing	测试

设置选择的特性

进入设置特性界面

• 手动配置 Router 和 Vuex

• 自动配置 Router 和 Vuex
  

1、选择3.x作为Vue的版本

Choose a version of Vue.js that you want to start the project with 3.x

2、不选择class风格的装饰器

Use class-style component syntax? No

3、推荐使用 Babel 来编译 TypeScript，因为在某些情况下会给你的代码添加一些 polyfill

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

4、是否使用history模式的路由

Use history mode for router? (Requires proper server setup for index fallback in production) Yes

5、选择 Less 作为预处理器

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less

6、选择 ESLint 和 Prettier来处理代码格式化

Pick a linter / formatter config: Prettier

7、选择保存的时，进行代码格式化操作

Pick additional lint features: Lint on save

8、选择配置信息生成到单独的文件

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

9、询问是否把上面的选项保存成预设，方便下次创建项目（看个人意愿）

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

完成上面选项后只要等待项目创建完成即可。
ps:最好用管理员权限打开命令窗口，防止权限问题导致创建项目失败