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