vue项目用插件http-server手机显示

2024-11-04

【vue】http-server开启本地服务

在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器. 可以利用node.js中的http-server,开启本地服务,步骤如下: 1 下载node.js 官网地址: https://nodejs.org/ 下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本,确认是否安装成功. 2 下载http-server 在终

vue项目在安卓低版本机显示空白原因

vue项目在安卓低版本机显示空白原因: 可能的原因一: 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网上找到方法如下: https://blog.csdn.net/anxin_wang/article/details/78873359 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save

vue项目及插件

vue项目的创建方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(P

vue 项目设置实现通过本地手机访问

1.查询ip地址 win+R打开cmd 窗口输入ipconfig 找到IPV4地址 192.168.x.xxx 2.在vue项目config文件夹中的index.js,将localhost换为ipv4地址 host: '192.168.x.xxx', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a fre

Vue项目功能插件

项目功能插件 vue-router { path: '/', name: 'home', // 路由的重定向 redirect: '/home' } { // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签 path: '/one-view', name: 'one', component: () => import('./views/OneView.vue') } { // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>

VUE项目用hbuilder 打包为手机APP

一.测试项目是否可以正确运行指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件指令:npm run build 打包后会生成dist文件四.把dist文件变

webpack + vue 项目自定义插件解决前端 JS 版本更新问题

Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编码进打包后的 manifest.xxxx.js 文件中,然后通过JSONP原理按需加载每个chunk. 每个子模块加载完毕之后,浏览器将会进行本地缓存,从而节省了网络带宽. Webpack编译后的目录结构如下: 从结构目录来看,整个项目的入口就是index.html,我们来看看index.html的

vue项目未加载完成前显示loading...

1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <link rel="icon" href="/favicon.ico" mce_href="/favicon.ic

vue项目中 favicon.ico不能正确显示的问题

方法一:修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 方法二:修改webpack配置文件 1.找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: tr

vue项目多文件上传并显示在页面上

<template> <label for="file" class=" btn btn-default" style="border:1px solid red">多文件上传</label> <input type="file" style="display:none;" id="file" multiple @change="fil

本地Vue项目跨域请求本地Node.js服务器的配置方法

前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间精力.所以再搭个项目从头走一遍,不敢说是教程,仅作记录. 说明:本文项目基于 Vue CLI ^4.3.0,Node.js v12.13.0. 和 express ~4.16.1 构建,未安装的话则需要先安装,后文不再说明. 1.在桌面运行 cmd,使用命令 vue create demo 创建一个

vue-cli搭建vue项目环境

该篇文章是继https://www.cnblogs.com/qing-5/p/11321585.html来写 1.打开终端,输入指令"npm install --global vue-cli",来安装vue -cli脚手架. 该方法可能会出错,如下所示. /usr/local/lib/node_modules Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { [Error

python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

一.bootstrap组件无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件组件:html css js 组件包含插件面版虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 基本实例默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容. 带标题的面版通过 .panel-heading 可以很简单地为面板加入一

vue项目全局引入vue-awesome-swiper插件做出轮播效果

在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解. vue项目自动生成完毕后,继续在命令行窗口输入cd swiper-test,将目录切换到swiper-test. 下面就开始启动vue项目了,输入启动命令行:npm run dev. 打开浏览器输入网址:localhost:8080 环境搭好了,进入主题,要想引入

cordov vue项目中调用手机原生api

cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照比如图片上传比如定位比如扫描二维码比如支付等等 Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程: https://www.itying.com/goods-937.html 1.使用vue-cordova 插件 (不推荐使用) https://github.com/kartsims/vue-cordova 1.vue项目安装npm inst

实战：vue项目中导入swiper插件

版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容给Swiper定义一个大小初始化Swiper 我也按照这个流程编写组件: 加载插件 i

后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件一.总结一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同项目src文件夹下的main.js入口文件中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' V

Vue 自定义一个插件的用法、小案例及在项目中的应用

1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, old

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv

在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"><

用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小项目,确实是可以做服务端渲染,但是这个需要在服务器启动服务,当时我是用的docker,然后用node+nginx做了个容器,然后用pm2做进程守护. 后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多. 后面我又发现有个预渲prerender-spa-plugin染的东西,然后早

vue项目用插件http-server手机显示

热门专题