vite工具，创建Vue项目，并运行

原创 已于 2023-04-23 11:25:40 修改 · 387 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

于 2023-02-01 00:03:37 首次发布
该文详细介绍了如何安装Node.js并验证其版本，以及如何使用npm初始化Vue.js项目。特别指出，可以通过改变目录来避免在C盘创建项目，并推荐使用淘宝npm镜像以提高国内安装速度。在项目设置完成后，文章指导了运行npmrunlint和npmrundev以启动项目开发环境。

1.安装nodejs，并且cmd  全局 node -v 和npm -v均可打印版本信息；

2.npm init vue@latest  ,Y一直到底；（可更改项目名称）

注意：如果不想创建项目在C盘，通过d:可以更改创建目录；

3.第2步成功后会出现如下图


4.接下来执行：

（1）cd vue-project

（2）npm install  默认安装国外淘宝镜像 比较慢

改善方案：安装国内的

npm config set registry https://registry.npm.taobao.org

npm install --registry=https://registry.npm.taobao.org

安装成功后，npm config get registry 打印一遍

如下图：

 5.接着执行，npm run lint

最后，npm run dev

如下图：

Smart_11
关注
Vue3 - Vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）
🏆 前端领域优质创作者
08-24 1万+
前言 为什么使用vite（官方解释）：https://vitejs.cn/guide/why.html 它是一款由尤雨溪开发的新工具，旨在代替webpack，利用浏览器现已支持ES6的基础，遇到import会发送一个请求去加载文件，vite拦截这些请求做一些预编译，省去了冗长的打包时间，从而提升开发体验，具体详见官方网站。 第一步：安装vite 也可使用yarn进行安装，本篇基于npm进行。 在任意位置终端执行如下代码： npminstall-gcreate-vit
vue3-vite搭建、运行
热门推荐
前端-尔嵘
02-22 1万+
1.首先得保证你的电脑安装的node版本是12+的 2.输入以下命令自动化搭建vite-vue3项目 # npm 6.x npm init vite@latest vue3-admin --template vue # npm 7+, 需要额外的双横线： npm init vite@latest vue3-admin -- --template vue # yarn yarn create vite vue3-admin --template vue # pnpm pnpm create vit
Vite 脚手架 搭建 Vue项目
灵魂学者的博客
07-22 2798
在之前讲过搭建 Vue 项目的脚手架 Vue-Cli，Vue-Cli目前是处于这个维护阶段，随着Vue3的到来官方推荐使用 Vite 来搭建Vue项目，Vite是一个轻量级的、速度极快的构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。那么本篇就来使用Vite脚手架搭建Vue项目，同时也提供在VScode中需要安装哪些插件可以帮助使用者来更好的编写代码。
(通过Vite方式)Vue 3 项目运行过程详解（从代码到浏览器）
全局可见
03-30 1947
Vite在开发阶段通过按需加载和热更新大幅提升效率，而生产构建时则通过优化确保代码高性能、低体积。：Vue 3项目的运行过程就像一个流水线——javascript复制代码。
Vite 创建 Vue3 项目完整指南：从初始化到运行（附实操代码）
jingpide9527的博客
09-12 1980
摘要： 本文详细介绍使用Vite构建Vue3项目的完整流程。从Node.js环境准备（≥14.18.0）到两种初始化方式（npm create vite快速创建与create-vue生产级配置），解析项目目录结构，并重点讲解Vite的核心配置（端口、代理、路径别名）、全局样式和路由设置。提供开发调试与生产打包优化方案（如按需引入、图片压缩），并解答端口占用、热更新失效等常见问题。Vite凭借秒级启动和即时热更新，结合Vue3的组合式API，能显著提升开发效率，是构建现代Web应用的高效工具链。
如何使用Vite构建vue项目
m0_65814219的博客
07-18 3052
由3部分组成：template 写html代码、script js脚本vue3+ setup语法方式、style css样式，scoped限定只在本片段中生效，每个组件都应该有一个清晰的职责和数据流，没有顺序关系。
Vue 3项目的运行过程
qq_43435403的博客
12-10 683
使用Vite构建Vue3项目后，当执行yarn dev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将srcApp.vue组件渲染到index.html文件的指定区域。src\App.vue文件Vue3项目是由各种组件组成的，srcApp.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。index.html文件index.html文件是页面的入口文件，该文件中预留了用于被src。
vue3.0+vite工程项目搭建运行
总结前端开发中遇到的问题，分享前端知识
02-16 1295
## 创建工程 npm init vite-app vue3-vitedemo ## 进入目录 cd vue3-vitedemo ## 安装依赖 npm install ## 运行 npm run dev
vue3+vite创建项目-（傻瓜式教程）
01-19
2. 创建Vue3项目 接下来，使用Vite创建一个新的Vue3项目： ```bash create-vite my-vue3-project ``` 这里的"my-vue3-project"是你的项目名称，你可以根据需要进行更改。 3. 进入项目目录并启动开发服务器 创建...
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2719
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
Vue脚手架的安装以及创建Vue2，Vue3、Vite+Vue3项目
weixin_53752776的博客
09-30 1745
Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 应用程序。它提供了一套完整的工具链来帮助开发者高效地构建复杂的应用程序。Vue CLI 包括了创建新项目、提供内置的现代化构建设置、支持热重载（HMR）、以及一个插件系统来扩展其功能等特性。对于第一次接触Vue小伙伴的温馨提示：在我们安装vue之前我们需要先安装Node.js，我们需要在node环境中来安装和运行Vue。
Vue 使用 vite 创建项目
xiaowude_boke的博客
08-14 3550
创建vite项目
vue3.0-vite项目、组件
qq_52822043的博客
04-20 5509
1.前端工程化 1） 2） 3） 1. 1） 2） 3） 1. 1） 2） 3）
使用vite打包并部署vue项目到nginx
突破编程
11-08 4211
Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤：一、安装 Node.js 和 npm首先，确保计算机上安装了 Node.js 和 npm（Node 包管理器）。具体安装方法这里不再赘述，可以在命令行中运行 和 来检查它们是否已安装以及安装的版本。二、全局安装 Vite接下来，需要全局安装 Vite。打开命令行或终端，并运行以下命令： 或者，如果使用的是 Yarn，可以运行： 注意：从
使用vite从开始搭建vue项目
weixin_64608867的博客
04-01 1686
一、创建项目 这里根据vite的兼容性说明，要求node.js版本>=12.0.0 提供了npm,yarn,两种包管理工具的创建方式 用NPM： npm init @vitejs/app 使用yarn： yarn create @vitejs/app 然后按照提示进行操作！ 这里我们使用yarn来创建一个vue项目（这里我使用的Mac，与PC步骤基本一致） 在我们想要创建的项目都目录下打开终端（命令行工具） 输入如下命令 // Mac 其中sudo是获取
React搭建Vite项目及各种项目配置
分享前端工程化、动效魔法与性能之舞！
07-23 4412
创建Vite项目，在操作系统的命令终端，输入以下命令：yarn create vite，输入完成以后输入项目名称、选择开发框架，选择开发语言，如下图所示，即可完成项目创建。注意事项：1. Node版本必须符合要求，否则安装过程中会提示版本不对；2. 由于上面是使用的yarn来安装的，所以需要首先通过npm来全局安装yarn......
vue+vite项目搭建的运行流程
qq_66202369的博客
02-07 257
3.npm install 下载node_modules。项目的创建：1.npm create vite 选择框架选择JS/TS 命名项目名。
【前端】⭐️通过vite构建项目
z2768557792的博客
06-27 403
目前TypeScript语言使用的繁多，而这次模板是 Vite 项目（monorepo）
通过vite从0-1搭建一个vue-ts项目
阿琰a_的博客
04-22 1996
vite是目前比较主流的前端构建工具，能够提高前端开发体验，所以这里的构建工具选择了vite。
使用vite命令创建vue项目
最新发布
11-13
使用 `Vite` 创建 Vue 项目非常简单快捷。Vite 是由 Vue 作者尤雨溪开发的现代前端构建工具，它利用浏览器原生 ES 模块导入功能实现快速的热更新和按需编译，极大地提升了开发体验。 --- ### ✅ 使用 Vite 创建 Vue 项目的步骤： 打开终端（命令行工具），执行以下命令： ```bash npm create vite@latest my-vue-app --template vue ``` > 注：`my-vue-app` 是你的项目名称，可以自定义。 --- ### 📦 命令解释： - `npm create vite@latest`：等价于 `npx create-vite@latest`，用于运行 Vite 的创建脚本。 - `my-vue-app`：项目文件夹名称。 - `--template vue`：指定模板为 Vue。 如果你希望使用 TypeScript 版本，可以使用： ```bash npm create vite@latest my-vue-app --template vue-ts ``` --- ### 🔧 后续操作： 1. 进入项目目录： ```bash cd my-vue-app ``` 2. 安装依赖： ```bash npm install ``` 3. 启动开发服务器： ```bash npm run dev ``` 这会启动本地开发服务器，默认地址是 `http://localhost:5173`（端口可能因占用而变化）。 --- ### 🗂️ 项目结构简要说明： ```text my-vue-app/ ├── public/ # 静态资源（直接复制） ├── src/ # 源码目录 │ ├── assets/ # 静态资产（图片、样式等） │ ├── components/ # 可复用组件 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # 主 HTML 文件（Vite 中是模块入口） ├── vite.config.js # Vite 配置文件 ├── package.json └── ... ``` --- ### 💡 示例：`main.js` 内容（Vue 3 + Composition API） ```js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` --- ### ✅ 总结 通过 `vite` 创建 Vue 项目的优势： - 极快的冷启动 - 即时的热模块替换（HMR） - 更优的开发体验 - 支持 Vue、React、Svelte 等多种框架 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值