当前位置: 首页 > article >正文

Vue CLI 脚手架创建项目流程详解 (2)

更新 CLI 脚手架

确保你安装的是最新版本的 Vue CLI,以支持最新的特性及改进。你可以通过以下命令全局安装或更新 Vue CLI:

npm install -g @vue/cli

创建 Vue 3.x 项目

  1. 启动创建向导

    使用 vue create 命令来开始创建一个新的 Vue 项目:

    vue create vue-project
    
  2. 选择手动配置

    由于要使用 TypeScript ,所以需要选择最后一个选项来进行自定义搭配,通过键盘的上下箭头进行切换选择:
    在这里插入图片描述

  3. 选择特性

    根据提示选择你想要包含的功能,如 Babel、TypeScript、Router 等等。对于一个完整的 Vue 3 + TypeScript 项目,你可能希望选中以下选项:

    • Babel
    • TypeScript
    • Router
    • CSS Pre-processors
    • Linter / Formatter
      在这里插入图片描述
  4. Vue 版本选择

    选择要使用的 Vue.js 版本。由于我们创建的是 Vue 3 项目,请选择 3.x
    在这里插入图片描述

  5. Class 组件语法

    对于 Vue 3,推荐使用 Composition API 而不是 Class 语法,因此这里选择 n
    在这里插入图片描述

  6. Babel 和 TypeScript 的搭配

    如果你需要支持现代模式和 JSX,则应选择 y 来启用 Babel。
    在这里插入图片描述

  7. 路由模式

    对于生产环境中的历史记录模式(history mode),如果服务器端已经正确设置以处理所有路径回退到 index.html,则可以选择 y。否则,如果你不打算立即部署或不确定服务器配置,可以选择哈希模式(hash mode)n
    在这里插入图片描述

  8. CSS 预处理器

    选择你喜欢的 CSS 预处理器。Sass/SCSS 是一个流行的选择,并且与许多 UI 库兼容。

  9. Lint 规则

    选择合适的 ESLint 配置,比如 ESLint + Prettier 是一种常见的组合,它不仅提供代码风格检查还提供了自动格式化功能。

  10. Lint 检查时机

    决定是否在保存文件时进行 Lint 检查或仅在提交代码时检查。这里通常选择 Lint on save

  11. 配置文件位置

    选择将配置存储在单独的文件中还是合并到 package.json 中。独立文件更易于管理和共享。

  12. 保存为预设

    为了未来更快地创建类似项目,可以将当前配置保存为一个预设。

解决 history 模式下的 404 问题

当使用 Vue Router 的 history 模式时,直接访问子路径可能会导致 404 错误。解决方法取决于你的部署环境:

  • 开发阶段:可以通过配置 Webpack Dev Server 的 historyApiFallback 选项来避免这个问题。

    devServer: {
      historyApiFallback: true,
    }
    
  • 测试或本地打包后预览:使用 serve 工具并加上 -s 参数来重定向所有未找到的请求至 index.html

    "scripts": {
      "preview": "serve ./dist -l 4000 -s",
    }
    
  • 线上环境 (Node.js):安装适当的中间件如 connect-history-api-fallback

  • 线上环境 (Nginx):调整 Nginx 配置以确保所有未知路径都指向 index.html

    location / {
      try_files $uri $uri/ /index.html;
    }
    
打印 Webpack 配置

如果你想查看 Vue CLI 底层生成的 Webpack 配置,可以运行如下命令将其输出到指定文件:

npx vue-cli-service inspect > config/webpack.config.js

这可以帮助你理解构建过程中的配置细节,尤其是在遇到构建相关的问题时非常有用。

总结

通过上述步骤,你应该能够顺利创建并配置一个基于 Vue 3 和 TypeScript 的新项目。每个步骤都旨在帮助你根据项目的具体需求定制最合适的开发环境。


http://www.kler.cn/a/447924.html

相关文章:

  • 关于使用拓扑排序算法实现解析勾稽关系优先级的研究和实现
  • 探索 CI/CD 工具的力量
  • LabVIEW伸缩臂参数监控系统
  • MacOS安装MySQL
  • 大数据面试题--企业面试真题
  • HIPT论文阅读
  • 【git】git命令
  • 《Java源力物语》-2.异常训练场
  • 易语言OCR银行卡文字识别
  • 【Java基础面试题030】Java和Go的区别?
  • EGO Swarm翻译
  • SPL06 基于stm32F103 HAL库驱动(软件模拟IIC)
  • 设计模式之 abstract factory
  • Ubuntu 20.04下Kinect2驱动环境配置与测试【稳定无坑版】
  • 国标GB28181平台EasyGBS在安防视频监控中的信号传输(电源/视频/音频)特性及差异
  • 本地Push Git失败
  • QtCreator配置github copilot实现AI辅助编程
  • Django中注册模型到Admin界面
  • 动手学深度学习-多层感知机-7前向传播、反向传播和计算图
  • labelme标签批量转换数据集json_to_dataset
  • oracle dblink 的创建及使用
  • 在Java虚拟机(JVM)中,方法可以分为虚方法和非虚方法。
  • Dijkstra(迪杰斯特拉)最短路径算法可视化演示
  • torch.unsqueeze:灵活调整张量维度的利器
  • 插入排序 计数排序 数据库的三范式
  • YOLO11改进-注意力-引入自调制特征聚合模块SMFA