Vue高级篇--实现前后端分离

news2024/11/23 13:17:54

   目录

        一、安装Nodejs服务器

        二、安装Npm

        三、安装vue脚手架

        四、使用vue脚手架搭建vue工程

        五、vue工程安装需要的插件和依赖

        六、安装前端的开发工具

        七、使用webstorm打开vue工程

        7.1 运行vue工程  

        八、src目录结构的介绍


        一、安装Nodejs服务器

        等价于我们java端的Tomcat服务器, 运行前端项目                             https://nodejs.org/en/download/            

                                                                                                                       安装步骤省略----[注意:不要安装到中文目录下]

        验证是否安装成功: 如图所示就是成功了

        

        二、安装Npm

        我们之前在vue网页中要想使用elementui 或者 axios 我们需要在网页中引入上面的插件

        安装需要的依赖以及插件------等价于之前的maven.

        注意: 如果你安装了nodejs 默认也会安装npm.

         验证是否安装成功:如图所示就是安装成功了

        三、安装vue脚手架

                它的作用: 用来创建vue工程

                

        Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本

        可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

         你还可以用这个命令来检查其版本是否正确:如图所示就是安装成功了

        四、使用vue脚手架搭建vue工程

        使用vue ui 命名

 

        自动弹出如下界面

        

 

 

 

        五、vue工程安装需要的插件和依赖

        布局:----ElementUI

        异步请求:----axios

        第一种直接在图形化安装:  

 

                安装axios依赖

 

        六、安装前端的开发工具

        Vscode 专业的前端开发工具。

        webstorm 它是和idea工具同一家公司开发的软件,而且界面和idea一模一样

        关联npm  

        重启webstorm就能生效了

        七、使用webstorm打开vue工程

        

        node-module: 它是vue工程所依赖的模块。【空间最大的就是该目录】等价于lib文件夹

        package.json: 定义工程需要的插件和依赖。等价于pom.xml

        在真实开发中,不会把node_modules文件夹发给客户。 需要客户拿到项目自己下载node_modules文件夹。

        在工程目录下使用npm install安装

        7.1 运行vue工程  

        

 

        八、src目录结构的介绍

        

                修改App.vue的内容        

<template>
  <div id="app">
    <!--该标签 等价于之前的a标签   to属性等价于a标签中href属性-->
    <router-link to="/home">首页</router-link> *
    <router-link to="/student">学生</router-link>

    <!--路由视图渲染标签-->
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        路由跳转的流程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/23516.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

聊聊自制的探索大全扑克牌

这是鼎叔的第四十篇原创文章。 行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注本人专栏和微信公众号《敏捷测试转型》&#xff0c;大量原创思考文章陆续推出。 这是鼎叔的第四十篇原创文章。 行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注…

Oracle中ALTER TABLE的五种用法(一)

首发微信公众号&#xff1a;SQL数据库运维 原文链接&#xff1a;https://mp.weixin.qq.com/s?__bizMzI1NTQyNzg3MQ&mid2247485212&idx1&sn450e9e94fa709b5eeff0de371c62072b&chksmea37536cdd40da7a94e165ce4b4c6e70fb1360d51bed4b3566eee438b587fa231315d0a5a…

(必经点)局部优化达到全局最优的最短路径算法探讨

首先&#xff0c;存在无序的点集. 记. 再记初始路径为. 于是&#xff0c;我们称以下为一次变换&#xff1a; if |C[i]-C[i1]||C[i2]-C[i3]| > |C[i]-C[i2]||C[i1]-C[i3]| {swap(C[i1],C[i2]); } 需要注意的是. 最直观的就是如下的变换&#xff1a; 我们对C上的每一点&a…

论文阅读【3】Efficient Estimation of Word Representations in Vector Space

1.概述 1.1 论文相关 题目&#xff1a;基向量空间中词表示的有效估计&#xff08;Efficient Estimation of Word Representations in Vector Space&#xff09;发表时间&#xff1a;出版&#xff1a;原文地址&#xff1a;代码 1.2 动机 2.对比模型 2.1 NNLM&#xff08;前…

表单控件绑定:checkbox表单绑定v-model

表单checkbox&#xff0c;绑定的v-model是一个布尔值&#xff0c;要么为true&#xff0c;要么为false&#xff1b;因为它是勾选&#xff0c;或者不勾选的形式&#xff1b;为true了就是勾选&#xff0c;为false了就是不勾选&#xff1b; 代码&#xff1a; <body><div …

Vue-cli3 通过配置 public 目录下的 config.js 和config.json 实现一次编译,修改生效

文章目录1.背景2.配置步骤3.小结1.背景 最近实施部门&#xff0c;有个需求就是研发人员通过vue 写完代码&#xff0c;yarn build 编译完成代码后&#xff0c;移交实施&#xff0c;通过修改public 文件夹下的 config 文件来实现修改&#xff0c;请求后台的 requestUrl 和 titil…

day10 分布式缓存

单机的 Redis 存在以下四大问题&#xff1a; 1、Redis持久化 Redis有两种持久化方案&#xff1a; RDB 持久化AOF 持久化 1.1、RDB 持久化 RDB 全称 Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫做 Redis 数据快照。简单来说就是把…

《500强高管谈VE》-面向STAKEHOLDERS东方企业的VM

