使用vite搭建vue项目

最新推荐文章于 2025-02-18 09:50:37 发布

原创最新推荐文章于 2025-02-18 09:50:37 发布

· 647 阅读

0 ·

版权

文章标签：

#vue.js #前端 #typescript

本文介绍了如何使用Vite搭建Vue项目，包括输入命令创建项目，选择Vue框架，安装依赖并配置启动方式，最后启动项目进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、输入命令

npm init vite@latest

2、输入项目名称选择框架

3、这样一个项目就搭建完成了。

4、但是没有路由没有依赖，执行以下命令。

npm install vue-router@4

5、安装完成

6、启动项目 npm run dev 或者更改启动方式 npm run serve

这样不管执行dev还是serve都可以启动项目了。

7、或者在 package.js 更改启动地址

8、启动

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

emo王子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何使用Vite构建vue项目

m0_74825223的博客

12-21

1769

由3部分组成：template 写html代码、script js脚本vue3+ setup语法方式、style css样式，scoped限定只在本片段中生效，每个组件都应该有一个清晰的职责和数据流，没有顺序关系。

vue3+vite 创建工程化项目

最新发布

weixin_42339193的博客

04-19

921

在初始化过程中，根据提示选择合适的配置选项，比如 JavaScript 风格、项目使用的框架等。初始化完成后，项目根目录会生成一个 .eslintrc.js 文件，可根据需求进一步修改规则。在src下创建一个简单的 store src/stores/counter.js：用来存储pipa储存数据。在代码中可以通过 import.meta.env.VITE_API_BASE_URL 来访问该环境变量。配置好路由页面和路由后，我们将它从入口文件（main.js,app.vue)导入进项目，

参与评论您还未登录，请先登录后发表或查看评论

使用Vite创建VUE项目

白百柏在帝都

02-23

1265

很久没有接触前端的技术了，一下子就冒出来很多技术，有的根本没见过呀，vue变成了3，vue-cli也变得不好用了，说vite很好用，那就创建个项目试试吧。没错，就是这么丝滑，一个vite+vue的项目就创建完了。创建速度确实不慢，然后按照提示运行这三条命令，就可以启动创建好的demo了。有一点前提哈，电脑上要有node，据说版本还不能太低呢，要求node.js版本>=12.0.0。但是我用这个命令创建的时候就告诉我不行，我就按系统提示的命令创建了。我看有很多博主用的创建命令都是这个。

Vite构建vue项目

雷神乐乐的博客

11-27

2148

node.js、vite、vue-router、跨域与vue项目优化配置

vite构建vue项目

m0_73420146的博客

07-03

1205

---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------

如何用vite创建vue项目

weixin_46886988的博客

02-07

2658

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。在router文件夹下新建index.js文件，在views文件夹下新建index.vue文件。注意：router 文件夹、index.js文件、views 文件夹、index.vue文件最好不要改名字，因为全局配置中会用到。（2）输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。

使用vite 搭建vue 3的项目

weixin_52984349的博客

11-30

4133

使用vite 搭建vue 3的项目

使用vite快速搭建vue3项目

weixin_63776631的博客

04-23

1048

vite是一个现代化的前端构建工具，它旨在提供快速的开发体验和优化的构建性能。vite基于ES模块的原生浏览器支持，利用现代浏览器的特性来实现快速的热更新和构建。它支持Vue、React、Svelte等框架，并提供了丰富的插件系统和开箱即用的特性，使开发者能够更高效地构建现代化的Web应用程序。（当然在在vite的官方文档中你可以看到更具体的介绍）

vite搭建vue3项目

weixin_41166682的博客

09-06

1611

由于html文件中不能跑App.vue文件，需要安装一个插件：执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装。还需再安装element-plus:执行命令： npm i element-plus -D然后就可以再组件中使用点击一下 element-plusUI了。配置vite.config.js文件，如果npm run dev不报错不需要配置以下代码。在组件中使用naive-ui会自动寻找依赖，不需要配置这些组件库直接用就好了。

保姆级教你用Vite构建第一个Vue3项目

qwerwejgw的博客

02-18

4969

vite开箱即用，无需任何配置

【详细步骤】使用Vite创建Vue3项目

HQC66666的博客

05-09

9038

Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。

使用vite构建一个vue项目

06-02

781

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如：我想构建一个vue+ts的项目。

使用vite创建vue项目步骤

hjw15910531612的博客

09-07

3089

使用vite创建vue项目具体步骤

vite创建一个Vue项目

Smile1552911411的博客

06-05

478

版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。步骤如下：给自己的项目取个名字，选择框架和语言。cd进入我们创建的项目，安装依赖，启动就可以啦。

