创建vue3项目（vite+js）

最新推荐文章于 2024-08-19 10:57:12 发布
最新推荐文章于 2024-08-19 10:57:12 发布
阅读量424 收藏
点赞数
文章标签： javascript 前端 vue vscode 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53989829/article/details/130411920
版权
本文指导如何在指定工作目录下创建Vue3项目，使用Vite作为构建工具，并以JavaScript为语言基础。首先，通过`npmcreatevite@latest`命令创建项目，然后命名并选择Vue框架。接着，进入项目目录安装npm依赖，最后运行`npmrundev`启动项目进行开发。
摘要由CSDN通过智能技术生成

创建vue3+vite+js项目

1.找到指定的工作目录，进入该目录下

cd + 目录路径

在这里插入图片描述

2.输入创建命令

npm create  vite @latest

Project name是项目名称，输入所创建的项目名称即可按回车

在这里插入图片描述
选择vue
在这里插入图片描述

选择JavaScript
在这里插入图片描述
显示如下表示创建成功

在这里插入图片描述

3.创建成功后，进入到项目中安装npm

cd demo
npm install

显示如下界面即为安装成功
在这里插入图片描述

4.运行项目

npm run dev

在这里插入图片描述
运行结果图

在这里插入图片描述

刀月一人捕快
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从 0 搭建 Vite 3 + Vue 3 Js版 前端工程化项目
csl125的博客
11-28 1442
前言之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。Vite 3 - 构建工具Vue 3Vue Router - 官方路由管理器Pinia - Vue Store你也可以选择vuexelement-plus - UI组件库Sass - CSS 预处理器Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js。
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint
2401_84446882的博客
04-29 1092
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue3项目学习：vite+vue3+js项目
weixin_42645490的博客
09-18 2011
使用vue-cli和vite创建vue3项目
Vite构建Typescript简易原生前端项目
Alex_CYX的博客
07-22 828
Vite 是一个现代前端构建工具，由 Evan You 尤雨溪（Vue.js 的创造者）开发。它的设计理念是通过提供极速的开发体验和高效的构建流程来简化前端开发。
从 0~1 创建 Vue3项目（Vue3 + JS）
qq_48937489的博客
05-10 776
我目前还是在用 JavaScripr开发项目，后面会学习 TypeScript ，也会专门写一篇《从 0~1 创建Vue3 + TS 项目》
速创建vue3 + vite 项目工程
最新发布
odogroup的专栏
08-19 886
2）安装Visual Studio Code 官网：终端新建终端。Visual Studio Code 安装插件vitevite 按钮终端新建终端。13）打开 vue3_vite 文件夹，将vue-project 拖入Visual Studio Code打开。14）打开终端窗口 输入npm install （需要检查是否在对应的目录）15）安装报错，首先清除npm缓存 npm cache clean --force 试试看能否解决，或者卸载16）
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 7万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
vite 搭建 js+vue3 全家桶 (三)
uniquepeng的博客
08-27 1476
vite 搭建 js+vue3 全家桶》系列全部完成， 其中包括vite创建vue3的js项目，集成vue-router+vuex+axios+sass的安装是使用方法，按照此方式已经搭建起一个基础的简单的项目结构
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
Vue3+vite+axios+route示例view-vue3.7z
03-17
Vite 是由 Vue.js 作者尤雨溪创建的新型前端构建工具，它利用了 ES 模块的原生导入功能，实现了更快的热更新和开发体验。Axios 是一个基于 promise 的 HTTP 库，常用于前端向后端发起请求，处理数据。Route 是 Vue....
Vue3之构建vite项目
jxbook的博客
03-15 83
npm => npm init vite@latest => vite-project(输入你的项目名称) => 选择模板vue、react等 => 选择JavaScript、typescript等 => 安装依赖 npm install => 切换到目录 cd projectName => 启动项目 npm run dev。src=>components 下面用来存放我们的组件。vite.config.ts vite的具体配置文件。src=>assets 下面可以存放可编译的静态资源。
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
油墨香^-^的博客
12-05 2306
Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求，如果想构建 Vite 3 + Vue 3 + JavaScript 项目，那社区模板不太能满足您的需求，因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建，对于不熟悉 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的
Vue3+Vite+Pinia+Naive后台管理系统搭建之一：基础项目构建
weixin_64684095的博客
03-30 931
手摸手~，新手+小白 构建vue3.0项目 教程~
vue3 + jsx 简单语法代码模板
ccyynmb的博客
08-01 239
代码】vue3+jsx简单语法代码模板。
Vue脚手架（包含Vue3项目创建、vue.config.js配置）
kimi
03-11 1073
Vue脚手架（包含Vue3项目创建、vue.config.js配置）
vue3.0 技术栈：vue3 + js + axios + less
955姜太根的博客
03-13 912
vue3笔记
vue3+vite+js+router+vueX+组件一键导入（源码）
Pan_peter的博客
06-22 893
vue3+vite+js+router+vueX+组件一键导入（源码） 一直想自己做一个简单脚手架，方便自己做点简单的demo 网上开源也找不到，更多都是太重了，或者又太轻了 今天把这个几个都揉在一起，方便后面做点小玩意
创建一个vue3+vite+typescript的项目
07-28
要创建一个Vue3 + Vite + TypeScript的项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm。 2. 打开终端或命令提示符，并进入你想要创建项目的目录。 3. 执行以下命令来创建一个新的Vue项目： ``` npm init vite@latest ``` 这将使用Vite脚手架工具来创建一个新的项目。 4. 在创建项目的过程中，你将被要求选择一个模板。选择"vue-ts"模板，这将创建一个Vue3 + TypeScript的项目。 5. 完成项目创建后，进入项目目录： ``` cd your-project-name ``` 6. 安装项目所需的依赖： ``` npm install ``` 这将安装Vue、Vite、TypeScript和其他必要的依赖。 7. 启动开发服务器： ``` npm run dev ``` 这将启动一个本地开发服务器，并在浏览器中打开你的应用程序。 现在，你已经成功创建了一个Vue3 + Vite + TypeScript的项目。你可以根据需要进行二次开发，并在App.vue文件中编写根组件。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [Vue3 + Vite2 + TypeScript4搭建企业级项目框架](https://blog.csdn.net/qq_39024950/article/details/131110151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3+Vite+TypeScript常用项目模块详解](https://blog.csdn.net/qq_43649937/article/details/131105171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值