VUE3TS: Vue3+TS的项目搭建

news2025/2/24 0:17:25

简介

通过 Vue-cli4 创建的 Vue3+TS 的项目，并进行一些基础使用的举例。
此例是以 VSCode编辑器 进行的编码。

一、项目搭建

1. 进入命令提示符窗口

在要搭建项目的文件夹中，点击路径，输入CMD并按回车
在这里插入图片描述
在这里插入图片描述

2. 查看node版本、Vue-cli版本

2.1 node版本（14.x以上）

node -v

若node版本不够，去 node官网 重新下载安装

2.2 Vue-cli版本（最好是4.x以上）

此处V大写

vue -V

如果没有4.0以上，通过以下步骤进行重新安装

// 卸载旧版本
npm uninstall vue-cli -g

// 再安装Vue cli 4
npm install -g @vue/cli

3. 开始创建Vue3项目

3.1 创建Vue3项目

vue create 项目名，注意项目名需要全小写

vue create vue3ts_demo

3.2 创建配置

选择第三项，自定义配置
在这里插入图片描述
在这里插入图片描述
光标到对应行，然后按空格即可选中需要的配置
在这里插入图片描述

Vue版本：3.x
是否使用class类风格的组件语法 ：否
使用Babel与TypeScript一起用于自动检测的填充 ：是
css预处理器：Less
ESLint规范：ESLint + Prettier
ESLint检测时间：代码保存时
在这里插入图片描述

生成的ESLint配置存放在哪里： 单独存放
在这里插入图片描述

是否保存为预设，下次创建项目可直接使用配置： 看自己
在这里插入图片描述

然后就会自动创建一个初始的Vue3项目了
在这里插入图片描述
在这里插入图片描述

3.3 查看项目目录

在这里插入图片描述

3.4 运行Vue3项目

方式一：在cmd命令中

// 先进入项目目录
cd vue3ts_demo

// 运行项目
npm run serve

方式二：使用编译器，如VSCode

npm run serve

3.5 附一张单独添加typescript的配置说明

cmd，项目根目录

vue add typescript

在这里插入图片描述

二、项目配置

1. ESLint与prettier的检测兼容

由于前面创建项目时，选择了ESLint与prettier，两者之间会有一些检测冲突，所以需要安装对应的插件并做兼容处理。

1.1 安装两个插件

可能一个，也可能两个都自动安装了，查看package.json

npm i eslint-plugin-prettier eslint-config-prettier -D

1.2 在 根目录的 ‘.eslinttrc.js’ 文件中添加插件代码

// extends
'@vue/prettier/@typescript-eslint',
'plugin:prettier/recommended'

在这里插入图片描述

2. 公共格式化配置

此处以prettire的进行举例

2.1 项目根目录，新建 prettier.config.js 文件

简易配置内容如下，根据情况自行调整

module.exports = {
  useTabs: false, // 缩进不使用tab，使用空格
  printWidth: 100, // 超过最大值换行
  proseWrap: 'always', // 当超出print width（上面有这个参数）时就折行
  tabWidth: 2, // 缩进字节数
  vueIndentScriptAndStyle: true, // 缩进Vue文件中的脚本和样式标签
  singleQuote: true, // 单双引号，true，适用单引号
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
  bracketSpacing: true, // 闭合对象、方法的前后空格，{ foo: bar }
  // "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ] // 每个函数最大行数
  // arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
  // rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
  trailingComma: 'none', // 无尾逗号
  arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号
  htmlWhitespaceSensitivity: 'strict', // 空格被认为是敏感的
  semi: false, // 句尾添加分号
  endOfLine: 'auto' // 设置统一的行结尾样式 保持现有的行尾
}

2.2 项目根目录，新建 .prettierignore 文件

使用prettier检测时，忽略哪些

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

2.3 VSCode配置

（1）安装必要插件
ESLint
Prettier - Code formatter
Vue Language Features (Volar)

（2）setting.json

{
  "editor.fontSize": 18, // 设置文字大小
  "editor.lineHeight": 24, // 设置文字行高
  "editor.formatOnSave": true, // 每次保存自动格式化
  "workbench.editor.enablePreview": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.menuBarVisibility": "compact",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  } // 打开文件不覆盖
}

2.4 检测prettier是否设置生效

测试一：在代码中保存代码【没有设置保存时检测，就使用格式化代码快捷功能】；

测试二：配置一次性修改的命令；
在package.json中配置一个scripts：

"prettier": "prettier --write ."

然后在终端执行命令，查看是否能正常一次性格式化所有项目文件

npm run prettier

在这里插入图片描述

3. vue-router

// TODO…

4. vuex

// TODO…

5. axios

// TODO…

6. UI框架

// TODO…

7. 全局引入公共CSS及变量

7.1 引入公共CSS

（1）先创建需要的css文件
如此处，common中的是通用样式，frame的index.less是预计要写的所有组件的公共样式，还可以在frame下新建一个UI框架样式覆盖的文件
在这里插入图片描述

