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.rhkb.cn/news/119051.html

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

相关文章

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

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

明厨亮灶监控实施方案 opencv

明厨亮灶监控实施方案通过pythonopencv网络模型图像识别算法,一旦发现现场人员没有正确佩戴厨师帽或厨师服,及时发现明火离岗、不戴口罩、厨房抽烟、老鼠出没以及陌生人进入后厨等问题生成告警信息并进行提示。OpenCV是一个基于Apache2.0许可&#xff08…

01-虚拟机安装Windows Server操作系统

1、创建并配置虚拟机 2、安装操作系统 找到windows Server镜像 等待安装 3、设置密码

数据结构之单链表java实现

基本概念 链表是一种物理存储结构上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中指针链接次序实现的。和数组相比较,链表不需要指定大小,也不需要连续的地址。 单链表的基本设计思维是,利用结构体的设置&#xff0c…

滑动窗口实例5(水果成篮)

题目: 你正在探访一家农场,农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示,其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而,农场的主人设定了一些严格的规矩,你必须按…

垃圾回收 - 引用计数法

GC原本是一种“释放怎么都无法被引用的对象的机制”。那么人们自然而然就会想到,可以让所有对象事先记录下“有多少程序引用了自己”。让各对象知道自己的“人气指数”,从而让没有人气的对象自己消失,这就是引用计数法。 1、计数器 计数器表…

使用MATLAB解算炼油厂的选址

背景 记得有一年的数据建模大赛,试题是炼油厂的选址,最后我们采用MATLAB编写(复制)蒙特卡洛算法,还到了省级一等奖,这里把仅有一些记忆和材料,放到这里来,用来纪念消失的青春。 本…

selenium可以编写自动化测试脚本吗?

Selenium可以用于编写自动化测试脚本,它提供了许多工具和API,可以与浏览器交互,模拟用户操作,检查网页的各个方面。下面是一些步骤,可以帮助你编写Selenium自动化测试脚本。 1、安装Selenium库和浏览器驱动程序 首先…

Redis布隆过滤器原理

其实布隆过滤器本质上要解决的问题,就是防止很多没有意义的、恶意的请求穿透Redis(因为Redis中没有数据)直接打入到DB。它是Redis中的一个modules,其实可以理解为一个插件,用来拓展实现额外的功能。 可以简单理解布隆…

Educational Codeforces Round 154 (Rated for Div. 2)

Educational Codeforces Round 154 (Rated for Div. 2) A. Prime Deletion 思路&#xff1a; 因为1到9每个数字都有&#xff0c;所以随便判断也质素即可 代码 #include<bits/stdc.h> using namespace std; #define int long long #define rep(i,a,n) for(int ia;i<…

数学建模-点评笔记 9月3日

1.摘要&#xff1a;关键方法和结论&#xff08;精炼的语言&#xff09;要说明&#xff0c;方法的合理性和意义也可以说明。 评委先通过摘要筛选&#xff08;第一轮&#xff09; 2.时间序列找异常值除了3西格玛还有针对时间序列更合适寻找的方法 3.模型的优缺点要写的详细一点…

vue3 页面显示中文,分页显示中文

vue3 分页默认为英文 &#xff0c;但想要中文显示 那么在App.vue中的代码为三步即可&#xff0c;引入中文&#xff0c;声明中文 &#xff0c;绑定中文&#xff1b; 1. import zhCn from element-plus/es/locale/lang/zh-cn&#xff1b; 2. let locale zhCn; 3. :locale&q…

Snipaste_2023-08-22_16-09-41.jpg

原因 cd 目录名 (想要补全的时候出现以下错误) cd /o-bash: cannot create temp file for here-document: No space left on device解决方案 可以使用df -h命令查看磁盘空间的使用情况,删除一些不必要的文件或调整其他文件的存储位置来释放空间,或者还可以考虑扩大磁盘容量 df …

数据结构1 -- leetcode练习

三. 练习 3.1 时间复杂度 用函数 f ( n ) f(n) f(n) 表示算法效率与数据规模的关系&#xff0c;假设每次解决问题需要 1 微秒&#xff08; 1 0 − 6 10^{-6} 10−6 秒&#xff09;&#xff0c;进行估算&#xff1a; 如果 f ( n ) n 2 f(n) n^2 f(n)n2 那么 1 秒能解决多…

PHP NBA球迷俱乐部系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP NBA球迷俱乐部系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 基于PHP的NBA球迷俱乐部 二、功能介绍 1、前台主要功能&#xff1a; 系统首页 网站介…

2023_Spark_实验一:Windows中基础环境安装

Ⅰ、WINDOWS中安装JDK1.8 一、下载安装包 链接&#xff1a;百度网盘 请输入提取码 所在文件夹&#xff1a;根目录或者大数据必备工具--》开发工具(前端后端)--》后端 下载文件名称&#xff1a;jdk-8u191-windows-x64.exe 二、安装JDK 1.现在转到下载的exe文件可用的文件夹&…

从传统到智能化:汽车内部通信的安全挑战与SecOC解决方案

01/需求背景 Demand background 在传统的汽车电子结构中&#xff0c;车内的电控单元&#xff08;ECU&#xff09;数量和复杂性受到限制&#xff0c;通信带宽也受到限制。因此&#xff0c;人们普遍认为车内各个ECU之间的通信是可靠的。只要ECU节点接收到相应的消息&#xff0c…

实际并行workers数量不等于postgresql.conf中设置的max_parallel_workers_per_gather数量

1 前言 本文件的源码来自PostgreSQL 14.5&#xff0c;其它版本略有不同并行workers并不能显箸提升性能。个人不建议使用并行worker进程&#xff0c;大多数情况下采用postgresql.conf默认配置即可。 PostgreSQL的并行workers是由compute_parallel_worker函数决定的&#xff0c…

【人工智能】—_线性分类器、感知机、损失函数的选取、最小二乘法分类、模型复杂性和过度拟合、规范化

文章目录 Linear predictions 线性预测分类线性分类器感知机感知机学习策略损失函数的选取距离的计算 最小二乘法分类求解最小二乘分类矩阵解法一般线性分类模型复杂性和过度拟合训练误差测试误差泛化误差复杂度与过拟合规范化 Linear predictions 线性预测 分类 从具有有限离…

MySQL-数据类型

MySQL-数据类型 数值类型bittinyintfloatdecimal 字符串和文本类型charvarcharblobtext 日期和时间类型enum-枚举类型set-集合类型 数值类型 数据类型说明bit(M)位类型。M指定位数&#xff0c;默认值为1&#xff0c;范围1-64.tinyint [unsigned]带符号范围:-128 - 127&#xf…