vue从零开始学习

npm install慢解决方法:删掉nodel_modules。

5.0.3:表示安装指定的5.0.3版本
~5.0.3:表示安装5.0X中最新的版本
^5.0.3: 表示安装5.x.x中最新的版本。

yarn的优点:

1.速度快,可以并行安装
2.安装版本统一

项目搭建:

  1. 安装nodejs
  2. 查看node版本:node -v
  3. 安装vue clie : npm install -g @vue/cli
  4. 查看vue版本:vue -V
  5. 使用vue ui 搭建项目:
  6. cd E:\work\gitee\vue-backend-1
    vue create vue-backend-1
    选择vue2 [等待即可]
    运行:npm run serve,浏览器可访问localhost:8080
    学习饿了么UI: Element - The world's most popular Vue UI framework
    项目安装饿了么UI依赖:npm i element-ui -S

    引用element-UI:main.js引入3行代码[全局引用]

    简单使用element-ui:拷贝代码到项目中,运行试试效果

    npm run server:

    按需引用:安装插件

    修改配置文件:

    vue 页面有el-row,el-button 组件:

    所以main按需引用就是把Row和button 引入

    配置文件第4行需要修改为:

    ["@babel/preset-env", { "modules": false }]
    

    项目启动:npm run server 发现效果等同于全局引用

    总结:按需引用的好处是使项目体积变小

    项目打包:npm run build, 打包后会多一个dist文件,项目发布也是发布的dist文件

    vue Router路由学习:Vue Router | Vue.js 的官方路由

    查看npm 里面的router 版本:router - npm search

    安装vue-router: npm i vue-router@3.6.5
     

    在src 下创建router文件夹和index.js 文件,并启用router

    创建views文件夹,同时在下面创建两个组件

    在router 文件夹中的index 引入组件

    在main.js中引入路由,配置路由[第11行第21行]:

    启动项目报错npm run server:是因为代码规范问题,关闭即可

    关闭代码校验开关:

    配置路由出口:

    重新启动即可:npm run server

    嵌套路由学习[引入组件Main,修改嵌套路由组件]:

    配置路由出口:

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

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

相关文章

swaggo的一点小理解

如有错误,希望指出,谢谢! 很低级的概念不清,大佬嘴下留情。 1.关于swag的注释 我的理解是这些注释是专门提供给Swagger UI界面测试使用的,根据注释内容告诉swag文档这个函数应该有哪些参数,从什么路由走&…

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)

三、拖动手势(PanGesture) .PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number}) 拖动手势用于触发拖动手势事件,滑动达到最小滑动距离(默认值为5vp)时拖动手势识别成功&am…

关于已经安装了TorchCRF,导入时却提示“ModuleNotFoundError: No module named ‘torchcrf‘”的解决办法

应用python时,想导入torchcrf库 from torchcrf import CRF 但系统提示:ModuleNotFoundError: No module named torchcrf 在命令提示符里输入“pip list”检查已安装库,发现torchcrf已经安装 搞了半天,发现是大小写的问题&#x…

Locked勒索病毒:最新变种.locked袭击了您的计算机?

导言: 在今天的数字时代,勒索病毒已经不再是仅仅让数据变得不可访问的小威胁。 .locked 勒索病毒,作为其中的一种,以其高度复杂的加密算法和迅速变化的攻击手法而备受恶意分子喜爱。本文91数据恢复将带您深入了解 .locked 勒索病毒…

C语言练习8(巩固提升)

C语言练习8 编程题 前言 奋斗是曲折的,“为有牺牲多壮志,敢教日月换新天”,要奋斗就会有牺牲,我们要始终发扬大无畏精神和无私奉献精神。奋斗者是精神最为富足的人,也是最懂得幸福、最享受幸福的人。正如马克思所讲&am…

Scala入门,idea关联Scala

Scala 介绍 Scala是一种多规范的编程语言,它结合了面向对象编程(OOP)和函数式编程(FP)的特征,Scala的名字源于”Scalable language“,意为”可伸缩语言“。2003年开发的,并在JVM&a…

如何设计一个好的游戏剧情(Part 1:主题的设定)

提醒:此教程仅仅为作者的一些经验和感悟,非专业教程,若介意请前往网上搜集或者书本查阅相关资料! 前言:游戏为什么要有剧情——游戏剧情的重要性 游戏剧情的重要性难以低估。一个精彩的剧情可以让玩家感受到强烈的情感…

华为OD:敏感字段加密

