vue3+ts创建前端blog项目

news2025/1/12 23:17:58

vue3创建blog项目

  • cmd
  • 创建
  • Manually select features
    • Choose Vue version
    • Use class-style component syntax? (Y/n)
    • Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
    • Use history mode for router?
    • Pick a CSS pre-processor?
    • Pick a linter / formatter config?
    • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
    • Save this as a preset for future projects?
  • 下载配置中
  • 下载完成
  • 使用ws打开项目
  • 先加载一下
    • npm install
    • npm run serve
  • 前端项目启动成功!

cmd

在这里插入图片描述

创建

vue create 项目名

在这里插入图片描述
注意:此时 我的脚手架是4.5.9
如果脚手架过低 npm uninstall vue-cli -g
npm install -g @vue/cli
在这里插入图片描述

Manually select features

选择 Manually select features 手动创建
在这里插入图片描述

Choose Vue version  选择vue脚手架的版本
Babel:				使用babel,便于将我们源代码进行转码(把es6=>es5)【推荐选择】
TypeScript:		使用TypeScript进行源码编写,使用ts可以编写强类型js,对我们的开发有很大的好处
Progressive Web App(PWA):使用渐进式网页应用(PWA)可以让网站的体验变得更好,能够模拟一些原生功能
Router:			使用vue-router【推荐选择】
Vuex:				使用vuex状态管理器
CSS Pre-processors:使用CSS预处理器,比如:less,sass等
Linter/Formatter:使用代码风格检查和格式化(如:ESlint)【推荐选择】
	eslint:是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如: = 的前后必须有一个空格)[但会出现过于严苛的情况]
Unit Testing:		使用单元测试
E2E Testing:		使用E2E测试, end to end(端到端)是黑盒测试的一种

下边是我的选择:
在这里插入图片描述

Choose Vue version

在这里插入图片描述

Use class-style component syntax? (Y/n)

是否使用Class(类)风格装饰器,
即通过export default class Home extends Vue{} 创建Vue实例
y【推荐选择】

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel做转义, 与TypeScript一起用于自动检测
y【推荐选择】

Use history mode for router?

路由模式, 是否选择history模式,启用history模式,项目build之后,可能会出现打开页面空白的情况哦
y【推荐选择】

Pick a CSS pre-processor?

选择一种css 预处理器
Sass/SCSS(with dart-sass)【推荐选择】
node-sass是自动编译实时的,
dart-sass需要保存后才会生效。

Pick a linter / formatter config?

选择一种代码格式化检测工具
TSLint: ts格式检验工具
ESLint with error prevention only: ESLint 只会进行错误提醒【推荐选择】
ESLint + Airbnb config: ESLint Airbnb标准
ESLint + Standard config: ESLint Standard 标准
ESLint + Prettier: ESLint(代码质量检测)+ Prettier(代码格式化工具)

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?
还是package.json里?
这里方便配置清晰好看, 我选择每个配置单独文件。
全放在package.json。【推荐选择】
【看个人,我是嫌全部单独配置文件,项目列表多且杂】

Save this as a preset for future projects?

是否需要保存当前配置,在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置
【我是希望以后这个文件样式还会用到,选择y,
单独需要写一个名字,用来以后再找这个配置模式的东西

在这里插入图片描述

下载配置中

在这里插入图片描述

下载完成

在这里插入图片描述

使用ws打开项目

在这里插入图片描述

先加载一下

npm install

在这里插入图片描述

npm run serve

在这里插入图片描述
在这里插入图片描述

前端项目启动成功!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1058164.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot的科研工作量获奖项目管理平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

TinyWebServer学习笔记-MySQL数据库连接

为什么要用数据库连接池? 我们的网站允许用户注册,在没有池的情况下,假设只有一个人,那么流程就是,用户点击注册,通过socket将用户的账号和密码发送到服务器,然后就需要创建MySQL数据库连接&am…

C#制做一个 winform下的表情选择窗口

能力有限,别人可能都是通过其他方式实现的,我这里简单粗暴一些,直接通过点击按钮后弹出个新窗体来实现。 1、先在form1上增加一个toolstrip控件,再增加个toolstripbutton按钮,用来点击后弹出新窗体,如图&a…

【Linux】文件权限详解

🍁 博主 "开着拖拉机回家"带您 Go to New World.✨🍁 🦄 个人主页——🎐开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 🎐✨🍁 🪁🍁 希望本文能够给您带来一定的…

【C++】可变参数模板使用,在emplace中应用

🌏博客主页: 主页 🔖系列专栏: C ❤️感谢大家点赞👍收藏⭐评论✍️ 😍期待与大家一起进步! 文章目录 一、可变参数模板1.参数包的展开方式1.递归方式展开2.逗号表达式展开参数包 二、empl…

王杰国庆作业day6

服务器 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <my_head.h> #define PORT 2324 //端口号 #define IP "192.168.10.107" //本机IP int main(int argc, const char *argv[]) {sqlite3* d…

FPGA project : TFT_LCD

实验目标&#xff1a; 驱动TFT_LCD显示十色彩条。 重点掌握的知识&#xff1a; 1&#xff0c;液晶显示器&#xff0c;简称LCD(Liquid Crystal Display)&#xff0c;相对于上一代CRT显示器(阴极射线管显示器)&#xff0c;LCD显示器具有功耗低、体积小、承载的信息量大及不伤眼…

