百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

vue项目搭建及总结

bigegpt 2024-09-01 15:15 4 浏览

一、vue的两种安装方式

(1)直接在html中引入vue.js

(2)通过vue+nodeJS搭建

我们采用的是第二种方式

二、vue和nodeJS的关系

(1)nodeJS不是一个js框架,是一个基于Chrome V8引擎的javascript运行环境,所以会产生众多基于node的js框架和库,同时包括关于js模块化的库。另一个就是node可以创建本地服务器,从而可以使用js来编写后台程序。

(2)vue依赖node中的webpack打包工具,初始化vue项目,以及一些依赖包。

三、搭建vue项目

(1)安装node

(2)初始化vue项目,初始化命令:vue init webpack my-project


需要注意的是:node的版本需要和npm版本相对应

(3)初始化项目后,进入到project目录下使用命令npm run dev来启动项目。这个命令的执行是通过vue脚手架找到项目的根目录下的package.json文件,scripts表示脚本部分,作用是把webpack的原生命令进行 代理。其中build即是打包命令。执行了npm run dev则会启动端口,在开发

(4)vue目录结构,项目目录:webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路径的别名,引入的公共文件路径可在这里配置,移动文件时只需要修改这一个地方,如:@表示src目录.

四、关于vue的几大知识模块

(1)vue路由

vue使用的是单页面路由,即所有组件都是渲染在一个容器中,页面跳转时不需要重新加载页面,只是重新渲染组件。在开发应用时,前端分配页面地址,包括实际路径地址、name、别名、重定向、组件名称,实际访问路径可以是别名也可以是真实路径

(2)vue双向数据绑定,使用模板语言

(3)vue的生命周期

beforeCreate:this无法使用,data数据、method方法都是无法获取的

created:可以操作vue实例中的数据和方法,但是无法操作dom结构

mounted:挂载完毕,dom节点渲染到页面中,能操作dom结构

computed:计算属性,vue经常会在模板中使用一些简单的表达式来控制值,所以复杂的逻辑应使用计算属性来进行控制。可快速计算视图中的属性,并且计算会被缓存,在需要更新的时候更新。提升页面性能。一般是当做属性来使用

watch:侦听属性,用来监听data中的数据变化,还可以监听函数的中参数来获取新值和旧值,和计算属性有些类似,通常用这个属性来响应数据的变化,监听ajax返回的结果。监听特定数据的变化并作出具体的业务逻辑。

(4)vue组件的开发和调用:注册组件使用.vue文件,使用export default将组件暴露出去,在父组件中import进来,并声明组件,在父组件中直接使用组件名称作为标签名即可使用子组件

(5)vue的权限控制:控制用户登录权限,控制用户角色权限,在页面加载前判断是否已登录,如果已登录再判断用户是否有权限

相关推荐

LangChain4j如何自定义文档转换器实现数据清洗?

LangChain4j提供了3种RAG(Retrieval-AugmentedGeneration,检索增强生成)实现,我们通常在原生或高级的RAG实现中,要对数据进行清洗,也就是将外接...

Java 8 Stream API 详解(java stream.)

Java8StreamAPI详解一、概述在Java8中,StreamAPI是一个重要的新特性。它为处理集合(如List、Set等)中的元素提供了一种高效且富有表现力的方式。Str...

Java修炼终极指南:185 使用 Stream 过滤嵌套集合

这是面试中的一个经典问题,通常从一个模型开始,如下所示(我们假设集合是一个List):publicclassAuthor{privatefinalStringname;pri...

java8的stream使用小示例(java stream())

据JetBrains发布的2021年开发者生态系统调查,Java8在java使用的版本中仍然是当前最流行的版本。72%的专业开发人员使用Java8作为其在java开发中主要编程语言版本。现...

Node.js Stream - 实战篇(node.js in action)

本文转自“美团点评技术团队”http://tech.meituan.com/stream-in-action.html背景前面两篇(基础篇和进阶篇)主要介绍流的基本用法和原理,本篇从应用的角度,介...

Java Stream:集合处理的api(java 集合操作)

JavaStream流:高效集合处理的函数式编程利器一、什么是JavaStream?Java8引入的StreamAPI是一套用于处理集合数据的流式编程接口,通过函数式风格(无副作用的...

去除 List 中的重复元素,你知道几种实现方法?

去除List中重复元素,这在实际编程或面试中经常遇到,每个人都有习惯的写法吧,这里抛砖引玉,汇总了一些实现方案,开拓思路。准备数据假设数组中有10个数据,可能有重复,需要将重复的数据从数组中去掉。pu...

Java开发者必看!Stream流式编程10个爆款技巧,让你代码优雅飞起

为什么你的Java代码总像拧巴的麻绳?掌握这10个Stream实战技巧,代码效率与优雅度将产生质的飞跃。以下案例均来自真实电商系统场景,带你感受流式编程的降维打击!一、过滤与映射组合拳(Filter...

leetcode每日一题之存在重复元素(存在重复元素 iii)

题:给定一个整数数组,判断是否存在重复元素。如果存在一值在数组中出现至少两次,函数返回true。如果数组中每个元素都不相同,则返回false。比如:输入:[1,2,3,1]输出:true...

告别for循环!揭秘Stream API如何让你的代码简洁度提升300%

一、当传统循环遇上现代需求真实场景复现:某电商平台需要处理10万条订单数据,要求:筛选出金额>500的订单提取用户ID并去重统计VIP用户数量传统实现方案://常规写法Set<Long...

Java中List去重的N种方法:从基础到优雅

Java中List去重的N种方法:从基础到优雅在日常的Java开发中,我们经常会遇到需要对List集合去重的情况。无论是为了清理重复的数据,还是为了优化算法性能,掌握多种去重方式都是一项非常实用的技能...

Java Stream流没用过?常用高频方法

概念Stream流是Java8添加的以一种链式调用的方法处理数据,主要侧重于计算。具有以下相关特点代码简洁链式调用Stream常用方法1.将数组变为当作List操作String[]strArr=...

核医学专业名词索引(M-R)(核医学重点归纳)

M吗啡(morphia)埋藏式心律转复除颤器(implantablecardioverterdefibrillator,ICD)麦角骨化醇(VD2,calciferol)脉冲堆积(pulsepi...

CodeMeter 新版发布(codesigner下载)

威步于2022年8月4日发布CodeMeter7.50及CodeMeter软件保护套装11.10,以下为新版内容。CodeMeterRuntime7.50StreamingSIMDExten...

世界上最小的五轴铣床Pocket NC(最小的五轴加工中心)

PocketNC,由MIT学生研制,还有说法是这款产品的设计者是来自美国蒙大拿州的一对极客夫妻。目前主要有两款产品:PocketNCV2-50,9000美元;PocketNCV2-10,60...