vue3学习 【2】vite起步和开发工具基本配置

最新推荐文章于 2024-05-10 18:35:03 发布
最新推荐文章于 2024-05-10 18:35:03 发布
阅读量497 收藏 6
点赞数 6
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23370345/article/details/135414477
版权

vite的简介

官方文档
刚起步学习，所以我们只需要按照官方文档的入门流程即可。推荐阅读一下官网的为什么使用vite
vite目前需要的node版本是18+，可以参考上一篇文章的安装nvm，用来进行多版本的node管理。

vite安装与使用

npm create vite@latest

执行完成后，回车提示选择模板，这里选择vue然后回车：
选择模板
选择类型，推荐选择TypScript毕竟vue3一个特点就是对Ts的支持：
在这里插入图片描述
安装完成：（可能部分人会有额外步骤，按照选项执行即可）
在这里插入图片描述

cd vite-project
npm install 
npm run dev

执行完上述命令 我们就启动了一个最基础的vue3项目；访问
http://localhost:5173

即可
在这里插入图片描述

vue模版介绍

vue官方推荐了很多模版，可以使用命令行执行，这样可以少一些回车操作，建议阅读官方文档

shao.zq
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vite项目启动都做了什么？
梅花寺
01-16 2217
主要了解了下关于 vite 启动过程中，文件处理、热更新的执行过程，源代码中有很多细节处理，有兴趣可以去深入研究一下，在此过程中，了解了一些 npm 包及其作用，如cacpicocolorschokidar等，以及http缓存的应用，还有发现源码中会有很多map、set数据结构的使用，包括数据增、删、改、是否存在等，带着问题继续探索。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
vite2 + vue3构建多页应用-源码demo
10-15
Vue3 提供了更加高效、模块化和可扩展的组件系统，而Vite2则是一款由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生加载能力，大大提升了开发时的性能。本项目“vite2 + vue3构建多页应用-源码demo”将...
开启vite之旅-初始篇
coderMozart的博客
06-29 217
自古开天辟地之作，必会影响万物。 vite作为挑战webpack地位的新进工具，是否有挑战老大哥webpack的资格呢？ 让我们来一探究竟。 首先映入眼帘的是熟悉的命令行，代表着vite的诞生 npm init @vitejs/app 再次输入以下命令，见证奇迹的时刻到了 cd my-project npm install npm run dev 奇迹之点在于启动无感的启动时间，此处应有掌声！！！ 483毫秒，我的个天呢，这是神一般的速度了！！！ 探究其原因在于，vite采用了esbuild,请看下图
vue3 用vue-cli和vite启动项目
树上骑个猴的博客
09-06 7182
1.用vue-cli启动项目 2.用vite启动项目
vite构建包本地启动
Java小白白的博客
05-10 363
在本地启动 Vite 前端项目并进行开发服务器部署需要安装一些 npm 包。这是用于在开发过程中实时预览项目的服务器。目录启动一个静态文件服务器，通常在。这会启动一个开发服务器，通常在。替换为你实际的项目目录。
vite基本配置教程
夏天的博客
10-14 2万+
最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要改动的东西，以及踩的坑。vite官网：https://vitejs.cn。
Vite基本使用
m0_66711291的博客
05-28 9723
文章目录什么是vite创建项目1. 输入2. 安装vite3. 配置项目的基本信息4. 预览效果配置项目配置项配置vue.config.jsvue-routervuexaxiosless 什么是vite vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。 总之就是一个打包工具，也可以代替脚手架来创建项目 创建项目 按照下面的命令可以创建出一个项目 1. 输入 npm init vite@latest 或者 npm create vite@latest 2
基于Vue 3和Vite的TypeScript开发模板设计源码
最新发布
05-25
本源码为基于Vue 3和Vite的TypeScript开发模板设计，包含11个TypeScript文件、6个JSON...该项目旨在为用户提供一个全面、便捷的开发模板解决方案，通过Vue 3、Vite和TypeScript技术的结合，为用户带来高效的开发体验。
vue3+vite2实战（用于新手学习）.zip
03-03
vue3+vite2实战（用于新手学习）.zip computed特性 是计算值， 应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行...
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt,用于解释为什么使用新技术和框架
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
Vite基本配置
grx1125的博客
03-24 3393
vite的基本配置，包含vite背后帮我们构建的一些插件、构建的部分原理。
vite环境基础配置
qq_42351255的博客
06-15 1329
【代码】vite环境基础配置。
利用Vite或者webpack创建Vue项目，并启动Vue项目
杜晓帅~的博客
09-04 6214
一篇文章带你了解如何使用Vite或者webpack打包Vue项目，并成功启动
Vite 基本配置及原理
weixin_43443341的博客
11-02 7111
Vite 基本配置及原理
Vue项目创建与启动（2023超详细的图文教程）
Alphamilk的博客
11-01 1万+
一、下载node.js ， 二、下载vue-cli与webpack插件 ， 三、项目初始化(项目配置详细信息) ，四、项目启动 ， 五、Vue项目工程结构（扩展知识）
vite 简要配置
无心使然云中漫步
12-27 445
通过配置alias来定义路径的别名。env.development文件。安装ts的类型声明文件。
vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤
热门推荐
ispaomoya博客
01-13 4万+
vite入门，认识vite，配置vite，了解vite脚手架
【vue3】Vue3 + Vite 项目搭建
weixin_45034639的博客
01-28 2357
Vue3 + Vite + Vant UI
vue3 vuerouter vite pinia组件化开发实战入门
01-26
Vue3是一种流行的JavaScript框架，用于构建用户界面。Vue Router是Vue.js的官方路由器，用于实现单页面应用程序的导航功能。Vite是一个快速的Web开发构建工具，具有即时重载和快速的开发体验。Pinia是一个简单、快速、类型安全的状态管理库。 使用Vue3、Vue Router、Vite和Pinia进行组件化开发实战入门非常简单。 首先，我们需要安装Vue3和相关的库。可以使用npm或yarn来安装它们。在项目的根目录中运行以下命令： ``` npm install vue@next vue-router@next @pinia/vue@next vite --save ``` 安装完成后，我们可以开始创建一个Vue应用程序。在项目的根目录中创建一个`src`文件夹，并在其中创建一个`main.js`文件。在`main.js`文件中，我们需要导入Vue、Vue Router和Pinia，并创建一个Vue实例。代码示例如下： ```javascript // main.js import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import { createPinia } from 'pinia'; // 导入组件 import App from './App.vue'; // 创建路由 const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由 { path: '/', component: Home } ] }); // 创建 Pinia 实例 const pinia = createPinia(); // 创建 Vue 实例 const app = createApp(App); // 使用路由和 Pinia app.use(router); app.use(pinia); // 挂载应用 app.mount('#app'); ``` 现在，我们可以创建一个简单的Vue组件。在`src`文件夹中创建一个名为`App.vue`的文件，并在其中定义一个组件。在组件中，我们可以使用Pinia来管理组件的状态，使用Vue Router来处理导航。 ```html <!-- App.vue --> <template> <div> <router-view></router-view> <button @click="increment">增加计数器</button> <p>{{ count }}</p> </div> </template> <script> import { defineComponent } from 'vue'; import { useCounter } from '../store'; export default defineComponent({ setup() { const counter = useCounter(); const increment = () => { counter.increment(); }; return { count: counter.count, increment }; } }); </script> ``` 在上述示例中，我们创建了一个Counter组件，其中包含一个用于增加计数器的按钮和一个显示计数器值的段落。我们使用Pinia的`useCounter`钩子来访问和修改计数器的状态。 最后，在项目的根目录中运行以下命令启动应用程序： ``` npm run dev ``` 以上就是使用Vue3、Vue Router、Vite和Pinia进行组件化开发实战入门的一个简单示例。通过深入学习这些工具和框架，您将能够构建更复杂、功能丰富的应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值