vue + ts搭建项目

最新推荐文章于 2025-03-15 10:02:52 发布
最新推荐文章于 2025-03-15 10:02:52 发布
阅读量466 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cc6_66/article/details/110556620
版权

vue + ts搭建项目

  • 安装vue-cli3
npm install -g @vue/cli
  • 创建vue项目
vue create test // test是项目名![在这里插入图片描述](https://img-blog.csdnimg.cn/2020120317420556.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjNl82Ng==,size_16,color_FFFFFF,t_70#pic_center)

  • 选择创建模式，如图我门选择第二个自定义创建
    在这里插入图片描述

  • 手动选择特性（上下箭头移动，空格选择，回车完成）
    在这里插入图片描述

  • 接下来会选择一些配置（y-是，n-否）

  • [1] 是否使用类样式组件语法？选择y
    在这里插入图片描述

  • [2]是否将babel与typescript一起使用？选择y
    在这里插入图片描述

  • [3] 路由是否使用history模式（默认hash模式）？选择y
    在这里插入图片描述

  • [4] 选择css预编译方式，我选的是Sass/SCSS (with node-sass)
    在这里插入图片描述

  • [5] 选择一个语法检测配置，选择TSLint
    在这里插入图片描述

  • [6] 选择语法检查方式，选择Lint on save
    在这里插入图片描述

  • [7] 你希望babel、postcss、eslint等的配置文件放在哪？选择In dedicated config files
    在这里插入图片描述

  • [8] 将此保存为将来项目的预设？随意选，我选的n
    在这里插入图片描述

  • 最后npm run serve运行项目

创建vue3+ts项目
qq_48783694的博客
03-12 5810
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3381
Vite+Vue3+Ts+sass+Router+pinia+axios,Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
vue-cli3+ts创建项目（超详细）
qq_32754575的博客
10-08 8490
没有摘要，直接来吧
Vue：Vue+TS学习笔记
最新发布
Brave_heart4pzj的博客
03-15 1063
Vue + TypeScript
vue3+ts项目创建
yunbabac的博客
09-23 1365
一，创建项目（这里使用的是vuecli） 二，代码规范 1.集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格 VSCode需要安装一个插件：EditorConfig for VS Code 2，使用prettier工具 Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JS...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
electron-vue+ts 搭建项目
斗师——Ace
10-21 1384
全局安装vue/cli： npm install -g @vue/cli 创建项目my-project：vue init simulatedgreg/electron-vue my-project 进入项目my-project：cd my-project 初始化项目：npm install 启动项目：npm run dev 单元测试：npm run test electron-vue加入Ts参考：https://blog.youkuaiyun.com/weixin_44872699/article/deta
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue + ts + pinia项目搭建
Pandas_Lin的博客
06-27 914
目前，只有Vite被官方支持，不过任何实现import.meta.hot规范的构建工具都应该能正常工作。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。2. 安装pinia。
vue3+ts项目搭建
weixin_47821983的博客
11-22 2660
a) 完成以上的步骤以后会生成 eslint.config.js 文件 这个是eslint9 以后的版本(我也找了很多资料最后在github中拔了一个项目以后才配置好的)Ⅱ、修改npm的下载源 （因为默认指向的是 国外的下载地址，指向淘宝下载地址，下载速度就会很快）1、检查是否安装pnpm (默认npm安装成功的情况下，也就是安装了node)c) tsconfig.json 配置这个可以@别名的问题。b)修改配置vite.config.ts。eslint.config.js 的配置 具体如下。
vue3之创建vue+ts项目
weixin_43845137的博客
03-03 1252
目录vue3之vite创建项目基础的创建项目流程package.json 脚本指令介绍 vue3之vite创建项目 基础的创建项目流程 npm init vite@lastst 项目名称：XXX 之后选择创建 vue 项目 再之后选择的是 vue-ts 再项目之中 初始化 npm i 与运行项目：yarn dev || npm run dev package.json 脚本指令介绍 "scripts": { "dev": "vite", // 启动开发 的服务器 "build": "
搭建vue3项目+ts
黑玫瑰
09-11 6709
一、环境 Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本） 1、下载安装node 下载地址：https://nodejs.org/en/ 2、检查是否安装成功 二、安装 1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步： npm uninstall vue-cli -g //或者 yarn global remove vue-cli 2、安装@vue/c
搭建一个vue3+ts项目（超祥/必看）
热门推荐
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
Vue3 项目初始化配置规范
A535366的博客
10-19 1890
项目搭建规范： 一. 代码规范 1.起始创建项目 2.选择vue3 3.是不是使用类样式的组件语法，选择是no 4.是不是使用Babel中TypeScript 选择yes 5.是使用history路由还是哈希路由 选择yes 6.使用什么样的css预处理器 选择Less 7.选择一个查看linter格式化器配置 选择最漂亮的 ESLint+Prettire 8.选择在...
Vue3+ts项目的创建
www666_的博客
04-20 261
【代码】Vue3+ts项目的创建。
vue3+ts搭建项目
07-28
你可以按照以下步骤来搭建一个基于Vue3和TypeScript的项目： 1. 首先，确保你的开发环境中已经安装了Node.js和npm。 2. 使用以下命令来创建一个新的Vue项目： ``` vue create my-project ``` 在创建项目的过程中，你可以选择手动配置一些选项，比如选择Vue版本、选择是否使用TypeScript等。 3. 进入到项目目录中： ``` cd my-project ``` 4. 安装Vue 3的依赖： ``` npm install vue@next ``` 这将安装最新版本的Vue 3。 5. 安装TypeScript支持： ``` npm install typescript ``` 6. 创建一个`tsconfig.json`文件来配置TypeScript编译选项： ``` npx tsc --init ``` 7. 修改`tsconfig.json`文件，确保以下选项已启用： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "moduleResolution": "node" } } ``` 8. 现在，你可以开始编写Vue组件，并使用TypeScript进行类型检查了。 这样，你就成功地搭建了一个基于Vue3和TypeScript的项目。你可以根据需要添加其他的依赖和配置。希望对你有所帮助！如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值