Use the command vue create project_name
Note: vue create is a vue3 command, pay attention to update
We choose manually select featuers
Select the attributes below, for testing, I will select all of them
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:
- Whether to use history mode: Use history mode for router?
CSS Pre-processors:
- Select the type of CSS pre-processor: Pick a CSS pre-processor
Linter / Formatter
- Select Linter / Formatter specification type: Pick a linter / formatter config
- Choose the lint method, check when saving/check when submitting: Pick additional lint features
Testing
- Choose Unit test method
- 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