vue-cli使用ts创建项目

使用命令 vue create project_name
注意：vue create 是vue3的命令，注意更新

我们选择manually select featuers手动选择

选择下面的属性，为了测试，我全部都给选择上

如上去选择你需要的配置。

中文翻译摘录自：vue-cli3构建ts项目

TypeScript：

是否使用class风格的组件语法：Use class-style component syntax?
是否使用babel做转义：Use Babel alongside TypeScript for auto-detected
polyfills?
Router:

1. 是否使用history模式：Use history mode for router?

CSS Pre-processors：

1. 选择CSS 预处理类型：Pick a CSS pre-processor

Linter / Formatter

1. 选择Linter / Formatter规范类型：Pick a linter / formatter config
2. 选择lint方式，保存时检查/提交时检查：Pick additional lint features

Testing

1. 选择Unit测试方式
2. 选择E2E测试方式

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

vue3生成脚手架目录说明

│  .browserslistrc
│  .gitignore
│  .postcssrc.js // postcss 配置
│  babel.config.js
│  package.json // 依赖
│  README.md // 项目 readme
│  tsconfig.json // ts 配置
│  tslint.json // tslint 配置
│  vue.config.js // webpack 配置（~自己新建~）
│  yarn.lock
│  
├─public // 静态页面
│  │—favicon.ico
│  │—index.html
│ 
├─src // 主目录
│  ├─assets // 静态资源
│  │      logo.png
│  │  
│  ├─components
│  │      HelloWorld.vue
│  │ 
│  │─views // 页面
│  │      About.vue
│  │      Home.vue
│  │ 
│  │  App.vue // 页面主入口
│  │ 
│  │  main.ts // 脚本主入口
│  │ 
│  ├─router // 路由配置
│  │      index.ts
│  │  
│  │  registerServiceWorker.ts // PWA 配置
│  │ 
│  │  shims-tsx.d.ts
│  │  shims-vue.d.ts
│  │         
│  │  
│  ├─store // vuex 配置
│  │      index.ts
│  │      
│  ├─typings // 全局注入（~自己新建~）
│  │  
│  ├─utils // 工具方法(axios封装，全局方法等)（~自己新建~）
│  
│          
└─tests // 测试用例
    ├─e2e
    │  ├─plugins
    │  │      index.js
    │  │      
    │  ├─specs
    │  │      test.js
    │  │      
    │  └─support
    │          commands.js
    │          index.js
    │          
    └─unit
            HelloWorld.spec.ts