pwnable_hacknote

pwnable_hacknote Arch: i386-32-little RELRO: Partial RELRO Stack: Canary found NX: NX enabled PIE: No PIE (0x8047000)32位&#xff0c;没开PIE main部分就不贴了&#xff0c;直接贴主要的函数 unsigned int ADD() {int v0; // ebxint i; // [e…

堆栈与堆(Stack vs Heap)有什么区别?

​编写有效的代码需要了解堆栈和堆内存&#xff0c;这使其成为学习编程的重要组成部分。不仅如此&#xff0c;新程序员或职场老手都应该完全熟悉堆栈内存和堆内存之间的区别&#xff0c;以便编写有效且优化的代码。 这篇博文将对这两种内存分配技术进行全面的比较。通过本文的…

【考研复习】union有关的输出问题

文章目录 遇到的问题正确解答拓展参考文章 遇到的问题 首次遇到下面的代码时&#xff0c;感觉应该输出65,323。深入理解union的存储之后发现正确答案是&#xff1a;67,323. union {char c;int i; } u; int main(){u.c A;u.i 0x143;printf("%d,%d\n", u.c, u.i); …

Java 随机数的获得方法(5种)

1. Math.random() 静态方法 产生的随机数是 0 - 1 之间的一个 double&#xff0c;即 0 < random < 1 代码&#xff1a; 结果&#xff1a; 当调用 Math.random() 方法时&#xff0c;自动创建了一个伪随机数生成器&#xff0c;实际上用的是 new java.util.Random()。当接…

C++项目:仿mudou库one thread one loop式并发服务器实现

目录 1.实现目标 2.HTTP服务器 3.Reactor模型 3.1分类 4.功能模块划分: 4.1SERVER模块: 4.2HTTP协议模块: 5.简单的秒级定时任务实现 5.1Linux提供给我们的定时器 5.2时间轮思想&#xff1a; 6.正则库的简单使用 7.通用类型any类型的实现 8.日志宏的实现 9.缓冲区…

使用 PPG(光电容积描记图)估计心率和 SpO2 水平(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

from PIL import Image,文字成图,ImageFont import jieba分词,input优雅python绘制图片

开始的代码 import os from PIL import Image, ImageDraw, ImageFont import jiebadef generate_image_with_white_bg(text, font_path, output_path):# 设置图片大小和背景颜色image_width 800image_height 600bg_color (255, 255, 255) # 白色# 创建图片对象image Imag…

基于MFC和OpenCV实现人脸识别

基于MFC和OpenCV实现人脸识别 文章目录 基于MFC和OpenCV实现人脸识别1. 项目说明1. 创建项目2. 启动窗口3. 登录窗口-添加窗口、从启动窗口跳转4. 启动窗口-美化按钮5. 登录窗口-美化按钮、雪花视频6. 注册窗口-美化按钮、雪花视频、从启动窗口跳转7. 注册窗口-开启摄像头8. 注…

小谈设计模式(15)—观察者模式

小谈设计模式&#xff08;15&#xff09;—观察者模式 专栏介绍专栏地址专栏介绍 观察者模式核心思想主要角色Subject&#xff08;被观察者&#xff09;ConcreteSubject&#xff08;具体被观察者&#xff09;Observer&#xff08;观察者&#xff09;ConcreteObserver&#xff0…

Linux CentOS7 vim多文件与多窗口操作

窗口是可视化的分割区域。Windows中窗口的概念与linux中基本相同。连接xshell就是在Windows中新建一个窗口。而vim打开一个文件默认创建一个窗口。同时&#xff0c;Vim打开一个文件也就会建立一个缓冲区&#xff0c;打开多个文件就会创建多个缓冲区。 本文讨论vim中打开多个文…

STM32CubeMX学习笔记-USB接口使用(CDC虚拟串口)

STM32CubeMX学习笔记-USB接口使用&#xff08;CDC虚拟串口&#xff09; 一、USB简介二、新建工程1. 打开 STM32CubeMX 软件&#xff0c;点击“新建工程”2. 选择 MCU 和封装3. 配置时钟4. 配置调试模式 三、USB3.1 参数配置3.3 配置时钟3.4 USB Device 四、生成代码五、查看端口…

王道考研操作系统——I/O管理

I/O设备的基本概念 键盘&#xff1a;输入设备&#xff08;把设备准备好的数据读入计算机当中&#xff09;&#xff1b; 显示器&#xff1a;输出设备&#xff08;把计算机中准备好的数据写出到设备上&#xff09;&#xff1b; 移动硬盘&#xff1a;既是输入又是输出 中断驱动…

近三年3D点云顶会论文及源码合集,含2023最新

目前2D图像识别技术早已成熟&#xff0c;但2D的图像信息只有XY两个维度&#xff0c;而3D点云能够提供三维世界的信息&#xff0c;因此在自动驾驶、机器人和增强现实等各种领域都得到了广泛的应用。 近年来随着深度学习的发展&#xff0c;作为计算机视觉新兴研究热点的3D点云技…