快速部署和启动Vue3项目

快速入门Vue3

一、安装 Node.js 和 npm

二、创建 Vue 3 项目

1. 使用 Vue CLI 创建
  • 这是Vue2的创建方式,因为目前Vue2已经停止维护所以建议使用下面的Vite来创建Vue3项目。
2. 使用 Vite 创建
  • Vite 是一个现代的前端构建工具,它提供了快速的开发体验,也可以用来创建 Vue 3 项目。

    • 首先,安装 Vite:

      npm create vite@latest

    • 这里 my-vue3-project 是自己的项目名称,之后会让选择一些配置,不了解的通通可以回车默认,因为后期还可以重新配置。

    • 进入项目目录:

      cd my-vue3-project

    • 安装项目依赖:

      npm install

    • 启动开发服务器:

      npm run dev

    • 可以直接输入小写字母o打开浏览器,或者手动打开浏览器访问 http://localhost:3000(端口号每个人可能不一样),查看项目运行情况。

三、项目结构介绍

  • public :存放静态资源,如 index.html,它是项目的入口 HTML 文件。
  • src :存放项目的源代码。
    • main.js:是 Vue 应用的入口文件,负责创建 Vue 实例。
    • App.vue:是项目的根组件。
    • components:存放项目中的自定义组件。
    • assets:存放图片、样式表等静态资源。
    • router:如果项目使用了 Vue Router 进行路由管理,相关配置文件会存放在这个目录。
    • store:如果项目使用了 Vuex 进行状态管理,相关代码会存放在这个目录。
  • node_modules:存放项目依赖的模块,由 npm 自动安装生成。
  • package.json:定义了项目的依赖、脚本等信息。
  • vue.config.js:可选的配置文件,用于自定义 Vue CLI 的配置。

四、开发 Vue 3 项目

1. 编写组件
  • 组件是 Vue 应用的基本构建块。在 src/components 目录下创建新的 .vue 文件来定义组件。

  • 路由和状态管理(可选)

  • 如果项目需要多页面功能,可以使用 Vue Router 进行路由管理。在 src/router 目录下配置路由。

  • 对于复杂的状态管理,可以使用 Vuex。在 src/store 目录下定义状态和操作逻辑。

五、构建和部署

  • 当项目开发完成后,可以使用以下命令构建项目:

    • 使用 Vue CLI 创建的项目:

      npm run build

    • 使用 Vite 创建的项目:

      npm run build

  • 构建完成后,会在项目目录下生成一个 dist 文件夹,里面包含了构建后的静态资源文件。你可以将这些文件部署到任何支持静态文件服务的服务器上,如 Nginx、Apache 等,或者使用云平台的静态网站托管服务来部署你的 Vue 3 应用。

相关推荐
虾条_花吹雪5 分钟前
Chat Model API
java
双力臂40411 分钟前
MyBatis动态SQL进阶:复杂查询与性能优化实战
java·sql·性能优化·mybatis
烛阴30 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
六毛的毛41 分钟前
Springboot开发常见注解一览
java·spring boot·后端
程序漫游人1 小时前
centos8.5安装jdk21详细安装教程
java·linux
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
超级码.里奥.农2 小时前
零基础 “入坑” Java--- 七、数组(二)
java·开发语言
hqxstudying2 小时前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
挺菜的2 小时前
【算法刷题记录(简单题)002】字符串字符匹配(java代码实现)
java·开发语言·算法
A__tao2 小时前
一键将 SQL 转为 Java 实体类,全面支持 MySQL / PostgreSQL / Oracle!
java·sql·mysql