文章出处&#xff1a;日本VE协会杂志文章翻译&#xff1a;泰泽项目部 关注泰泽&#xff1a;实现高利润企业 《500强高管谈VE》-面向STAKEHOLDERS东方企业的VM 作者&#xff1a;常务董事八木隆 本公司的日高工厂和丰浦工厂两个事业所获得了迈尔斯奖。这些都是支持企业活动的V…

无代码开发平台选型指南

一、如何选购SaaS SaaS评测网的面世&#xff0c;也原因在于有感于选型难于&#xff0c;期望可以提供更多有用的信息协助大家找出更可信赖与最合适的产品。简而言之授之以鱼、比不上授之以渔&#xff0c;接下来的系列产品该文&#xff0c;则是撷取选型的方法及避坑实战经验。 …

【大数据处理技术】第二篇 大数据存储与管理(持续更新)

文章目录第3章 分布式文件系统HDFS3.1 分布式文件系统3.1.1 计算机集群结构3.1.2 分布式文件系统的结构3.1.3 分布式文件系统的设计需求3.2 HDFS3.2.1 HDFS 简介及相关概念3.2.2 HDFS 体系结构3.2.3 HDFS 存储原理3.2.4 HDFS 数据读写过程3.2.5 HDFS 编程实践第4章 分布式数据库…

独立产品灵感周刊 DecoHack #038 - 纽约市 90 年代的街景长什么样

本周刊记录有趣好玩的独立产品设计开发相关内容&#xff0c;每周发布&#xff0c;往期内容同样精彩&#xff0c;感兴趣的伙伴可以点击订阅我的周刊。为保证每期都能收到&#xff0c;建议邮件订阅。欢迎通过 Twitter 私信推荐或投稿。产品推荐 1. 1940s.nyc - 这个网站可以看到…

Python版本机访问GEE,CoLab配置

一、本机Jupyter notebook访问GEE 首先感谢知乎这两篇文章提供的解决思路&#xff1a; Python版GEE学习笔记&#xff08;一&#xff09;-环境配置 - 知乎 GEE之Python学习——前期准备工作 - 知乎 前期尝试解决&#xff1a; 1. Anaconda 安装&#xff0c;重新创建虚拟环境…

2021年度聚合支付评级如何?

截至2022年11月15日&#xff0c;完成收单外包服务备案机构为15041家&#xff0c;其中含聚合支付类型的机构为481家。 2022年11月15日&#xff0c;中国支付清算协会正式发布了2021年度收单外包服务机构评级等级消息。显示共有包括银行和非银行支付机构在内的143家收单机构对958…

element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选(支持多段选择)

演示效果 需求逻辑&#xff1a; 单击行切换选中状态不按住shift或者ctrl键点击一行&#xff0c;设置该行高亮&#xff0c;该行将作为起始行连续多选&#xff1a;高亮行作为起始位置&#xff0c;按住shift或者ctrl键后选中行作为结束位置&#xff0c;结束位置未勾选则连续多选…

第2-3-8章 分片上传和分片合并的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

文章目录5.10 接口开发-分片上传5.10.1 分片上传介绍5.10.2 前端分片上传插件webuploader5.10.3 后端代码实现5.10.3.1 接口文档5.10.3.2 代码开发5.10.3.3 接口测试5.11 接口开发-分片合并5.11.1 FileChunkStrategy5.11.2 AbstractFileChunkStrategy5.11.3 LocalChunkServiceI…

OpenFeign源码1-环境搭建及核心类说明

0. 环境 nacos版本&#xff1a;1.4.1Spring Cloud : Hoxton.SR9&#xff08;没用2020.0.2版本后面说明&#xff09;Spring Boot &#xff1a;2.4.4Spring Cloud alibaba: 2.2.5.RELEASESpring Cloud openFeign 2.2.2.RELEASE 测试代码&#xff1a;github.com/hsfxuebao/s… 20…

WebDAV之葫芦儿·派盘+PassStore

PassStore 支持webdav方式连接葫芦儿派盘。 大家常用的qq,手机微信,新浪微博等。假如各个网址都设成同样的帐号和登陆密码,一旦某一帐户泄漏了,别的平台上的账户密码都有被撞库攻击的风险。在不一样的站点设定不一样的高韧性登陆密码才算是最安全可靠的确保,殊不知这般繁…

c++调用tf.keras的模型

​ 环境&#xff1a; ubuntu 20.04 python 3.8 tensorflow-gpu 2.4.0 显卡 nvidia rtx A6000 驱动 495.29.05 cuda 11.5 cudnn 8.3.0 tensorRT 8.4 1.将keras保存的h5模型转成darknet的weight&#xff0c;然后用opencv加载 cv::dnn::Net net cv::dnn::readNetFromDar…

链表中快慢指针的应用

目录 一、链表的中间结点 二、回文链表 三、链表中倒数第K个结点 四、删除链表的倒数第n个结点 一、链表的中间结点 给定一个头结点为 head 的非空单链表&#xff0c;返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 先设置两个low和fast都指…

【MySQL】测试题03

文章目录1、创建数据库2、使用数据库3、创建数据表【3.1】创建学生信息表Student【3.2】创建课程信息表Course【3.3】创建教师信息表Teacher【3.4】创建成绩信息表Score4、添加数据【4.1】向学生student表添加数据【4.2】向课程course表添加数据【4.3】向教师信息teacher表添加…