题目描述: 给定一个由多个命令字组成的命令字符串: 1、字符串长度小于等于127字节,只包含大小写字母,数字,下划线和偶数个双引号; 2、命令字之间以一个或多个下划线_进行分割; 3、可以通过两个双引号”"来标识包含下划线…

抽象轻松c语言

目 c语言 c程序 c语言的核心在于语言,语言的作用是进行沟通,人与人之间的信息交换 人与人之间的信息交换是会有信息空白(A表达信息,B接受信息,B对信息的处理会与A所以表达的信息具有差距,这段差距称为信…

keras深度学习框架通过简单神经网络实现手写数字识别

背景 keras深度学习框架,并不是一个独立的深度学习框架,它后台依赖tensorflow或者theano。大部分开发者应该使用的是tensorflow。keras可以很方便的像搭积木一样根据模型搭出我们需要的神经网络,然后进行编译,训练,测试…

用迅为i.MX6ULL开发板同一个网段概念

使用 nfs 之前,开发板、虚拟机 ubuntu、windows 电脑三者要互相 ping 通,这就涉及到了同一个网段 的概念。 概念:同一个网段是指 IP 地址和子网掩码相与得到的相同的网络地址。 快速判断同一个网段: (1&#xff09…

JVM 是怎么设计来保证new对象的线程安全

1、采用 CAS 分配重试的方式来保证更新操作的原子性 2、每个线程在 Java 堆中预先分配一小块内存,也就是本地线程分配缓冲(Thread Local AllocationBuffer,TLAB),要分配内存的线程,先在本地缓冲区中分配&a…

windows server 2019 安装sqlserver2012

在安装前,应先关闭系统防火墙 双击exe 选择【全新SQL Server独立安装或向现有安装添加功能】选项 运行完成后,如无失败或警告,点击确定,如果出现警告,需要处理掉再继续执行 点击下一步 勾选接受许可,点击下…

云原生Kubernetes:K8S概述

目录 一、理论 1.云原生 2.K8S 3.k8s集群架构与组件 二、总结 一、理论 1.云原生 (1)概念 云原生是一种基于容器、微服务和自动化运维的软件开发和部署方法。它可以使应用程序更加高效、可靠和可扩展,适用于各种不同的云平台。 如果…

【微服务部署】一、使用docker-compose部署Jenkins、SonarQube、PostgreSQL

一、安装 1、编写docker-compose部署Postgres、SonarQube、Jenkins的yml文件jenkins-compose.yml Postgres:作为SonarQube的数据库存储SonarQube:代码质量检查Jenkins:jenkins/jenkins:lts镜像,jenkinsci/blueocean镜像缺少node…

解决 filezilla 连接服务器失败问题

问题描述: 开始一直用的 XFTP 后来,它变成收费软件了,所以使用filezilla 代替 XFTP 之前用的还好好的,今天突然就报错了:按要求输入相关字段,连接 连接失败!!!o(╥﹏╥…

使用 BERT 进行文本分类 (03/3)

一、说明 在使用BERT(2)进行文本分类时,我们讨论了什么是PyTorch以及如何预处理我们的数据,以便可以使用BERT模型对其进行分析。在这篇文章中,我将向您展示如何训练分类器并对其进行评估。 二、准备数据的又一个步骤 …

友元(个人学习笔记黑马学习)

1、全局函数做友元 #include <iostream> using namespace std; #include <string>//建筑物类 class Building {//goodGay全局函数是 Building好朋友 可以访问Building中私有成员friend void goodGay(Building* building);public:Building() {m_SittingRoom "…

信息熵 条件熵 交叉熵 联合熵 相对熵(KL散度) 互信息(信息增益)

粗略版快速总结 条件熵 H ( Q ∣ P ) 联合熵 H ( P , Q ) − H ( P ) 条件熵H(Q∣P)联合熵H(P,Q)−H(P) 条件熵H(Q∣P)联合熵H(P,Q)−H(P) 信息增益 I ( P , Q ) H ( P ) − H ( P ∣ Q ) H ( P ) H ( Q ) − H ( P , Q ) 信息增益 I(P,Q)H(P)−H(P∣Q)H(P)H(Q)-H(P,Q) 信息…

企业架构LNMP学习笔记10

1、Nginx版本&#xff0c;在实际的业务场景中&#xff0c;需要使用软件新版本的功能、特性。就需要对原有软件进行升级或重装系统。 Nginx的版本需要升级迭代。那么如何进行升级呢&#xff1f;线上服务器如何升级&#xff0c;我们选择稳定版本。 从nginx的1.14版本升级到ngin…