0基础使用Vite+Vue3创建项目

梦里梦外; 2024-03-27 13:45 68阅读 0赞

### 什么是 Vue？ ###

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

**声明式渲染：** Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。  
**响应性渲染：** Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

### 渐进式框架 ###

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
    在任何页面中作为 Web Components 嵌入
    单页应用 (SPA)
    全栈 / 服务端渲染 (SSR)
    Jamstack / 静态站点生成 (SSG)
    开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

### 快速上手 ###

每一个成功时刻都值得被记录~

**创建一个 Vue 应用**

**前提条件：**

*  熟悉命令行
 *  已安装 16.0 或更高版本的 [Node.js][]

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：

> npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes
    
      Scaffolding project in ./<your-project-name>...
      Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd  
> npm install  
> npm run dev

***你现在应该已经运行起来了你的第一个 Vue 项目！***  
![在这里插入图片描述][d0340491adee4a0781c6729cacc46615.png]  
![在这里插入图片描述][52c84373ae544222b0f63573128654c6.png]

请注意，生成的项目中的示例组件使用的是组合式 API 和 ，而非选项式 API。

当你准备将应用发布到生产环境时，请运行：

> npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

[Node.js]: https://nodejs.org/en/
[d0340491adee4a0781c6729cacc46615.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0d9f21eee0dc4c869baa6eea82e0bbdf.png
[52c84373ae544222b0f63573128654c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d282809e8dff4f84a28fb19f71af185a.png