VUE框架CLI组件化路由实现静态页面准备------VUE框架

已于 2023-12-17 17:43:48 修改
阅读量403 收藏 10
点赞数 11
分类专栏： # VUE框架 前端 文章标签： javascript 前端 html vue.js vue 前端框架 ecmascript
于 2023-12-16 16:57:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135034885
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河北</title>
    <style>
        .s1{
            margin-left: 100px;
        }
        .selected{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <h1>省份</h1>
        <ul>
            <li><a href="./hebei.html" class="selected">河北省</a></li>
            <li><a href="./henan.html">河南省</a></li>
        </ul>
    </div>
    <div class="s1">
        <h2>市区</h2>
        <ul>
            <li>石家庄</li>
            <li>唐山</li>
            <li>保定</li>
            <li>邯郸</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>河北</title>

    <style>

        .s1{

            margin-left: 100px;

        }

        .selected{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <div>

        <h1>省份</h1>

        <ul>

            <li><a href="./hebei.html" class="selected">河北省</a></li>

            <li><a href="./henan.html">河南省</a></li>

        </ul>

    </div>

    <div class="s1">

        <h2>市区</h2>

        <ul>

            <li>石家庄</li>

            <li>唐山</li>

            <li>保定</li>

            <li>邯郸</li>

        </ul>

    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河南</title>
    <style>
        .s1{
            margin-left: 100px;
        }
        .selected{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <h1>省份</h1>
        <ul>
            <li><a href="./hebei.html">河北省</a></li>
            <li><a href="./henan.html" class="selected">河南省</a></li>
        </ul>
    </div>
    <div class="s1">
        <h2>市区</h2>
        <ul>
            <li>石家庄</li>
            <li>唐山</li>
            <li>保定</li>
            <li>邯郸</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>河南</title>

    <style>

        .s1{

            margin-left: 100px;

        }

        .selected{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <div>

        <h1>省份</h1>

        <ul>

            <li><a href="./hebei.html">河北省</a></li>

            <li><a href="./henan.html" class="selected">河南省</a></li>

        </ul>

    </div>

    <div class="s1">

        <h2>市区</h2>

        <ul>

            <li>石家庄</li>

            <li>唐山</li>

            <li>保定</li>

            <li>邯郸</li>

        </ul>

    </div>

</body>

</html>

旧约Alatus
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生成静态html文件_在静态页面中使用 Vue.js
weixin_35715281的博客
02-11 4063
在静态页面中使用 Vue.js不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件.1. 创建index.htmlindex.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.这里使用element-ui的导航菜单组件搭建了一个页面框架.需要注意的是, 标签要加上 :default-active="$rout...
webpack5 + vue3快速开发html构建静态页面项目（快速开发html模板）
最新发布
Mo_jon的博客
01-06 1193
webpack5 + vue3服务端渲染 打包构建静态页面项目（快速开发html模板）
vue中引入html静态页面
热门推荐
qq_29124867的博客
01-06 1万+
功能：系统中需增加帮助中心页面，由于页面较长，需要实现锚点定位跳转。 1、开始用的路由方式，首先在router文件夹index.js里面配置静态路由，代码如下 { path: '/help', component: () => import('@/page/help'), hidden: true, } //页面代码 <div class="top_help" @click="jumpTo('/help')">帮助中心</div> jumpTo(url
VuePress 静态网站生成方法步骤
12-01
使用技术： VuePress – Vue 驱动的静态网站生成器 仓库地址：https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者：npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。 ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm insta
发现一个使用Vue语法快速生成HTML网站的工具，GridSome
敬诚为之
03-02 3199
综合使用Gridsome 和蓝湖， 就可以更快的产生一个静态HTML 站点， 节省了大量前端开发的时间
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
vue-cli基本框架elementUi+axios+mock.zip_axios_vue_vue elementui_vue-
09-21
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，主要应用于后台管理界面。它提供了丰富的 UI 组件，如表格、按钮、提示、下拉菜单等，帮助开发者快速构建美观且一致的用户界面。Element ...
基于vue-cli3的element-ui的一个项目的基础框架
02-25
6. **组件化开发**：使用 Element UI 提供的组件，结合自定义组件，实现功能丰富的页面。 7. **状态管理**：如果项目中涉及到多个组件间的数据共享，可能会使用 Vuex 进行状态管理。 8. **样式处理**：Element UI ...
详解使用vue-cli脚手架初始化Vue项目下的项目结构
11-28
1. 首先需要全局安装vue-cli，使用命令`npm install -g vue-cli`。这使得我们可以使用`vue`命令行工具。 2. 安装完成后，通过`vue -V`检查vue-cli是否成功安装以及其版本信息。 创建Vue项目时，我们通常使用`vue ...
vue-cli V3.0版本的使用详解
10-17
随着V3.0版本的推出，Vue-cli引入了基于插件的架构，并且提供了图形化用户界面（UI）以及项目的个性化配置选项，极大地简化了项目的初始化过程。 2. 安装和更新Vue-cli 要在系统中安装Vue-cli V3.0版本，首先需要在...
vue生成静态html文件_webpack – 是否可以将Vue.js模板编译为静态HTML和CSS文件？
weixin_39889788的博客
12-22 180
您正在寻找的是服务器端渲染.我建议你看看Nuxt.js.Properly configuring all the discussed aspects of a production-readyserver-rendered app can be a daunting task. Luckily, there is anexcellent community project that aims to...
vue生成静态html文件_是否可以将Vue.js模板编译为静态HTML和CSS文件？
weixin_39662721的博客
12-22 1080
最近我爱上了Vue.js的single file components。让组件的模板和样式彼此接近非常好，现在我发现我编写的bug比现在少很多，因为它很容易将页面的一部分分解并在多个地方使用。是否可以将Vue.js模板编译为静态HTML和CSS文件？我想知道是否可以将此单文件组件结构扩展为生成静态HTML页面，而不涉及Vue。例如，假设我想要一个包含标题，节和页脚的主“内容”div的页面。使用Vu...
Linux学习笔记-shell脚本拼接文件并排序
weixin_45030158的博客
09-27 2840
shell实现两个文件的拼接 在实际的数据处理中，需要将多个文件写到同一个文件中，或者实现两个文件的拼接操作，这时候可以采用如下代码： cat inputFileName1 > outputFileName cat inputFileName2 >> outputFileName 第一行的目的是将输入文件1输出到输出文件中，第二行是将输入文件二直接添加在输出文件的尾部。随后如果仍有后续文件的拼接可继续使用第二行： cat inputFileNamen >> outputFil
vue生成静态html文件_Vue项目打包成一个HTML文件(包含CSS,JS)
weixin_31620365的博客
01-13 7510
关键词：Vue打包成单文件,vue single file,Webpack打包成单文件,webpack single file,有些时候项目比较小，就是一个小工具之类啥的。想打包一个成一个HTML文件包含所有的CSS，JS。这样方便部署和分享，就是一个文件。注意事项{ path: '/foo', component: () => import('./Foo.vue')}路由懒加载不能够正确打...
vue预渲染生成静态页面_静态第一：无服务器渲染的预生成JAMstack站点作为后备
CSS 初学者指南
07-10 251
您可能会看到术语JAMstack越来越频繁地弹出。 一段时间以来，我一直很喜欢这种方法。 JAMstack的原理之一就是预渲染。 换句话说，它可以将您的网站预先生成为一组静态资产，以便可以通过CDN或其他优化的静态托管环境以最快的速度和最少的开销将其提供给您的访客。 但是，如果我们要提前预生成我们的网站，我们如何使它们具有动态感？ 我们如何建立需要经常更改的网站？ 我们如何处理诸如用户...
Vue制作静态页面--day01
m0_66711291的博客
04-22 1万+
希望能放置处游戏PHigros的界面，没有任何有用的功能，只是熟悉下vue中的一些语法。 1、脚手架创建项目 使用脚手架3.0创建项目 执行指令 vue create pgr 配置 babel，vuex，vue-router 然后删除掉多余的文件 2、vue文件快速生成 创建好vue文件后在文件内输入vue可以快速生成vue文件的框架 （之前都是手敲，后悔刚知道） 3、css文件的引入 在app.vue这个文件的css部分可以引入css文件作为全局样式 这里先引入两个——初始..
DIYGW可视化快速生成VUE3静态html页面
luck332的专栏
04-21 2448
DIYGW可视化支持导出静态html页面。DIY可视化在原有支持导出uniapp、微信小程序、支付宝小程序、百度小程序、QQ小程序、Finclip小程序等基础上，增加导出静态html页面，导出静态html页面免打包，能快速集成到传统的静态html访问的页面系统。 导出静态页面使用了有赞vant移动端类库，大家在传统的项目中，仍然会用引进vue.js vant.js加到我们的html页面里，然后html页面加上自己的实现. 特性 多个高质量组件，覆盖移动端主流场景 使用vue3+vant+js编写 集成了
SpringBoot+Vue+wangeditor实现发布富文本文章并动态转成静态html
qq_28174545的博客
11-11 1398
SpringBoot+Vue+wangeditor实现发布富文本文章并动态转成静态html。
vue 转为静态html,Vue CLI 3使用：HTML和静态资源（五）
weixin_28848833的博客
05-31 1205
HTMLpublic/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中，各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。 用来做不转义插值； 用来做 HTML 转义插值； 用来描述 JavaScript 流程控制。除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如...
vue-cli3.0实战：构建完善移动端框架
在现代前端开发中，Vue.js已经成为一个非常流行的JavaScript框架，而vue-cli3.0则是Vue.js官方提供的脚手架工具，用于快速搭建项目结构。本文将详细介绍如何使用vue-cli3.0来构建一个功能齐全的移动端应用，包含了一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值