idea中使用Vue+Element-ui+Tomcat进行项目开发

一、组件介绍

1.Vue 官网

Vue.js（读作 /vjuː/，类似于 view）是一款开源的渐进式JavaScript框架，用于构建用户界面。由尤雨溪在2014年创立，Vue以其轻量级、灵活性和高效性著称，特别适合构建单页应用（SPA）。Vue遵循MVVM（Model-View-ViewModel）设计模式，通过双向数据绑定和组件化的方式简化了Web开发流程。

Vue的主要特性包括：
响应式数据绑定：Vue使用Vue实例的数据对象来存储状态，当数据变化时，相关的DOM元素会自动更新，反之亦然，形成了双向绑定。
组件化开发：Vue鼓励组件化架构，允许开发者将UI分解为可复用的组件，每个组件都拥有自己的视图和数据逻辑，通过props向下传递数据，通过自定义事件进行父子组件间的通信。
虚拟DOM：Vue利用虚拟DOM技术，智能地决定何时、如何更新DOM，从而提升性能。
生命周期钩子：Vue提供了丰富的生命周期钩子函数，如created、mounted、updated和destroyed，使开发者能够在组件的不同阶段添加自定义逻辑。
模板系统：Vue的模板语法直观且易于理解，允许开发者在HTML中以声明式的方式来绑定数据和处理条件渲染、列表渲染等复杂场景。
可扩展性：Vue可以无缝集成第三方库，通过插件系统和其他生态系统工具（如Vuex管理状态、Vue Router处理路由、Vue CLI构建工具等）扩展其功能，支持开发大型复杂应用。
渐进式框架：Vue的核心库聚焦于视图层，它可以与其他库或已有项目逐步集成，同时也能完整地驱动单页应用开发，提供良好的可扩展性和灵活性。

2.Element-UI 官网

Element UI 是一套基于 Vue.js 的开源 UI 组件库，旨在帮助开发者快速搭建企业级 Web 应用程序的界面。它提供了丰富且高质量的组件，涵盖了诸如表格、按钮、输入框、导航栏、通知、对话框、日期选择器、下拉菜单等各种常见的用户界面元素。Element UI 遵循统一的设计原则和视觉风格，大大简化了前端开发的工作量，并有助于保证项目整体界面的一致性和用户体验的良好性。

Element UI 主要特点包括：
丰富全面的组件体系：包含几十种常用的UI组件，满足大多数企业级项目的开发需求。
精心设计的视觉风格：遵循Material Design设计理念，提供一致的视觉体验。
深度集成Vue.js：充分利用Vue.js的特性，如组件化、指令、过渡动画等，提供流畅的交互效果。
灵活定制的主题：可通过CSS变量轻松定制主题颜色和样式，以适应不同品牌和产品的需求。
详尽的文档与示例：官方提供了详细的文档说明和丰富的示例代码，方便开发者快速学习和上手。

二、组件安装

1.Vue

安装Vue.js有不同的方式，取决于您是要使用Vue的独立版本构建简单的项目，还是利用Vue CLI来构建更复杂的单页应用。以下是两种主要安装方式的步骤：

（1）安装Vue.js的独立版本（适用于小型项目或学习目的）：

方法1：直接引用CDN

在HTML文件中通过script标签引入Vue.js库：

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script> <!-- 替换为最新版本 -->

这样，Vue.js库就会被添加到您的网页中，您可以直接在浏览器环境中编写Vue代码。

方法2：下载并手动引入

访问Vue.js官方网站下载最新的压缩版文件（例如 vue.global.prod.js 或 vue.global.min.js）。
将下载的文件放在项目中适当的位置。
在HTML文件中引入这个文件：

<script src="yourpath/vue.global.prod.js"></script>

（2）安装Vue CLI（适用于大型项目或构建现代化SPA应用）：

方法3：全局安装Vue CLI

安装Node.js：

确保已安装最新版本的Node.js和npm包管理器。访问Node.js官网下载并安装。
安装时一路next即可，期间路径可以改变，但是add to path不要取消，不然后面小白可能找不到安装到哪了。

D:\BigModel\bigModel_LLM>node -v	//安装成功后以命令查看，会出现版本号
v18.18.1
D:\BigModel\KXBbigModel_LLM> npm -v             
9.8.1 

安装Vue CLI：
打开终端（命令行工具）并运行以下命令：

npm install -g @vue/cli

或者，如果你在中国地区，为了更快的安装速度，可以使用cnpm（淘宝npm镜像）：

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

创建新项目： 使用Vue CLI创建一个新的Vue项目：

vue create my-project
//或者vue init webpack my-project

其中my-project是你的项目名称。
按下述流程创建项目

D:\BigModel\KXBbigModel_LLM>vue init webpack bigmodel_llm_web

? Project name bigmodel_llm_web
? Project description A Vue.js project
? Author Huankong <*********@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
   vue-cli · Generated "bigmodel_llm_web".
# Installing project dependencies ...

成功创建后，会有以下提示

# Project initialization finished!
# ========================
To get started:
  cd bigmodel_llm_web
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

启动项目： 进入项目目录并启动开发服务器：

cd my-project
npm run serve

安装附加依赖（如Vue Router和Axios）：
对于大型项目，在Vue CLI创建的项目中安装额外依赖项，例如Vue Router或Axios，只需在项目根目录下运行相应命令：

npm install vue-router axios

也可以去了解一下使用yarn，速度更快，命令更方便

idea中使用Vue

先将创建的Vue项目拖进idea中，然后就可以在idea命令行操作npm了

命令行运行比较麻烦，接下来配置idea的npm，打开idea右上方运行按钮下拉框的Edit Configurations,按如下配置：
其中package.js在你创建的Vue项目根目录下
Node interpreter是你安装的目录，一般会默认选择，不用动。
然后Apply->ok

在右上方的运行处，选择配置好的npm，点击运行，成功会出以下结果，点击链接可访问。

D:\NVM\nvm\v18.18.1\npm.cmd run dev
> bigmodel_llm_web@1.0.0 dev                                               
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 DONE  Compiled successfully in 4983ms                                                                                                                                                                                09:16:46
 I  Your application is running here: http://localhost:8080