在vue项目中添加一个html页面,开启本地服务器

在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器,

1、vue里面的html页面最好放过在public文件夹里面,但是我的vue项目没有public,就只好放在static里面了,这样可以不经过vue的路由

2、然后就是开本地服务器,当然,是基于node的,

  1)可以在这里下载 https://nodejs.org,安装完成后可以在控制台输入:node -v 查看版本号

  2)下载http-server:在控制台输入 npm install http-server -g

  3)开启本地服务器,在控制台输入 http-server 就可以了

  4)关闭本地服务器,按快捷键 CTRL-C,当显示 ^Chttp-server stopped 的时候,就是关闭成功了

原文地址:https://www.cnblogs.com/eyed/p/10619478.html

时间: 2024-10-10 03:24:08

在vue项目中添加一个html页面,开启本地服务器的相关文章

vue项目中利用popstate处理页面返回操作

需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址) 2.在methods里定义监听操作函数 3.页面销毁时,取消监听.(注意:一定要取消监听,否则其他vue路由页面也会被监听) 原文地址:https://www.cnblogs.com

Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作

1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(StudentModel.edmx)3>. 控件台代码 static void Main(string[] args) { // 创建一个网关接口,TestData是数据库名 TestDataEntities td = new TestDataEntities(); // 创建一个实体对象,Student是表映射过来的对象,将其赋值 Student st1 = new Student(); st

在Vue项目中使用html2canvas生成页面截图并上传

引入cnpm install html2canvas. html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <div class="image_tofile" ref="imageTofile"> <!-- 这里放需要截图的元素,自定义组件元素也可以 --> </div> <!-- 如果需要展示截取的图片,给一个img标签 --> <img :src="h

如何在Vue项目中使用Typescript

0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新的项目目录. mkdir typescript-vue-tutorial cd typescript-vue-tutorial 接着,在目录中创建如下目录结构. typescript-vue-tutorial/ ├─ dist/ └─ src/ └─ components/ TypeScript文件

vue项目中net::ERR_CONNECTION_TIMED_OUT错误

我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上: module.exports = { devServer: { host: '0.0.0.0', port: 8080, } } 这样重启项目,地址改为自己ip地址就可以了 原文地址:https://www.cnblogs.com/zhangshengxiang/p/10170768.html

vue 项目中当访问路由不存在的时候默认访问404页面

前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

在 Vue 项目中引入 tinymce 富文本编辑器

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美