vue学习笔记3——外部引入css和路由的一部分

2023-11-16

vue学习笔记3——外部引入css和路由的一部分

从外部引入css文件

在.vue文件中

<style scoped>
     @import '../../style/basic.css';
     @import '../../style/del.css';
     @import '../../style/media.css';
</style>

后面加的scoped是H5新特性,可以锁定style的范围,此处这样写就是说引入的css只在当前的vue的主页生效。不加scoped的话,可能会影响其他vue文件中的样式。

此处可以补充学习scss(sass)

移动端应用在最外层index添加:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">

这里写图片描述
在入口文件main.js中import router from ,登录站点的时候,初次路由指向的初始文件夹的位置,会自动寻找里面对应的js文件

注意脚手架的格式要求十分严格

new Vue({ 
   router,
   store,
   //components: { App }  vue1.0的写法
   render: h => h(App)    vue2.0的写法
 }).$mount('#app') // 挂上去(我在此处省略了)

1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。

2.其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。

3.最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments。

本人在网上只查了这么多。

我在查看网上的单页应用的demo的时候发现 他们的路由配置有两种:

1.router中,只有一个router.js文件,里面引入一个app后

直接const声明变量,再响应其他文件夹中文件

在部分vue文件中,自己新建路由

2.router中细分若干功能文件件,子页划分,我感觉这样对components的层级

和管理要求较高,对于第一种,比较好理解

vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue学习笔记3——外部引入css和路由的一部分 的相关文章

  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • Vue.JS 可以与 AJAX http 调用一起使用吗?

    我正在尝试从 HTML 中执行以下操作 var vm new Vue el loginContent data main message Login isLoggedIn false loginError loginButton Login
  • Laravel Vue SPA 与 MPA/SSR

    许多 laravel vue 教程使用 ajax 调用来获取数据 看来 SPA 与 Laravel 是完全隔离的 IE Laravel 只是一个数据 API vue 应用程序也可以简单地托管在第三方外部服务器 例如 AWS S3 上 这是推
  • 是否可以限制用户登录 Firebase 应用的设备数量?

    语境 我正在帮助使用 Vue 更新 Cordova 应用程序 以从基于订阅的收入 用户必须付费才能访问该应用程序 转变为基于广告的收入 用户可以免费注册 但将拥有他们在使用应用程序时显示的广告 我们想要做的一部分是限制用户可以拥有帐户的设备
  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • 如何为 VueJS 项目设置根/基 URL

    我已经部署了一个VueJS项目到像这样的域www example com 但是 我想将其移动到子文件夹 以便我可以像这样访问它www example com v1 如何设置基础 URL 或根 URLVueJS项目 注意 这与基本 URL 无
  • Vue:单个网站可以使用多个 Vue 应用程序吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我有一个 Hugo 静态网站 我正在使用 Vue 使其动态化 我们正在转型 长期计划尚未确定 但在中期阶段我们正在使用 Vue 我已经在一个页面
  • 如何以编程方式添加 Vue 3 组件?

    Vue 3 没有 Vue extend 方法 因此这里的示例不起作用 https css tricks com creating vue js component instances programmatically https css t
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • firestore 安全规则 request.auth.uid 不起作用

    Firestore 安全规则不起作用 帮我 无法读取用户 用户 ID 的文档数据 安全规则 service cloud firestore match databases database documents match users use
  • 模拟安装挂钩 Jest 测试装置

    我正在对组件进行一些单元测试 但是 在某些组件中 我有一些东西在运行mounted使我的测试失败的钩子 我设法模拟了我不需要的方法 但是 我想知道是否有一种解决方法可以模拟mounted钩住自己 components attendeesLi
  • 从 Vue CLI 切换到使用 Spring-Boot 作为后端的 Vite,开发服务器未按预期工作

    有多种方法可以将 Vue 项目集成到 Spring Boot 项目中 使用基于 webpack 的构建工具 例如 vue cli 我已经通过以下方式成功完成了几次 配置outputDir构建过程的输出被放置在例如 static dist 最
  • npm run dev 和 npm run production 之间的区别

    我对 Laravel 和 vue js 很陌生 请让我知道它们之间有什么区别npm run dev and npm run production 这和环境有关系吗 npm run dev创建源映射并且不会缩小 js css 这使得调试和查找
  • 在渲染组件之前从 api 获取数据

    我在渲染页面之前发送 2 个 api 请求 const Profile template profile attributes null photos data function return attributes Profile attr
  • 左侧导航菜单上部隐藏

    当滚动到页面最底部时 左侧导航菜单的顶部将被隐藏 The image before scrolling is shown below 滚动后的效果如下图 我不确定此问题的确切原因 因此我将不胜感激任何有关识别和解决该问题的建议或帮助 为了确
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • Vue js动态导入组件

    我有以下父组件 它必须呈现动态子组件列表
  • 如何在生产模式下为 Chrome 扩展启用 Vue 开发工具?

    我正在构建一个 chrome 扩展 并使用 vue cli webpack 配置 我希望能够在运行后使用 vue devtoolsnpm 运行构建命令 我尝试添加Vue config devtools true 在 main js 中 或者
  • 分页在服务器端好还是前端好? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在构建 Laravel Vue 应用程序 我想知道在后端使用分页还是在前端使用分页更好 我认为最好在每页发送尽可能少的数据的请求 但我想听听

