在 IDEA 2024 创建 Vue 项目（保姆级）

目录

一、 前后端分离

1. 简介

2. 实现前后端分离的常用前端框架

3. 前后端分离和动静分离

3.1 前后端分离:

3.2 动静分离:

二、 Vue.js概述

1. 简介

2. SPA介绍

2.1 优点

2.2 缺点

3. MVVM介绍

3.1 示例

三、 名词解释

1. Node.js

2. npm

3. webpack

4. Vue-cli

5. cnpm

四、 总体环境准备

1. Node.js安装

2. 安装npm淘宝镜像

3. 安装webpack

3. 安装webpack

4. 安装 Vue Cli

5. 安装Vue.js插件

五、 创建第一个 Vue.js 项目

1. 选择项目类型

2. 填写项目信息

3. 初始化项目

4. 运行项目

5. 访问项目

一、 前后端分离

1. 简介

        前后端分离属于开发模式的一种。其核心思想是把前端项目（Node.js 实现的）和后端项目能够独立运行（前端开发和后端开发时可以完全独立，只需要按照接口文档进行开发即可。），前端项目在通过 Ajax 请求服务器端项目Restful接口实现数据交互。

        使用前后端分离模式的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些 HTML、JavaScript、图片 等资源，如果希望能够独立运行就需要借助基于 Node.js 的一些前端框架。

2. 实现前后端分离的常用前端框架

        对于前端工程师来说常用的就是 Vue.js 和 React.js 和 angularJS。他们是前端工程师常用的三大框架。

  1. Vue.js: 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。在课程中讲解此框架，后面的项目的前端页面也是基于 Vue 实现。

  2. React: 相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。

  3. 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 项目一样点击和输入命令效果一样。

                创建过程有点慢，需要耐心等待 （↓↓↓ 等待中）

            

                成功创建后长这样 ↓↓↓

        ​​​​​​​    

4. 运行项目

        使用脚手架搭建的项目已经具备基本条件，选择 npm serve 后直接点击绿色运行按钮即可。

        

        查看是这样的 ↓↓↓

        运行完成后会在控制台显示 URL 信息，默认占用8080端口

        

5. 访问项目

        直接点击控制台输出的链接，或者在浏览器输入  http://localhost:8080  会显示下面的页面

        

出现这个页面就是成功创建 Vue 项目了！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/98093.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/98093.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Coze源码分析-资源库-创建知识库-后端源码-应用/领域/数据访问

Coze源码分析-资源库-创建知识库-后端源码-应用/领域/数据访问

