Vue-cli uses ts to create projects

Use the command vue create project_name
Note: vue create is a vue3 command, pay attention to update

Insert picture description here

We choose manually select featuers

Insert picture description here

Select the attributes below, for testing, I will select all of them
Insert picture description here

Choose the configuration you need as above.

Chinese translation excerpted from: vue-cli3 build ts project

TypeScript:

Whether to use class-style component syntax: Use class-style component syntax?
Whether to use babel for escaping: Use Babel alongside TypeScript for auto-detected
polyfills?
Router:

  1. Whether to use history mode: Use history mode for router?

CSS Pre-processors:

  1. Select the type of CSS pre-processor: Pick a CSS pre-processor

Linter / Formatter

  1. Select Linter / Formatter specification type: Pick a linter / formatter config
  2. Choose the lint method, check when saving/check when submitting: Pick additional lint features

Testing

  1. Choose Unit test method
  2. Choose E2E test method

Choose the storage location for custom configurations such as Babel, PostCSS, ESLint, etc. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Vue3 generates scaffolding catalog description

.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

Guess you like

Origin blog.csdn.net/lb1135909273/article/details/105509010