（2）在 ‘styles/index.less’ 文件中统一引入公共样式文件

@import './common/index.less';
@import './frame/index.less';

（3） 在main.ts中引入公共样式

import '@/assets/styles/index.less'

7.2 配置全局CSS变量

VUE：全局引入.lees文件的CSS变量

8. 公共文件夹的别名路径

这一项，可不配置，影响不大。

8.1在 vue.config.js 文件中配置

（1）头部新增代码（如第7点进行了全局CSS变量引入的，省略这一步）

const path = require('path') // 引入path模块
function resolve(dir){
  return path.join(__dirname,dir) // path.join(__dirname)设置绝对路径
}

（2）对应配置内容

module.exports = {
  ..., // 其他配置内容

  chainWebpack: config => {
    // 第1个参数：别名，第2个参数：路径  （设置路径别名）
    config.resolve.alias
      .set('views', resolve('./src/views'))
      .set('router', resolve('./src/router'))
      .set('store', resolve('./src/store'))
      .set('utils', resolve('./src/utils'))
      .set('components',resolve('./src/components'))
      .set('assets',resolve('./src/assets'))
  }
}

8.2 使用方式

HTML中 ：~别名

<img alt="Vue logo" src="~assets/logo.png" />

script中： 别名

import Home from 'views/home.vue'

CSS中：~别名

background-image: url('~assets/logo.png');

（N）TODO…

三、拓展

VUE3: VUE3新特性的个人总结
VUE3&TS: Vue3+TS基础编码的个人总结
VUE3&TS: Vue3+TS编码上的配置报错处理

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！

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

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

相关文章

Android 架构之长连接技术

Android 架构之长连接技术

上文中我们提到了HttpDNS&#xff0c;虽然它比系统DNS更优&#xff0c;但终归还是要做DNS操作。而长连接都是IP直接连接&#xff0c;因此没有DNS相关的开销和耗时。 3. 如果有大量网络请求&#xff0c;可以明显减少网络延时&#xff0c;节省带宽 对于大型App而言&#xff0c;…
阅读更多...
npm——安装、卸载与更新

npm——安装、卸载与更新

npm 官方文档&#xff1a;https://docs.npmjs.com/ 什么是npm npm&#xff08;“Node 包管理器”&#xff09;是 JavaScript 运行时 Node.js 的默认程序包管理器。 它也被称为“Ninja Pumpkin Mutants”&#xff0c;“Nonprofit Pizza Makers”&#xff0c;以及许多其他随机…
阅读更多...
Vue通知提醒框（Notification）

Vue通知提醒框（Notification）

项目相关依赖版本信息 可自定义设置以下属性&#xff1a; 自动关闭的延时时长&#xff08;duration&#xff09;&#xff0c;单位ms&#xff0c;默认4500ms消息从顶部弹出时&#xff0c;距离顶部的位置&#xff08;top&#xff09;&#xff0c;单位像素px&#xff0c;默认24p…
阅读更多...
WebSocket开发（心跳监测）功能

WebSocket开发（心跳监测）功能

前言 在之前的文章中完成了客服对话的Demo功能&#xff0c;但是现在的连接是无限制的长时间连接没有做心跳、失活、超时断连等功能&#xff0c;心跳的实现方法有很多种&#xff0c;并且WebSocket就提供了ping/pong类型的消息。 心跳的触发方式也分两种&#xff1a; 客户端触…
阅读更多...
微信小程序实现图片上传

微信小程序实现图片上传

前言 手机上传图片的功能大家一定都用过吧&#xff0c;今天教你用微信小程序实现这个小功能。 实现效果如下&#xff1a; 实现思路&#xff1a; 首先我们需要定义一个存放图片的数组&#xff0c;通过方法拿取图片的详细信息&#xff0c;然后调用微信小程序的 wx.uploadFile 方…
阅读更多...
element ui datepicker时间控件实现范围选择周，季，年。

element ui datepicker时间控件实现范围选择周，季，年。

因项目要求&#xff0c;需日&#xff0c;周&#xff0c;月&#xff0c;季&#xff0c;年五种日期范围选择器&#xff0c;故参考文章&#xff08;在末尾&#xff09;后分享 一.效果图 二、版本及下载 1.实现需要修改源码&#xff0c;目前修改的版本为2.15.3&#xff0c;所以想要…
阅读更多...
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute

Vue3路由配置createRouter、createWebHistory、useRouter,useRoute

目录 手动配置Vue-router环境&#xff1a; 组件内部跳转路由、传参useRouter,useRoute Vue3和Vue2基本差不多&#xff0c;只不过需要将createRouter、createWebHistory从vue-router中引入&#xff0c;再进行使用。 手动配置Vue-router环境&#xff1a; 1、下载包&#xff1a…
阅读更多...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘result‘)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘result‘)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading result) 如题所示问题&#xff0c;耽误三天寻找bug&#xff0c;终于在我睡意朦胧之际发现了一道光&#xff0c;发现 await 出现的三个点&#xff1a; 于是打开 findAllCategory()这个函数 对应…
阅读更多...
电商后台管理系统简介

