在IDEA 2024创建Vue项目的完整实例代码
作者：yunmi_
一、 前后端分离
1. 简介
前后端分离属于开发模式的一种。其核心思想是把前端项目（Node.js 实现的）和后端项目能够独立运行（前端开发和后端开发时可以完全独立，只需要按照接口文档进行开发即可。），前端项目在通过 Ajax 请求服务器端项目Restful接口实现数据交互。
使用前后端分离模式的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些 HTML、JavaScript、图片 等资源，如果希望能够独立运行就需要借助基于 Node.js 的一些前端框架。
2. 实现前后端分离的常用前端框架
对于前端工程师来说常用的就是 Vue.js 和 React.js 和 angularJS。他们是前端工程师常用的三大框架。
Vue.js: 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。在课程中讲解此框架，后面的项目的前端页面也是基于 Vue 实现。
React: 相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。
AngularJS：相比 Vue 更重一些。AngularJS 的学习成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比较简单、直观，在性能上，AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢。只有在一些大型项目中才可能被使用。
3. 前后端分离和动静分离
3.1 前后端分离:
前后端分离软件架构方式。前端页面和服务端项目分别部署。
前端html页面通过 ajax 调用后端的 restuful api 接口并使用 json 数据（不一定非要使用JSON，如果有更好的前后端通信方式也可以使用）进行交互。即后端提供数据接口，前端调用接口获得数据，获得的数据在前端进行处理。
3.2 动静分离:
动静分离（项目部署方式）指“动态页面（JSP）”和静态页面分离开，部署到不同的地方。很多时候为了让页面访问速度更快，把原来的动态页面（JSP）转换为静态页面（HTML）（可以借助Nginx实现）访问时访问静态页面。
二、 Vue.js概述
1. 简介
Vue 是一个渐进式（真正用到才引用）的 JavaScrip t框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2. SPA介绍
Vue.js 属于 SPA 一员。
英文全称：Single Page Web Application ，SPA
中文全称：单页 Web 应用。
整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。
2.1 优点
符合前后端分离工作模式：单页面应用可以结合 Restful，符合前后端分离开发。
良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。
减轻服务器端压力：由于都是局部刷新对服务器压力更小。
多平台共享：无论是移动端、电脑端都可以共享服务端接口。通过作用域传值就无法实现接口共享。
2.2 缺点
SEO 难度大 对于单页面应用在 SEO 搜索时可能页面搜索到的就是空的<div>。
首页渲染耗时长首页需要一次加载多个请求，渲染时间可能会比较长。
3. MVVM介绍
Vue.js 使用了前端中常用的分层思想 MVVM，MVVM 分为M、V、VM 。
- M（Model） 也就是页面中单独数据
- V （View）是页面中HTML结构
- VM（View-Model） 当V需要调用M中数据时，由VM做中间处理
3.1 示例
data(){} 里面的内容就是数据，也就是 Model。
<template> 页面内容，也就是 View。
{{name}} 把data中数据传递给<template>是由Vue帮助完成的，也就是 VM。
<template>
<div id="app">
我们的名称为：{{name}}，已经成立了{{age}}年了。
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
name:"北京尚学堂",
age: 15
}
}
}
</script>三、 名词解释
1. Node.js
对 Chrome V8 引擎进行了封装，使得 JavaScript 能够脱离浏览器环境，独立运行（给我的感觉是写了一个项目，项目中只有页面相关代码，发布到服务器中运行，可以浏览器访问这些页面内容）。同时能通过 Node.js 直接访问数据库的能力。
目前前端市场都是使用基于 Node.js 的框架。而不是直接使用 Node.js。
前后端分离之所以前端项目能够独立运行就是借助 Node.js.
2. npm
npm是Node.js中的一个工具。通过npm可以实现一些组件的安装。效果和Linux中的yum有类似。
使用Node.js时不是一下所有东西都能下载下来，有一些是第三方提供的，有些是插件，当需要使用这些东西的时候，通过npm install 进行安装即可。
3. webpack
是前端开发中的项目管理工具。和我们在开发 Java 时 Maven 的作用类似。
4. Vue-cli
Vue-cli 是 Vue.js 的客户端工具。通过 Vue-cli 可以实现 Vue 项目脚手架功能等，进行快速搭建。
5. cnpm
淘宝镜像提供的工具。解决了 npm 使用国外地址下载资源慢的问题。需要安装淘宝镜像后就可以使用了。
偶尔会出现工具无法连接淘宝服务器的情况。每次在使用时都是先通过 cnpm 命令查看是否能够连接淘宝镜像，才去使用。
四、 总体环境准备
1. Node.js安装
nodejs下载地址：http://nodejs.cn/download/ 或者点击这里下载
所有的过程都点击 next 按钮（路径自定义），安装完成后在命令行中运行命令查看是否安装成功
查看 node 的版本： 在控制面板输入 node -v
查看 npm 版本： 在控制面板输入 npm -v
2. 安装npm淘宝镜像
使用淘宝镜像进行操作，在命令行输入命令进行安装。
npm install -g cnpm --registry=https://registry.npmmirror.com
运行完成后通过 cnpm 命令查看是否安装成功，成功会提示下面信息。如果没有成功会提示没有 cnpm 命令，然后在进行安装一次即可。
以后所有官方文档中使用 npm install 的命令都换成 cnpm install
安装完成后，如果 IDEA 正在启动，需要关闭 IDEA，让 IDEA 加载 Node.js 相关信息。
3. 安装webpack
其中-g表示全局安装，以后不需要在安装了。如果没有 -g 表示只能在当前目录（运行命令时所在目录）中使用。如果重新建立项目，换了文件夹还需要重新安装。
在命令行输入：
npm install -g webpack webpack-cli --registry=https://registry.npmmirror.com
3. 安装webpack
其中-g表示全局安装，以后不需要在安装了。如果没有 -g 表示只能在当前目录（运行命令时所在目录）中使用。如果重新建立项目，换了文件夹还需要重新安装。
在命令行输入：
npm install -g webpack webpack-cli --registry=https://registry.npmmirror.com
4. 安装 Vue Cli
在命令行输入
npm install -g @vue/cli --registry=https://registry.npmmirror.com
5. 安装Vue.js插件
在IDEA中：菜单 settings -> plugins -> 搜索 vue -> Vue.js 点击 install -> 安装后重启 idea
官方插件离线下载网址：https://plugins.jetbrains.com/plugin/9442-vue-js/versions
检查插件是否可用：File -> New -> Project -> 有这个就行 ↓↓↓
五、 创建第一个 Vue.js 项目
1. 选择项目类型
依次点击菜单 File -> New -> Project -> Vue.js （↑ 上面图片中的页面）
2. 填写项目信息
Project name：项目名。项目名称不支持大写。
Project location: 项目路径。
Node interpreter: node 工具。安装 node.js 会自动加载本机 Node 工具，如果没有安装此处为红色 none，提示没有 node 环境。
Vue Cli：Vue 工具。如果安装了 Vue 工具会提示下面信息，如果没有安装会有一个安装命令，此命令运行特别慢，所以一定要按照环境安装步骤安装 Vue Cli。
（ ↓↓↓ 4 和 5 不要选错了，5 是本地已经全局安装好的 @vue/cli 可执行文件）
3. 初始化项目
每次创建 Vue 项目都需要通过 Vue Cli 脚手架初始化项目信息。
如果是第一次创建项目会在控制台提示我们是否把镜像切换到淘宝镜像提示是否要切换到https://registry.npm.taobao.org，输入 Y 即可。
如果不是第一次创建项目会自动使用 Vue 脚手架初始化整个项目。非常明显的在 Run 面板自动在下载安装内容。当下载安装完成后会出现。内容中说明： Successfully：已经成功创建项目
npm run serve 如果使用命令运行这个目录时需要执行的命令。在 IDEA 中有可视化操作，直接和 JAVA 项目一样点击
和输入命令效果一样。
创建过程有点慢，需要耐心等待 （↓↓↓ 等待中）
成功创建后长这样 ↓↓↓
还是没有serve就手动添加：
1. 点击顶部的 Current File ，点击 Edit Configurations...
2. 点击左上角的 +号，在列表里找到并点击npm
点开是这个页面↓↓↓ 选完后点击右下角的 apply，OK 就可以了！
↓↓↓ 在上面选的 package.json 是这个
↓↓↓ 配好了就是这样的 (npm serve 跟 serve 都一样，不用在意名字)
4. 运行项目
使用脚手架搭建的项目已经具备基本条件，选择 npm serve 后直接点击绿色运行按钮即可。
查看是这样的 ↓↓↓
运行完成后会在控制台显示 URL 信息，默认占用8080端口
5. 访问项目
直接点击控制台输出的链接，或者在浏览器输入 http://localhost:8080 会显示下面的页面
出现这个页面就是成功创建 Vue 项目了！！
总结
到此这篇关于在IDEA 2024创建Vue项目的文章就介绍到这了,更多相关IDEA创建Vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！