如何搭建一个完整的Vue3.0 + ts 的项目

最新推荐文章于 2024-06-19 15:06:30 发布
最新推荐文章于 2024-06-19 15:06:30 发布
阅读量4.8k 收藏 20
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_28371057/article/details/111147362
版权
本文详述了Vue3.0+TypeScript项目从安装Node.js、卸载旧版本到使用Vue-cli3.x搭建的过程。涵盖配置项选择、项目目录结构和启动项目的方法，帮助初学者了解Vue3.0的搭建步骤。
摘要由CSDN通过智能技术生成

如何搭建一个完整的Vue3.0 + ts 的项目

相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。

我们现在开始进入今天的主题啦~~

一、安装

1. 安装nodejs

此处提供nodejs下载地址：https://nodejs.org/zh-cn/download/

  • 大家根据自己电脑的配置选择适配的LTS（最新稳定版本进行下载，安装即可，此处略去安装步骤。

2.卸载旧版本

如果你现在正在用旧版的Vue-cli1.x或者Vue-cli2.x 需要先进行卸载；如果没有，请忽略此步骤

  • 打开命令窗口，用以下命令进行卸载：
npm uninstall vue-cli -g
复制代码

3.安装Vue-cli 3.x

  • 搭建Vue3.0的项目，必须依赖Vue-cli 3.0或者以上的
最低0.47元/天 解锁文章
青年夏日科技
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
如何搭建一个完整的Vue3.0+ts的项目步骤
01-18
所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。 我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址： ...
vue-h5-template:使用Vue3.0+Typescript+Vant搭建移动端H5页面开发所需的基础模板，并提供一些通用型的解决方案及扩展功能
05-03
VUE-H5-TEMPLATEVue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能。基本说明部分页面预览：首页商详...
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 293
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.config.js简介
热门推荐
shiyansama的博客
11-03 4万+
Vue.config.js 前言 我们在创建一个vue项目的时候，vue-cli并不会帮我们创建vue.config.js。而我在写暑假考核的时候就用到了这个东西： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W2aTpTUC-1604371001318)(C:\Users\15998\Pictures\Saved Pictures\vue.config.js.png)] 它其实是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个
vue3+ts 快速入门教程
最新发布
qq_59033587的博客
06-19 267
获取窗口大小
vue.config.js的全部配置
大乌鸦
07-17 3472
【代码】vue.config.js的全部配置。
【Vue】vue.config.js 的完整配置
DomCode
04-18 5415
之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。此刻，你需要创建vue.config.js文件。查看默认的webpack配置。
配置vue.config.js
爱吃猫的鱼
08-02 1276
配置vue.config.js
vue.config.js 全局配置
m0_61177365的博客
07-29 4838
用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置。可以看出，开启productionSourceMap后，浏览器控制台明确的告诉我们test这条结果的输出语句在main.js的20行。所以，source map的作用就是定位。
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
tsVant:vue3.0 + typeScript + vant做的h5移动端页面
03-25
【tsVant:基于Vue3.0、TypeScript与Vant构建的H5移动端页面】 在当前的Web开发环境中，Vue.js已经成为了非常流行的前端框架，尤其随着Vue 3.0的发布，其性能和功能得到了显著提升。而TypeScript作为JavaScript的超...
vue.config.js完整配置-超详细
05-26
vue.config.js配置 内容概要：vue.config.js完整配置-超详细 适合人群：工作1-3年的前端人员
vue.config.js常用配置详解
10-15
主要介绍了vue.config.js常用配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
vue项目打包优化---vue-config.js的常用配置项
weixin_42889916的博客
06-14 6630
本文主要讲了vue-config.js的几个常用配置项，和打包优化npm的插件。
vue config.js详解——vue config.js到底是什么，有什么作用?
wjsn520的博客
05-30 1万+
我们在做vue项目的时候，在根目录中肯定都看到过一个config.js文件，那么这个文件在整个项目中到底有什么作用呢？ vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。具体可以查阅Vue CLI配置参考：https://cli.vuejs.org/zh/confi
关于vue.config.js文件的配置介绍
weixin_50462008的博客
03-13 5978
关于vue.config.js的配置介绍 前言 关于使用cli3创建vue项目大家很熟悉,但是配置vue项目的设置,可能对于初学者大多一头雾水,刚入门的程序员对于配置代理,配置webpack打包也是一知半解(包括本人),所以我总结下如何配置,文章可能有的讲解有错,可以在评论区留下需要更改的地方,我会马上的更改 本项目我使用qiankun框架有使用的地方我会标记,大家略过即可 文件 在项目根目录下,记得不是src文件下,是项目根目录下创建vue.config.js文件 vue.config.js 文件 后我
vue.config.js配置文件
做名安静的coder
06-22 1万+
从vue-cli脚手架3.0版本后，Vue框架中前端跨域可在vue.config.js中进行配置，具体配置文件如下： vue.config.js配置文件 const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { publicPath: '/', // 根域上下文目录 outputDir: 'dist', // 构建输出目录 assetsDir
vue.config.js 配置
Lavante的博客
09-01 271
【代码】vue.config.js 配置。
用vue3.0 +vite +pinia +ts搭建一个vue的架子
05-24
好的，下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤： 1. 安装 Node.js，推荐使用 LTS 版本。 2. 安装 Vite： ``` npm init vite-app my-project ``` 这里我们使用 Vite 初始化一个新项目，名称为 my-project。 3. 安装依赖： ``` cd my-project npm install ``` 4. 安装 Vue 3.0： ``` npm install vue@next ``` 5. 安装 Pinia： ``` npm install pinia ``` 6. 安装 TypeScript： ``` npm install --save-dev typescript ``` 7. 配置 TypeScript： 在项目根目录下创建 `tsconfig.json` 文件，内容如下： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"], "exclude": ["node_modules"] } ``` 8. 安装 Pinia Devtools（可选）： ``` npm install @pinia/devtools --save-dev ``` 9. 在 `main.ts` 中进行配置： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 将 Pinia 实例挂载到 app 上 app.use(pinia) app.mount('#app') ``` 10. 编写组件： 在 `src` 目录下创建一个 `components` 目录，然后创建一个 `HelloWorld.vue` 组件： ```vue <template> <div> <h1>Hello, {{ name }}</h1> <button @click="increase">Increase</button> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'HelloWorld', setup() { const store = useStore() const name = store.getters.getName const count = store.state.count const increase = () => { store.commit('increase') } return { name, count, increase } }, }) </script> ``` 11. 在 `App.vue` 中使用组件： ```vue <template> <HelloWorld /> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld, }, }) </script> ``` 12. 运行项目： ``` npm run dev ``` 至此，我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青年夏日科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值