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.hqwc.cn/news/96230.html

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

相关文章

【已解决】Java 后端使用数组流 Array.stream() 将数组格式的 Cookie 转换成字符串格式

🎉工作中遇到这样一个场景:远程调用某个接口,该接口需要用户的 Cookie 信息进行权限认证,认证通过之后才可以打通并返回数据。 在后端拿到 httpServletRequest 后,调用 getCookies() 方法,返回的是一个 Coo…

Adobe Illustrator 2023 for mac安装教程,可用。

Adobe Illustrator 是行业标准的矢量图形应用程序,可以为印刷、网络、视频和移动设备创建logos、图标、绘图、排版和插图。数以百万计的设计师和艺术家使用Illustrator CC创作,从网页图标和产品包装到书籍插图和广告牌。此版本是2023版本,适配…

STM32f103入门(10)ADC模数转换器

ADC模数转换器 ADC简介AD单通道初始化代码编写第一步开启时钟第二步 RCCCLK分频 6分频 72M/612M第三步 配置GPIO 配置为AIN状态第四步,选择规则组的输入通道第五步 用结构体 初始化ADC第六步 对ADC进行校准编写获取电压函数初始化代码如下 Main函数编写 ADC简介 ADC…

Qt应用开发(基础篇)——输入对话框 QInputDialog

一、前言 QInputDialog类继承于QDialog,是一个简单方便的对话框,用于从用户获取单个值。 对话框窗口 QDialog QInputDialog输入对话框带有一个文本标签、一个输入框和标准按钮。输入内容可以字符、数字和选项,文本标签用来告诉用户应该要输入…

Linux服务——nginx的配置及模块

目录 一、nignx配置 1、nginx的配置文件 2、使用server语句块构建虚拟主机 3、alias别名 4、location语句 二、nginx模块 access模块 验证模块 自定义错误页面 日志存放位置 检测文件是否存在 长连接设置 ngx_http_autoindex_module 模块 三、nginx的高级配置 1、…

leetcode 823. 带因子的二叉树(dp+双指针+Long类型)

leetcode 823. 带因子的二叉树(dp双指针Long类型) 题目表述 给出一个含有不重复整数元素的数组 arr ,每个整数 arr[i] 均大于 1。 用这些整数来构建二叉树,每个整数可以使用任意次数。其中:每个非叶结点的值应等于它的两个子结点的值的乘积…

电商项目part10 高并发缓存实战

缓存的数据一致性 只要使用到缓存,无论是本地内存做缓存还是使用 redis 做缓存,那么就会存在数据同步的问题。 先读缓存数据,缓存数据有,则立即返回结果;如果没有数据,则从数据库读数据,并且把…

OTFS-ISAC通信最新进展

测试场景 Tx DD域帧结构导频区域 Rx DD域帧导频区域 原始星座图 信道估计及数据检测 经过MP算法后的星座图 误码率曲线

2023_Spark_实验二:IDEA安装及配置

一、下载安装包 链接:百度网盘 请输入提取码 所在文件夹:大数据必备工具--》开发工具(前端后端)--》后端 下载文件名称:ideaIU-2019.2.3.exe (喜欢新版本也可安装新版本,新旧版本会存在部分差异) IDEA …

【多线程案例】生产者消费者模型(堵塞队列)

文章目录 1. 什么是堵塞队列?2. 堵塞队列的方法3. 生产者消费者模型4. 自己实现堵塞队列 1. 什么是堵塞队列? 堵塞队列也是队列,故遵循先进先出的原则。但堵塞队列是一种线程安全的数据结构,可以避免线程安全问题,当队…

java反编译工具jd-gui使用

文章目录 一、JD-GUI介绍二、下载三、安装四、使用教程五、免责声明摘抄 一、JD-GUI介绍 JD-GUI是一个独立的图形实用程序,显示“.class”文件的Java源代码。 使用JD-GUI浏览重构的源代码,以便即时访问方法和字段。 二、下载 MAC安装包:ht…

HuggingFace 简介

HuggingFace 简介 0. HuggingFace 简介1. HuggingFace 官网地址2. HuggingFace 标准研发流程3. HuggingFace 工具集4. 编码工具4.1 编码工具介绍4.2 使用编码工具 5. 数据集工具5.1 数据集工具介绍5.2 使用数据集工具 6. 评价指标工具6.1 评价指标工具介绍6.2 使用评价指标工具…