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.rhkb.cn/news/493974.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

macos 隐藏、加密磁盘、文件

磁盘加密 打开磁盘工具 点击添加 设置加密参数 设置密码 查看文件 不用的时候右键卸载即可使用的时候装载磁盘,并输入密码即可 修改密码 解密 加密,输入密码即可 禁止开机自动挂载此加密磁盘 如果不禁止自动挂载磁盘,开机后会弹出输入…

Chapter 19 Layout and Packaging

Chapter 19 Layout and Packaging 这一章我们介绍版图和封装, 关注模拟和数字电路的要求. 首先讲模拟电路中layout设计考虑, 然后解决衬底coupling问题, 最后描述封装问题, 分析IC的外部电容和电感问题. 19.1 General Layout Considerations 19.1.1 Design Rules Minimum W…

c++ ------语句

一、简单语句 简单语句是C中最基本的语句单元,通常以分号(;)结尾,用于执行一个单一的操作。常见的简单语句类型有: 表达式语句:由一个表达式后面加上分号构成,用于计算表达式的值或者执行具有…

OpenResty、Lua介绍认识

文章目录 官网网址openrestry介绍OpenResty 的关键特性包括:应用场景:Lua 在 OpenResty 中的应用 安装openrestry简单实验下 官网网址 开源版在线文档和支持 商业版支持 什么是Lua 学习Lua语法 每篇一问:什么是编译型语言,什么是…

Flutter组件————Container

Container Container 是 Flutter 中最常用的布局组件之一 参数 参数名称类型描述alignmentAlignmentGeometry定义子组件在其内部的对齐方式,默认为 null,即不改变子组件的位置。paddingEdgeInsetsGeometry内边距,用于在子组件周围添加空间…

36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面 实现效果 知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数&#…

vue2 - Day03 - (生命周期、组件、组件通信)

文章目录 一、生命周期1. 创建阶段2. 挂载阶段3. 更新阶段4. 销毁阶段5. 错误捕获总结 二、组件2.1 注册1. 全局注册 - 公共的组件。2. 局部注册总结 2.2 三大重要的组成部分1. 模板 (Template)主要功能:说明: 2. 脚本 (Script)主要功能:说明…

移动0 - 简单

************* C topic:283. 移动零 - 力扣(LeetCode) ************* Hello, hows your weekend. during my learning, topic about array perplex me. Just do it. Inspect the topic: It is a easy one but not easy for me now bec…

powershell美化

powershell美化 写在前面 除了安装命令,其他都是测试命令,后续再写进配置文件 安装主题控件 安装主题oh-my-posh,powershell中执行 winget install JanDeDobbeleer.OhMyPosh -s winget oh-my-posh init pwsh | Invoke-Expression # 查看…

3. Kafka入门—安装与基本命令

Kafka基础操作 一. 章节简介二. kafka简介三. Kafka安装1. 准备工作2. Zookeeper安装2.1 配置文件2.2 启动相关命令3. Kafka安装3.1 配置文件3.2 启动相关命令-------------------------------------------------------------------------------------------------------------…

Element@2.15.14-tree checkStrictly 状态实现父项联动子项,实现节点自定义编辑、新增、删除功能

背景:现在有一个新需求,需要借助树结构来实现词库的分类管理,树的节点是不同的分类,不同的分类可以有自己的词库,所以父子节点是互不影响的;同样为了选择的方便性,提出了新需求,选择…

基于Spring Boot的房屋租赁管理系统

一、系统背景与目的 随着城市化进程的加快和人口流动性的增强,租房市场需求急剧增长。传统的租房方式依赖于中介平台或线下交易,存在房源信息更新不及时、虚假信息泛滥、交易流程繁琐、沟通渠道不畅等问题。基于Spring Boot的房屋租赁管理系统旨在通过构…

【NLP 16、实践 ③ 找出特定字符在字符串中的位置】

看着父亲苍老的白发和渐渐老态的面容 希望时间再慢一些 —— 24.12.19 一、定义模型 1.初始化模型 ① 初始化父类 super(TorchModel, self).__init__(): 调用父类 nn.Module 的初始化方法,确保模型能够正确初始化。 ② 创建嵌入层 self.embedding n…

jvm栈帧中的动态链接

“-Xss”这一名称并没有一个特定的“为什么”来解释其命名,它更多是JVM(Java虚拟机)配置参数中的一个约定俗成的标识。在JVM中,有多个配置参数用于调整和优化Java应用程序的性能,这些参数通常以一个短横线“-”开头&am…

使用Vscode+EIDE+Jlink开发STM32环境配置教程

环境准备 电脑,最好有梯子。一块开发板。烧录调试工具。比如Jlink。 参考文章 超级馒头神的教程 安装环境 安装Vscode,这里不多说,直接百度下载安装即可。 安装如下插件。 然后重启vscode,就可以看到左侧工具栏有了EIDE图标…

信创技术栈发展现状与展望:机遇与挑战并存

一、引言 在信息技术应用创新(信创)战略稳步推进的大背景下,我国信创技术栈已然在诸多关键层面收获了亮眼成果,不过也无可避免地遭遇了一系列亟待攻克的挑战。信创产业作为我国达成信息技术自主可控这一目标的关键一招&#xff0c…

微信小程序开发入门

实现滚动 需要设置高度和边框 轮播图 差值表达式( {{表达式的值}} ),info数据要写到js文件的data数据中 小程序中常用的事件

cad c# 二次开发 ——动态加载dll 文件制作(loada netloadx)

原理:制作一个dll工具,此dll工具可动态加载调试代码所生成的dll。 using System.Collections.Generic; using System.IO; using System.Reflection; using System.Windows.Forms; using Autodesk.AutoCAD.ApplicationServices.Core; using Autodesk.Aut…

基于AT89C52单片机的6位电子密码锁设计

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/90166684?spm1001.2014.3001.5503 14 部分参考设计如下: 目 录 摘要 1 abstract 2 1 绪论 3 1.1 课题背景 3 1.2 课题的目的和意义 3 1.3 电子密码…

文件解析漏洞中间件(iis和Apache)

IIS解析漏洞 IIS6.X #环境 Windows Server 2003 在iis6.x中&#xff0c;.asp文件夹中的任意文件都会被当做asp文件去执行 在默认网站里创建一个a.asp文件夹并创建一个1.jpg写进我们的asp代码 <%now()%> #asp一句话 <%eval request("h")%> 单独创建一…