3. 应用服务层 3.1 知识库应用服务 文件位置: backend/application/knowledge/knowledge.go func (k *KnowledgeApplicationService) CreateKnowledge(ctx context.Context, req *dataset.CreateDatasetRequest) (*dataset.CreateDatasetResponse, error) {// 1. 转换文档类型d…
阅读更多...
Shopify指纹手机矩阵：无限扩店，横扫FB/GG广告封号风险

Shopify指纹手机矩阵：无限扩店，横扫FB/GG广告封号风险

一、 为什么需要为Shopify使用指纹手机&#xff1f;虽然Shopify不会因为你多开店而封号&#xff0c;但以下场景需要隔离环境&#xff1a;规避广告平台关联&#xff1a;这是最核心的用途。你会用Facebook、Google、TikTok等广告平台为你的Shopify店铺引流。这些广告平台严格禁止…
阅读更多...
【Python】家庭用电数据分析Prophet预测

【Python】家庭用电数据分析Prophet预测

数据集&#xff1a;Household Electricity Consumption | Kaggle 目录 数据集简介 探索性分析 Prophet预测 Prophet模型 Prophet理念 Prophet优点 数据集简介 240000-household-electricity-consumption-records数据集包含了一个家庭6个月的用电数据&#xff0c;收集于2…
阅读更多...
信息系统运维管理

信息系统运维管理

运行维护服务指的是采用信息技术手段及方法&#xff0c;依据客户提出的服务要求&#xff0c;为其在使用信息系统过程中提出的需求提供的综合服务是信息技术服务中的一种主要类型。运行维护服务对象是指信息系统工程建设项目交付的内容&#xff0c;包括机房基础设施&#xff0c;…
阅读更多...
系统编程完结整理以及补充

系统编程完结整理以及补充

Shell&#xff08;命令与脚本语法&#xff09; 系统编程&#xff08;一&#xff09;shell的学习-CSDN博客 功能/概念语法/关键字参数/用法说明返回值/效果难易点注意事项示例/实验提示定义函数func_name() { commands; }无参数或通过 $1 $2 ... 传参函数执行参数传递、全局变…
阅读更多...
第十四届蓝桥杯青少组C++选拔赛[2022.12.18]第二部分编程题（2、字符翻转）

第十四届蓝桥杯青少组C++选拔赛[2022.12.18]第二部分编程题（2、字符翻转）

参考程序&#xff1a;#include <bits/stdc.h> using namespace std;int main() {string s;cin >> s; // 读取输入字符串&#xff0c;若无输入则结束for (int i 0; i < (int)s.size(); i) {// i 从 0 开始&#xff0c;位置是 i1&#xff1b;如果 i 是奇数&#…
阅读更多...
Django基础环境入门

Django基础环境入门

熟悉过程 搭建环境&#xff0c;运行起来基础请求到服务接口跟java web对比 说明先不纠结细节先跑起来再说 1. 环境搭建 python已经安装&#xff0c;使用conda管理 django安装 django官方文档 pip install django也可以命令创建 mkdir djangotutorial django-admin startp…
阅读更多...
408学习之c语言（结构体）

408学习之c语言（结构体）

今天给大家分享C语言中结构体的几种常见使用方法&#xff0c;包括基础结构体定义与初始化&#xff0c;结构体指针的两种访问方式&#xff0c;结构体数组的遍历&#xff0c;动态内存分配与结构体使用&#xff0c;typedef简化结构体类型基础结构体定义与使用#define _CRT_SECURE_…
阅读更多...
Navicat中设计表格默认值时，如何不设置成NULL，而是设置成空文本？

Navicat中设计表格默认值时，如何不设置成NULL，而是设置成空文本？

在 Navicat 中设计表时&#xff0c;将字段的默认值设置为空文本而不是 NULL 是一个非常常见的需求。操作很简单&#xff0c;但有几个细节需要注意。■ 方法一&#xff1a;通过“设计表”界面设置&#xff08;最常用&#xff09;1. 连接数据库并找到表&#xff1a;在左侧连接导…
阅读更多...
深入理解Java虚拟机：JVM高级特性与最佳实践（第3版）第十三章知识点问答（15题）

深入理解Java虚拟机：JVM高级特性与最佳实践（第3版）第十三章知识点问答（15题）

预告下一本 可能是mysql8的书籍 或者是AI应用工程的基本岗位所有技能 问题1 什么是 线程安全&#xff1f;在 Java 中如何定义“线程安全”&#xff1f;线程安全&#xff08;Thread Safety&#xff09; 的定义是&#xff1a; 当多个线程同时访问某个类的对象时&#xff0c;无论运…
阅读更多...
【医疗 AI】Baichuan-M2：大语言模型在医疗领域的动态验证框架

【医疗 AI】Baichuan-M2：大语言模型在医疗领域的动态验证框架

Baichuan-M2 医疗大模型&#xff1a;技术解读与使用方法 Baichuan-M2&#xff1a;大语言模型在医疗领域的动态验证框架 【医疗 AI】Baichuan-M2&#xff1a;大语言模型在医疗领域的动态验证框架0. Baichuan-M2 模型简介0.1 基本信息0.2 主要贡献0.3 论文摘要1. 引言2. 验证系统…
阅读更多...
Ubuntu\Linux环境中驱动版本配置cudaToolKit

Ubuntu\Linux环境中驱动版本配置cudaToolKit

修改环境变量。 1. 首先检查当前的环境变量 # 查看当前PATH echo $PATH# 查看当前LD_LIBRARY_PATH echo $LD_LIBRARY_PATH# 查看当前CUDA_HOME echo $CUDA_HOME2. 确定正确的CUDA安装路径 # 查看系统中有哪些CUDA版本 ls /usr/local/cuda*3. 修改环境变量（永久生效） 编辑…
阅读更多...
Linux基础开发工具（gcc/g++，yum，vim，make/makefile）

Linux基础开发工具（gcc/g++，yum，vim，make/makefile）

目录 软件包管理器——yum Linux下&#xff0c;软件的安装 yum与软件包的关系 yum命令的运用 1.查看软件包 2.安装/删除软件包 编辑器——vim vim的基本概念 vim的基本操作 命令模式命令 移动光标 删除文字 撤销上一次操作 跳至指定的行 底行模式命令 编译器——…
阅读更多...
数据结构之跳表

数据结构之跳表

跳表&#xff08;Skip List&#xff09;是一种基于概率平衡的数据结构&#xff0c;通过多层有序链表实现高效的查找、插入和删除操作。它在最坏情况下时间复杂度为 (O(n))&#xff0c;但通过随机化设计&#xff0c;平均时间复杂度可优化至 (O(\log n))&#xff0c;与平衡二叉搜…
阅读更多...
线程概念，控制

线程概念，控制

一、线程概念 线程概念&#xff1a;进程内部的一个执行流&#xff0c;轻量化。 观点&#xff1a;进程是系统分配资源的基本单位&#xff0c;线程是CPU调度的基本单位。 在理解线程之前&#xff0c;我们在谈一下虚拟地址空间。 我们都知道进程是通过页表将虚拟地址转化为物理地址…
阅读更多...
RabbitMQ 高可用实战篇（Mirrored Queue + Cluster + 持久化整合）

RabbitMQ 高可用实战篇（Mirrored Queue + Cluster + 持久化整合）

RabbitMQ 高可用实战篇&#xff08;Mirrored Queue Cluster 持久化整合&#xff09;1. 前言 在生产环境中&#xff0c;单节点 RabbitMQ 容易因故障导致消息丢失或业务中断。 通过高可用队列、集群部署和持久化策略&#xff0c;可以保证 消息可靠性、节点容错和持续服务。 本文…
阅读更多...
支持向量机：从理论到实践

支持向量机：从理论到实践

支持向量机&#xff1a;从理论到实践 文章目录支持向量机&#xff1a;从理论到实践一。理论概述1. 线性可分支持向量机1.1 基本概念与数学形式1.2 函数间隔与几何间隔1.3 间隔最大化与优化问题1.4 拉格朗日对偶理论与求解1.5 支持向量与决策函数2. 近似线性可分数据&#xff08…
阅读更多...
LVS与Keepalived详解（二）LVS负载均衡实现实操

LVS与Keepalived详解（二）LVS负载均衡实现实操

文章目录前言一、LVS-DR 模式详解1.1 数据包流向分析1.2 DR 模式的特点二、LVS-DR 集群部署实战2.1 环境准备2.2 配置负载调度器&#xff08;Director Server&#xff09;2.3 配置节点服务器&#xff08;Real Server&#xff09;2.4 测试验证三、前期回顾3.1 LVS 三种工作模式及…
阅读更多...
归一化实现原理

归一化实现原理

归一化&#xff08;Normalization&#xff09;是一种将数据转换到相同尺度的预处理技术&#xff0c;它通常用于让不同特征&#xff08;或数据项&#xff09;具有相同的量纲或范围。在联邦学习中&#xff0c;归一化可以用来处理非独立同分布&#xff08;Non-IID&#xff09;**数…
阅读更多...
企业级实战：构建基于Qt、C++与YOLOv8的模块化工业视觉检测系统

企业级实战：构建基于Qt、C++与YOLOv8的模块化工业视觉检测系统

一、概述 在追求高效与精密的现代制造业中&#xff0c;自动化光学检测&#xff08;AOI&#xff09;已成为保障产品质量的核心技术。传统的质检流程往往受限于人工效率与主观判断&#xff0c;难以满足大规模、高精度的生产需求。本文旨在研发一套完整的、企业级的工业视觉异常检…
阅读更多...
最新文章

Copyright @ 2022~2023