简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，

并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上

构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
  

• 在任何页面中作为 Web Components 嵌入

• 单页应用 (SPA)

• 全栈 / 服务端渲染 (SSR)

• Jamstack / 静态站点生成 (SSG)

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

Vue 2.0 在 2023 年 12 月 31 日停止更新。

本文使用vue2版本创建应用并运行。

1. 安装vue

确保已经安装了node.js，然后执行

npm create vue@latest

2. 创建新应用

创建一个新的文件夹vue_project，然后进入该文件夹，执行以下命令创建新应用

vue create my-project

这时候系统会提示让选择vue版本，这里我选择vue2版本

我本地安装的有yarn，此时还会提示让选择npm还是yarn执行，我选择yarn执行，运行完成后结果如下

创建完成后，目录结构如下

目录解析：

project-name/

|-- node_modules/                      // 依赖包

|-- public/                            // 静态资源

|   |-- index.html                     // 主页

|   |-- favicon.ico                    // Favicon

|-- src/                               // 源代码

|   |-- assets/                        // 资源模块

|   |-- components/                    // 组件

|   |-- App.vue                        // 根组件

|   |-- main.js                        // 入口文件

|-- .babelrc                           // Babel配置文件

|-- .eslintrc.js                       // ESLint配置文件

|-- .gitignore                         // Git忽略文件列表

|-- package.json                       // 项目依赖和配置

|-- README.md                          // 项目说明

|-- vue.config.js                      // Vue CLI配置文件（可选）

3. 本地运行

进入应用目录，使用yarn serve本地运行

然后打开浏览器运行http://localhost:8080/，显示如下页面，表示我们的应用运行成功。

4. 打包发布

执行yarn build命令

执行成功后，文件夹会多出dist目录

打包好的文件内容如下

将打包好的文件上传导服务器站点指定文件夹下，即可正常访问。

注意：执行build命令的时候，一定要保证文件夹路径大小写正确，即使是windows电脑，文件夹大小写不一致，也会运行出错。