vue-cli使用ts创建项目

素颜马尾好姑娘i 2023-07-25 09:41 61阅读 0赞

使用命令 vue create project\_name  
注意：vue create 是vue3的命令，注意更新

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

我们选择manually select featuers手动选择

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

选择下面的属性，为了测试，我全部都给选择上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

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

中文翻译摘录自：[vue-cli3构建ts项目][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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20230528/b2eb4e44e28149f7a22a1dbcd8876840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/69c07b12791043cd83c865116e2b4c80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/f1347af8dc504990b3bfa7f65e489b5f.png
[vue-cli3_ts]: https://www.cnblogs.com/gxp69/p/11302095.html