创建基于vite的vue项目

m0_69298614的博客

04-05

6126

3.验证是否安装好：打开Windows的cmd命令行，输入npm --version，输出版本信息则安装成功，如下图所示。在src下新建plugins/nutui.js，以后需要增加组件只需要在该文件中添加即可。2.检验是否安装好：在cmd命令行中输入yarn -version，若输出版本信息则表示安装成功，如下图所示。node.js自带npm包管理工具，yarn也是nodejs下的包管理工具，可以根据自身选择适合的工具。//export导出，只有导出了，才能让别的文件进行import。

vite 创建vue项目

weixin_43805439的博客

06-16

801

vite创建vue项目

利用vite创建vue项目

qq_41199502的博客

04-11

1942

在运行 npm install 命令之后，npm 还会自动更新 package.json 文件中的 package-lock.json（或 yarn.lock）文件，以记录确切的包版本和依赖关系。在 Vite 项目中，vite.config.ts 文件是一个 TypeScript 文件，位于项目根目录下。在HBuilderX工具上打开刚刚创建前端项目，修改 vite.config.ts 文件中的项目启动端口号，添加如下内容，然后保存文件。需要注意的是，vite.config.ts 文件是可选的。

通过vite从0-1搭建一个vue-ts项目

阿琰a_的博客

04-22

1835

vite是目前比较主流的前端构建工具，能够提高前端开发体验，所以这里的构建工具选择了vite。

Vite 脚手架搭建 Vue项目

灵魂学者的博客

07-22

2611

在之前讲过搭建 Vue 项目的脚手架 Vue-Cli，Vue-Cli目前是处于这个维护阶段，随着Vue3的到来官方推荐使用 Vite 来搭建Vue项目，Vite是一个轻量级的、速度极快的构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。那么本篇就来使用Vite脚手架搭建Vue项目，同时也提供在VScode中需要安装哪些插件可以帮助使用者来更好的编写代码。

vite搭建vue2的项目

04-03

### 如何使用 Vite 搭建 Vue 2 项目尽管 Vite 官方主要针对 Vue 3 提供支持，但对于 Vue 2，可以通过安装特定插件来实现兼容性。以下是关于如何使用 Vite 创建 Vue 2 项目的详细说明。 #### 配置环境首先，在创建 Vue 2 项目之前，需要确保开发环境中已正确配置 Node.js 和 npm 或者其他包管理工具（如 `pnpm`）。接着按照以下方式操作： 1. **初始化项目** 使用命令行工具初始化一个新的项目文件夹并进入该目录： ```bash mkdir my-vue2-project && cd my-vue2-project ``` 2. **安装必要的依赖项** 删除默认的 Vue 插件 (`@vitejs/plugin-vue`) 并替换为专门用于 Vue 2 的插件 (`@vitejs/plugin-vue2`)。具体步骤如下： - 初始化 package.json 文件： ```bash pnpm init -y ``` - 添加 Vue 2 及其对应的 Vite 插件： ```bash pnpm add vue@2.7.16 pnpm add -D @vitejs/plugin-vue2@2.3.1 vite ``` 3. **设置 Vite 配置文件** 在项目根目录下创建名为 `vite.config.js` 的配置文件，并引入所需的插件以支持 Vue 2： ```javascript import { defineConfig } from 'vite'; import vuePlugin from '@vitejs/plugin-vue2'; export default defineConfig({ plugins: [vuePlugin()], }); ``` 4. **编写基本组件结构** 接下来可以定义简单的 `.vue` 单文件组件作为应用的基础部分。例如，创建一个基础页面模板： ```html  <template> <div id="app"> Hello, this is a Vue 2 project with Vite! </div> </template> <script> export default { name: 'App', }; </script> ``` 5. **启动本地服务器** 执行以下命令运行开发服务器： ```bash pnpm run dev ``` 如果一切正常，则可以在浏览器中访问指定地址查看效果[^4]。通过上述流程即可成功构建基于 Vite 的 Vue 2 开发环境。值得注意的是，虽然此方法可行，但由于缺乏官方维护和支持，未来可能会遇到更多兼容性和性能上的挑战。 --- ### 示例代码片段展示下面是一个完整的 `main.js` 实现例子，它展示了如何挂载应用程序实例到 DOM 上： ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 此外还可以参考简单路由功能集成案例中的部分内容[^3]: ```html  <template> <div> <h1>这是主页！</h1> <button @click="navigate">前往 About 页面</button> </div> </template> <script> export default { methods: { navigate() { this.$router.push('/about'); // 假设存在全局路由器对象 }, }, }; </script> ``` ---