从零开始搭建一个 Vue 3 + Vite 的项目

使用 Vite 搭建一个基于 Vue 3 的新项目非常简单。Vite 是一个现代化的前端构建工具,它提供了极快的冷启动和热更新速度,非常适合开发 Vue 3 项目。

以下是详细的步骤,帮助你从零开始搭建一个 Vue 3 + Vite 的项目:


1. 安装 Node.js 和 npm

确保你的开发环境已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已安装:

bash复制

复制代码
node -v
npm -v

如果尚未安装,请前往 Node.js 官网 下载并安装。


2. 创建项目

使用 Vite 提供的命令行工具创建新项目。打开终端或命令行工具,运行以下命令:

bash复制

sql 复制代码
npm create vite@latest my-vue3-vite-project -- --template vue
  • my-vue3-vite-project 是你的项目名称。
  • --template vue 指定使用 Vue 3 的模板。

如果你想要使用 TypeScript,可以将模板改为 vue-ts

bash复制

sql 复制代码
npm create vite@latest my-vue3-vite-project -- --template vue-ts

3. 进入项目目录

bash复制

bash 复制代码
cd my-vue3-vite-project

4. 安装依赖

安装项目所需的依赖:

bash复制

复制代码
npm install

5. 启动开发服务器

运行以下命令启动开发服务器:

bash复制

arduino 复制代码
npm run dev

Vite 会自动启动开发服务器,并在浏览器中打开项目。默认地址通常是 http://localhost:3000


6. 项目结构

创建完成后,你的项目目录结构大致如下:

复制

arduino 复制代码
my-vue3-vite-project/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── vite-env.d.ts
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.js

7. 项目文件说明

  • src/main.js:项目的入口文件,负责挂载 Vue 应用。
  • src/App.vue:根组件,是整个应用的入口组件。
  • src/components/HelloWorld.vue:一个示例组件。
  • vite.config.js:Vite 的配置文件。
  • package.json:项目的依赖和脚本配置。

8. 编写代码

修改 src/App.vue

vue复制

xml 复制代码
<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <HelloWorld :msg="message" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'Hello Vue 3 + Vite!'
    };
  }
};
</script>

<style>
.app {
  text-align: center;
  margin-top: 50px;
}
</style>

修改 src/components/HelloWorld.vue

vue复制

xml 复制代码
<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

9. 运行和调试

  • 启动开发服务器:

    bash复制

    arduino 复制代码
    npm run dev
  • 修改代码后,Vite 会自动热更新,无需手动刷新页面。


10. 构建生产版本

当你准备部署应用时,运行以下命令生成生产版本:

bash复制

arduino 复制代码
npm run build

构建后的文件会生成在 dist/ 目录中,你可以将这些文件部署到任何静态服务器上。


11. 部署

dist/ 目录的内容部署到静态服务器(如 Netlify、Vercel 或 GitHub Pages)即可。


总结

通过 Vite 搭建 Vue 3 项目非常简单且高效。Vite 提供了快速的开发体验和现代化的工具链支持,非常适合现代前端开发。如果你有任何问题或需要进一步扩展功能,可以随时查阅 Vite 官方文档Vue 3 官方文档

相关推荐
2301_764441337 分钟前
小说文本分析工具:基于streamlit实现的文本分析
前端·python·信息可视化·数据分析·nlp
jackl的科研日常21 分钟前
“个人陈述“的“十要“和“十不要“
前端
一个处女座的程序猿O(∩_∩)O25 分钟前
Vue 中 this 使用指南与注意事项
前端·javascript·vue.js
大有数据可视化1 小时前
数字孪生像魔镜,映照出无限可能的未来
前端·html·webgl
一个处女座的程序猿O(∩_∩)O1 小时前
使用 Docker 部署前端项目全攻略
前端·docker·容器
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_10空状态的固定表头表格
前端·javascript·vue.js·ecmascript·deepseek
天马37981 小时前
Vue 概念、历史、发展和Vue简介
前端·javascript·vue.js
小小鸭程序员2 小时前
NPM版本管理终极指南:掌握依赖控制与最佳实践
java·前端·spring·npm·node.js
KL's pig/猪头/爱心/猪头2 小时前
lws-minimal-ws-server前端分析
前端
TheK2 小时前
【源码分析】 一文搞清楚React全流程
前端