VUE3+TS项目搭建

最新推荐文章于 2025-04-04 11:13:09 发布
原创 最新推荐文章于 2025-04-04 11:13:09 发布 · 229 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章介绍了如何自定义创建Vue项目，包括选择基础配置，如Vue版本，决定是否使用类样式组件，并详细说明了配置文件的存放位置。读者可以通过手动选择功能来定制适合自己的项目设置。

项目的创建

 自己配置：Manually select features

 选择基础配置：根据需要的进行选择，直接在所需要的工具前面按空格键就行

 选择vue版本

选择是否使用类样式组件：

配置文件存放：

 完成

 

 

创建vue3+ts项目
qq_48783694的博客
03-12 6142
在开发项目的时候，经常会用到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项目搭建
蒾酒的博客
02-19 1378
初始化vue项目，安装常用依赖，基础目录介绍。
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3882
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?
vue3+ts项目创建
yunbabac的博客
09-23 1428
一，创建项目（这里使用的是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+Vite+Vue3+Ts项目搭建
qq_24724153的博客
02-17 1017
根据自己习惯选择TypeScript 或 JavaScript 教程默认选择TypeScript。显示这样 vue 项目搭建完成了，打开vscode或者webstrom 进行以下命令。my-element-plus-app 自定义项目名称。页面展示这样 Vite+Vue3+Ts 安装完成了。再package.json 文件添加以下。如出现以下错误，请关闭相关杀毒软件。展示选择的源代表切换成功。显示以上图片代表已安装成功。或直接执行命令也是可以的。
全新开源的Vue3+TS的前后台分离的开发平台源码+搭建教程
最新发布
10-10
全新开源的Vue3+TS的前后台分离的开发平台源码，创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！ ...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
12-03
为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并...
VueCli3构建TS项目的方法步骤
10-17
主要介绍了VueCli3构建TS项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3+ts项目的创建
www666_的博客
04-20 295
【代码】Vue3+ts项目的创建。
Vite 创建 Vue3 + TS 项目
D3S3P的博客
04-26 583
创建项目安装插件修改vite.config.js的配置文件(Ts配置方法)1): 将第二步中的代码 enable:false 运行项目就会在src的同级中新建一个 types 目录在types文件夹中生成一个文件 auto-imports.d.ts2): 将第二步中 enable:true最后再重新运行项目。
vite创建vue3+ts项目
s_156的博客
04-04 687
如下图最终返回一个本地地址，输入浏览器访问，能打开就没问题了（此处有提示Network：use–host to expose，该问题可在后面配置中解决，解决后再运行会多出几个局域网访问网址，这样只要和你在一个局域网的人都能通过地址访问你的页面了）（注意：下面安装的所有项目依赖包（都在根目录下安装），我的是这一层，可在vs打开的项目里新建控制台面板进行安装（注意路径即可），也可在cmd面板操作）（5）可以保存后，运行看是否报错。（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））
搭建vue3项目+ts
m0_60708088的博客
07-17 616
搭建vue3项目+ts
vue3之创建vue+ts项目
weixin_43845137的博客
03-03 1282
目录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": "
vue-cli创建vue3+ts项目
博哥的二进制世界
11-09 637
vue-cli创建vue3+ts项目安装vue-cli脚手架通过vue-cli创建vue3+ts项目 安装vue-cli脚手架 // 安装 npm i vue-cli -S // 查看vue版本 vue --version 通过vue-cli创建vue3+ts项目 vue create myApp 选择Manuallu select features 选择以下配置，其中choose Vue version选择3.0 vue3+ts项目创建成功 ...
vue3+ts 项目搭建
01-03
### 使用 Vue 3 和 TypeScript 构建项目的指南 #### 创建新项目 为了创建一个新的基于 Vue 3 的 TypeScript 项目，可以利用 `@vue/cli` 或者 Vite 来快速初始化环境。这里推荐使用 Vite，因为它提供了更快的开发服务器启动速度以及更高效的构建过程。 ```bash npm init vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` 这组命令会设置好基础结构并安装必要的依赖项[^3]。 #### 安装额外工具包 除了默认安装的内容外，可能还需要一些其他的库来增强功能，比如路由管理器 (`vue-router`) 和状态管理系统 (Vuex)，这些都可以通过 NPM 进行安装： ```bash npm add vue-router @vuex/vuex ``` 对于 Three.js 及其加载器来说，则可以通过下面的方式引入到项目当中以便处理 GLB 文件等资源[^1]: ```bash npm i three @types/three gltfjsx ``` #### 配置全局组件声明 为了让编辑器能够识别来自 `.vue` 单文件组件中的自定义标签而不报错，在根目录下新建一个名为 `shims-vue.d.ts` 的文件，并加入如下代码片段以扩展 Vue 类型定义[^4]: ```typescript // shims-vue.d.ts import &#39;vue&#39;; declare module &#39;*.vue&#39; { import type { DefineComponent } from &#39;vue&#39;; const component: DefineComponent<{}, {}, any>; export default component; } ``` 另外还需修改 `auto-imports.d.ts` 文件确保常用组件如 `<RouterLink>` 能够被自动导入而无需每次都手动指定路径。 #### 设置编译规则 如果采用 Webpack 作为打包工具的话，那么应该调整 webpack.config.js 添加对 ts-loader 支持从而让 TypeScript 正常工作；而对于 Vite 用户而言，默认已经集成了很好的 TS 支持所以通常不需要特别改动配置文件. #### 开始编写应用逻辑 现在可以在 src/main.ts 中按照组合 API 方式书写入口函数，同时也可以尝试新的 Setup 语法糖简化模板内的表达式[^2]: ```typescript // main.ts import { createApp, h } from &#39;vue&#39; import App from &#39;./App.vue&#39; createApp(App).mount(&#39;#app&#39;) ``` 在单文件组件内部则依照 Composition API 设计响应式的视图层业务逻辑: ```html <script lang="ts"> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "MyComponent", setup() { let count = ref<number>(0); function increment(): void { count.value++; } return { count, increment }; }, }); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值