电商后台管理系统简介

项目介绍 黑马后台管理系统是一个电商后台管理系统的前端项目&#xff0c;基于VueElement实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能 开发技术 此项目开发我用到的技术有&#xff1a;vue2node.…
阅读更多...
Vant 2 - 移动端 Vue 组件库 _ 问题记录

Vant 2 - 移动端 Vue 组件库 _ 问题记录

目录 Popup 弹出层 DatetimePicker 时间选择 Field 输入框 Picker 选择器 List 列表 Tab 标签页 发布初衷 &#xff1a; 记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题 &#xff0c; 方便以后再次遇到类似问题 &#xff0c; 能够快时查阅解决 &#xff0c; …
阅读更多...
Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

问题&#xff1a;Vue3TypeScriptVite的项目中如何使用require动态引入类似于图片等静态资源&#xff01; 描述&#xff1a;今天在开发项目时&#xff08;项目框架为Vue3TypeScriptVite&#xff09;需要 动态引入静态资源&#xff0c;也就是img标签的src属性值为动态获取&#…
阅读更多...
Lodash 使用及常用方法

Lodash 使用及常用方法

简介 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 官网 Lodash 简介 | Lodash 中文文档…
阅读更多...
TypeScript详解十六：类型声明（declare）

TypeScript详解十六：类型声明（declare）

目录前言一、类型声明的作用&#xff1f;1.1 declare 关键字1.2 示例二、常见的几种类型声明2.1 普通类型声明2.2 外部枚举2.3 命名空间三、类型声明文件3.1 模拟类型声明文件&#xff0c;以 jquery 为例3.2 使用手动实现的jquery.d.ts声明文件3.3 第三方声明文件&#xff08;以…
阅读更多...
Django web 开发(三) - Django的使用

Django web 开发(三) - Django的使用

文章目录Django安装Django安装Pythonpip加速安装Django创建项目文件介绍简单访问APP添加新的app注册app创建blog的页面templates模板templates模板语法单一变量列表循环(列表)字典循环(字典)列表套字典条件判断请求和响应案例: 用户登录数据库操作安装第三方模块ORM创建数据库D…
阅读更多...
node版本、npm版本随意切换

node版本、npm版本随意切换

前言 随着项目越做越多&#xff0c;难免会有a项目需要12.x的node版本&#xff0c;b项目需要>16.0.0的情况。 为了避免出现node版本切换的繁琐&#xff0c;特意找了这么一个工具&#xff0c;主要是方便管理node版本。 请按照以下步骤来实现 官方地址: 传送门 1、下载软件 …
阅读更多...
使用react实现后台管理系统项目

使用react实现后台管理系统项目

一.开发React必须依赖三个库 1.react&#xff1a;包含react所必须的核心代码 2.react-dom&#xff1a;react渲染在不同平台所需要的核心代码 3.babel&#xff1a;将jsx转换成React代码的工具 二.React的依赖引入 1.方式一&#xff1a;直接CDN引入 2.方式二&#xff1a;下载后&…
阅读更多...
vue高级特性总结

vue高级特性总结

文章目录一、修饰符1、事件修饰符案例1案例22、按键修饰符案例33、表单修饰符案例4二、计算属性computed案例5三、监听器watch案例6案例7&#xff1a;当商品数量大于1000时&#xff0c;输入框中数字自动设置成1000&#xff1b;当商品数量小于0时&#xff0c;输入框中数字自动设…
阅读更多...
vue中如何使用vue-pdf及相应报错解决

vue中如何使用vue-pdf及相应报错解决

目录 一、安装npm 依赖 二、引入组件 1、html中使用组件 单页 多页 2、数据处理 单页 多页 三、项目使用--代码部分 四、报错解决 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf&#xff0c;vue3项目用pdfjs-dist一、安装npm 依赖…
阅读更多...
【Vue】Vue简介、引入、命令式和声明式编程

【Vue】Vue简介、引入、命令式和声明式编程

&#x1f4ad;&#x1f4ad; ✨&#xff1a; 开始陆陆续续更新vue啦   &#x1f49f;&#xff1a;东非不开森的主页   &#x1f49c;&#xff1a;如果有幸和你一起学习一起进步&#xff0c;那就太棒啦&#xff0c;一起学习吧。&#x1f49c;&#x1f49c;   初识vue一、初识…
阅读更多...
从零入门开源框架---若依(前后端分离版)

从零入门开源框架---若依(前后端分离版)

一、若依是什么&#xff1f; 若依它就是一个开源项目&#xff0c;别人写好的代码&#xff0c;我们拿来进行二次开发,它主要是做数据和权限管理系统。 二、使用背景 任何公司的各种大的项目必然需要一个后台权限管理系统&#xff0c;这是必然的&#xff0c;但是如果不想投入太多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023