温室种植管理与决策系统开发与设计（三）——创建Vue基础页面

下载Node.js

官网下载并加入环境变量

下载并安装Vue.js

什么是 Vue？

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

渐进式框架

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

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

如果你是初学者，可能会觉得这些概念有些复杂。别担心！理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。你即使不是这些方面的专家，也能够跟上。

如果你是有经验的开发者，希望了解如何以最合适的方式在项目中引入 Vue，或者是对上述的这些概念感到好奇，我们在使用 Vue 的多种方式中讨论了有关它们的更多细节。

无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
npm install vue

安装Vue-cli

vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

• 下面进行全局安装webpack

# 打开cmd
npm install webpack -g
# 检查是否安装成功
webpack -v

• 全局安装vue-cli

# 全局安装vue-cli
npm install --global vue-cli
# 检查是否安装成功
Vue -V
# 出现@vue/cli 5.0.8(版本号）既为成功安装

创建Vue项目

打开项目所要搭建的文件夹，并通过cmd进入当前文件夹。

# 更换盘符目录
C:\Users\CityOfSky>F:
# 回车确认

# 进入F:\SystemDevelop文件夹
F:\>cd F:\SystemDevelop

在该目录下创建Vue项目

# 创建项目，名字为system
vue create system

选择第三项

按空格选择选项（Babel、Router、Vuex、Linter / Formatter）

 回车确认选项选择

之前我都选择第二个选项，否则不兼容Element-ui，最近发现选择第一个“3.x”也行，element-ui出新版本了可以兼容Vue3现在。

之后一直回车选中默认选项

  出现以下页面则安装成功

 按照提示输入cd system

F:\SystemDevelop>cd system

启动system项目

F:\SystemDevelop\system>npm run serve

等待启动完成出现以下页面，则项目启动成功

 在浏览器中输入网址：http://localhost:8080/

 出现以下页面则说明项目启动成功