随机推荐

  • Python Selenium搭建UI自动化测试框架

    自动化测试是软件测试中非常重要的一部分 可以提高测试效率和测试覆盖率 在UI自动化测试中 Selenium是非常流行的工具 本文将介绍如何使用Python和Selenium搭建UI自动化测试框架 一 环境准备 在开始搭建UI自动化测试框架之
  • phpmyadmin版本对应的各php版本

    phpmyadmin支持的php版本如下 phpmyadmin4 0 PHP5 2 PHP5 3 PHP5 4 PHP5 5 PHP5 6 PHP7 0 PHP7 1 PHP7 2 PHP7 3 PHP7 4 phpmyadmin4 4 P
  • linux 之 内核实时性

    1 linux 实时性方案 单内核方案 主线软实时内核 打PREEMPT RT补丁 使内核成为硬实时内核 双内核方案 主线普通内核 实时内核 例如 RT linux RTAI Xenomai 2 实时性和抢占性 实时性 实时分为硬实时和软实
  • 项目实现读写分离操作(mysql)

    读写分离 1 问题说明 2 读写分离 Master 主库 数据同步 gt Slave 从库 Mysql主从复制 mysql主从复制 介绍 mysql主从复制是一个异步的复制过程 底层是基于mysql数据库自带的二进制日志功能 就是一台或多台
  • GNU 链接脚本LDS介绍

    前言 程序的从C语言代码变成可以在目标机器上执行额文件 可以分为如下步骤 编译 预编译 将宏定义等转义编译 将C语言变成目标文件 o档案 编译 汇编 将预编译过后的目标变为目标文件 链接 合并多个目标文件 o a 等为最终的可执行文件 LD
  • 51智能小车小车之跟随(超声波的使用)(三)

    智能车的另外一种模式 跟随模式 会跟着前面的障碍物走 此模式利用两个模块 超声波模块和跟随模块 模块的使用 中间是超声波模块 两边是跟随模块 超声波控制前进后退 利用超声波测距 如果距离小于一个值小车前进 否则后退 跟随模块控制左右转动 如
  • Resulting document after update is larger than 16777216

    依赖包是 问题原因 更新文档后data的数据量太大了 超过了16M 解决办法 1 优化自己的mongo代码逻辑 取消文档中的集合存储已文档的方式存储 2 修改mongo的源码 改变源代码并从源代码构建自己的mongo版本 Note the
  • 移动端使用clipboard插件自动复制内容

    最近做一个微信商城遇到点击复制订单号 银行卡号 手机号等等一系列点击复制操作 用到了clipboard插件 支持android ios部分支持 可以通过执行ClipboardJS isSupported 来判断浏览器是否支持clipboar
  • Python已经pip安装某模块后仍然报错ImportError: No module named ***

    uwsgi no request plugin is loaded you will not be able to manage requests Problem Operational MODE preforking threaded n
  • 深富策略:权重调整拖累指数 下周操作要谨慎

    昨日沪深两市指数整体呈现震荡分化格局 上证指数与深证成指全天低开低走 弱势整理格局明显 而创业板指低开高走 反弹走势明显 但尾盘受权重回落影响 最终微幅收涨 行业概念上看 盐湖提锂 能源金属 光伏设备 游戏 化肥行业 元宇宙概念 电子竞技
  • 综合资源网大全

    特别分類 全部 網賺資源 實用 生活 有聲 電子書 辦公 職場 小學初中 公考考研等 幼兒資源 中醫相關 投資理财 情感約會 高中網課 小吃美食 風水相關 seo教程資源 網頁相關資源 福利共享資源 日賺100 3月賺10W CPA空手套白
  • python global和nonlocal_python global和nonlocal用法解析

    python global和nonlocal用法解析 这篇文章主要介绍了python global和nonlocal用法解析 文中通过示例代码介绍的非常详细 对大家的学习或者工作具有一定的参考学习价值 需要的朋友可以参考下 global和n
  • Jupyter Notebook代码折叠插件教程

    默认安装完成的 Jupyter Notebook 是没有安装插件选项的 我们可以通过下面的方法安装插件 pip install jupyter contrib nbextensions pip install jupyter nbexten
  • 微信小程序请求的封装及跨域的解决。

    我这个是把所有请求都抽离到不同页面对应的js文件中 可以方便后期的修改和排查问题 第一步 新建api文件夹并创建config js文件配置公共信息 const baseURL http xxxxxxxxxxx 配置公共地址并暴露 expor
  • [日常]实现windows的本地定时备份文件夹

    虽然网上有一些免费的文件自动备份软件 但是没有自己编写一段批处理来完成备份任务来的放心 而且不用占用系统资源 就给大家讲一下如何利用批处理完成本地文件或者文件夹的备份 该方法可把某文件夹下的文件同步到另外的文件夹 可忽略已经存在的文件 可根
  • Can't use Subversion command line client:svn

    1 在Intellij IDEA里checkout东西时出先这个错误提示 Can t use Subversion command line client svn Subversion command line client version
  • 怎么将服务器文件移动到根目录,如何要移动的Nginx Web根目录移到新位置上的Ubuntu 16.04...

    介绍 在Ubuntu上 在默认情况下 Nginx的Web服务器中存储其文件 var www html 通常位于根文件系统与操作系统的其余部分 有时 尽管将文档根目录移动到其他位置 如单独安装的文件系统 很有帮助 例如 如果您从同一Nginx
  • trading view实现

    TradingView udf模式 近期k线更新 刚趟完坑 简单总结一下 第一步 申请tv 官网地址 https cn tradingview com 注 需以公司名义申请 第二步 相关资料 文档 https b aitrade ga bo
  • 特殊乘法。。

    题目描述 写个算法 对两个小于1000000000的输入 求特殊乘法的结果 特殊乘法举例 123 45 1 4 1 5 2 4 2 5 3 4 3 5 输入 两个小于1000000000的数 输出 输入可能有多组数据 对于每组数据 Inpu
  • vue学习笔记3——外部引入css和路由的一部分

    vue学习笔记3 外部引入css和路由的一部分 从外部引入css文件 在 vue文件中 后面加的scoped是H5新特性 可以锁定style的范围 此处这样写就是说引入的css只在当前的vue的主页生效 不加scoped的话 可能会影响其他