html页面引入vue

基础环境

①所需的基本ui组件

基本后台模块 element、iview ，手机端可以mui 、 uniapp

②所需Vue版本

建议官方最新版本为准，稳定性可靠

③兼容vue文件的http-vue-loader

可以无需脚手架情况下对vue以脚手架形式编写vue文件，同时便捷了引入方式

基于Mui样例

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet"><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/http-vue-loader"></script></head><body><div id="app"><my-component /><router-view /></div><script>new Vue({el: '#app',components: {'my-component': httpVueLoader('components/body-see.vue'),}});</script></body>
</html>

组件部分

<template><div class="hello"><header class="mui-bar mui-bar-nav"><h1 class="mui-title">{{who}}</h1></header></div>
</template>

<script>module.exports = {data: function() {return {who: 'world'}},}
</script>

<style>.hello {background-color: #ffe;}
</style>

一、参数传递差异性

参数传递与正常webpack模式一致，可以引用官方传参的方式进行传值操作

同时官方中的v-bind 依旧可以转换为 :

一般来说HTML中页面引入vue的参数值，需要以data或props传递 1、index.html中若需多个js互相引用，建议vue对象以var设置为全局对象
2、建议在初始化的时候就命名好data与props对象3、存在大小写值时，会以‘-’来自动区分，例如 testDemo,参数值传递的时候，以test-demo为基准

动态设置data/props

#格式上采用以下这种形式，默认上，数据赋值类型上都以此形式为准#设置data动态值vue.$data.datademo = "23"
#设置props动态值vue.$props.propsdemo = "678"

二、路由定制（vue-router）

默认此处定义变量为 router

//引入vue-router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

①路由抽离

#page.js 类似路由的一个个例
const routes = [{path: '/one',name: '1',component: httpVueLoader('components/body-one.vue')},{path: '/two',name: '2',component: httpVueLoader('components/body-two.vue')}
]

②整合vue-loader与路由

#./js/router/router-plugin.js 负责挂靠vue-loader和路由

#用于Vue实例中注册路由使用
let router = null

let RouterPlugin = function() {this.$router = null
}

/*** 安装VueRouter与挂载路由* @param {Object} VueLoad  加载VueRouter* @param {Object} list     分页*/
RouterPlugin.loadVueRouter = function(VueLoad, list) {router = new VueLoad({routes: list})
this.install(router)this.clearOriginalRouterErr(router)return RouterPlugin
}

/*** 用于清除重复打开某一地址栏的错误信息* @param {Object} VueLoad   加载VueRouter*/
RouterPlugin.clearOriginalRouterErr = function(VueLoad) {const originalPush = VueLoad.prototype.pushVueLoad.prototype.push = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err)}
}

/*** @param {Object} router 自定义VueRouter方法*/
RouterPlugin.install = function(router) {this.$router = router
this.$router.$avueRouter = {//正则处理路由validPath: function(list, path) {let result = false;list.forEach(ele => {if (new RegExp("^" + ele + ".*", "g").test(path)) {result = true}});return result;},}#website.whiteList 为url路径列表，主要用于白名单免检列表this.$router.beforeEach((to, from, next) => {if (router.$avueRouter.validPath(website.whiteList, to.path)) {next()} else {next('/')}})
}

③整合html页面（含初始化vue的页面）

...
<script src="./js/vue-router.js"></script>
<script src="./js/router/page.js"></script>
<script src="./js/router/router-plugin.js"></script>
...

<body><div id="app"><p><router-link to="/one">Go to one</router-link><router-link to="/two">Go to two</router-link></p><router-view></router-view></div>
</body>
···
<script>#pageRouter 代表第一个路由设置，page2Router代表第二个路由设置RouterPlugin.loadVueRouter(VueRouter,[].concat(pageRouter, page2Router))var vue = new Vue({router,el: '#app',})
<script>

④导航编程式路由

...
#vue的传统方法
methods: {clickit() {this.$router.push({path: `one`})}
}

对应html
<button @click="clickit()">2</button>
...

#js的传统方法
function clickit() {this.vue.$router.push({ path: `one` })
}

对应html
<button onclick="clickit()">1</button>

三、Http请求处理（axios）

引入axios 优化ajax的请求处理机制

默认此处定义为request

//引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

①定制化httpClient

#./js/httpClient.js

var request = null


let httpClient = function() {this.request = null
}


httpClient.install = (res => {this.request = resreturn httpClient
})


/*** @params {object} * 1、baseUrl 基础url* 2、timeout 超时时间设置* 用于初始化请求返回数据格式为json格式*/
httpClient.init = (params => {if (undefined != params) {if (undefined != params.baseUrl) {this.request.defaults.baseUrl = params.baseUrl}if (undefined != params.timeout) {this.request.defaults.timeout = params.timeout}}//跨域请求，允许保存cookiethis.request.defaults.withCredentials = true;this.request.defaults.headers.post['Content-Type'] = 'application/json';this.request.defaults.headers.get['Content-Type'] = 'application/json';this.request.defaults.headers.put['Content-Type'] = 'application/json';this.request.defaults.headers.delete['Content-Type'] = 'application/json';return httpClient
})


/*** @params {object} * 1、NPgres  页面加载条* 2、requestHandler *      对数据请求前预处理及错误预处理* 3、responseHandler*      对数据返回的结果进行处理及错误处理* 用于初始化请求返回数据格式为json格式*/
httpClient.interceptors = (params => {let NProgress = {start: () => {},done: () => {}}let requestHandler = {advance: () => {},error: () => {}}let responseHandler = {advance: () => {},error: () => {}}
if (undefined != params) {if (undefined != params.NPgres) {NProgress = params.NPgres}}
//HTTP request拦截request.interceptors.request.use(config => {requestHandler.advance(config)NProgress.start()return config}, error => {requestHandler.error(error)return Promise.reject(error)})
//HTTP response拦截request.interceptors.response.use(data => {responseHandler.advance(data)NProgress.done()return data}, error => {NProgress.done()responseHandler.error(error)return Promise.reject();});
})

②请求头设置

## 以授权为例子，描述请求头标识的问题，AUTH_TOKEN 为自己提供的一个存储值
#1、可以在请求头拦截器中配置信息

axios.interceptors.request.use(config => {config.headers['Authorization'] = AUTH_TOKENreturn config
}#   初始化拦截校验中配置信息       axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

③整合html页面

# 引入httpClient
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/httpClient.js"></script>

#若需要引入Npgress可以引入
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet">
<script>
...

httpClient.install(axios).init({baseUrl: "/api",timeout: 15000,
}).interceptors({//根据选择可以是否引入NPgres: NProgress
})  ...
</script>

html页面引入vue相关推荐

html页面引入vue.js + elementUI 离线包快速开发前端页面
背景需要开发一个页面,页面复杂,原生H5不熟悉.项目要求开发一键打开的html页面,不需要任何运行环境,例如node等.最后决定采用html + vue.js + elementUI离线开发. 离线 ...
vue 页面引入多个内部js_.html多页页面引入vue.js怎么开发？
vue.config里可以配置多页面应用module.exports = { // publicPath: process.env.NODE_ENV === 'production' // ? 'ht ...
VUE2.0 学习（一）HTML单页面使用vue技术
目录先下载vue.js 入门全局配置浏览器控制台报错指令语法 v-bind v-model v-on data的两种写法 MVVM 事件修饰符 prevent修饰符 stop 修饰符 once修 ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
在 HTML 中引入 vue.js 写页面
突然说要写两个页面(只有两个页面,不是一个完整的项目..),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢,其他框架不是很熟悉.但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记. 一.前期 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
vue页面引入另一个页面
需求描述定时任务管理页面,在页面里点击查看日志按钮,弹框显示该任务执行的日志有单独的日志页面,该页面可以查看所有任务执行的日志记录为了避免写重复代码,在定时任务页面的查看日志弹窗里引入日志页面 ...
require引入js vue_请教关于使用require 引入vue 和公共js的问题
移动端布局计算font-size的 1.引入公共样式失败.没有去计算 2.aa 是vue 引入成功. 但是我以后一个文件需要一个vue 文件应该怎么引入好点啊. 怎么分解开进行引入? 3.在vu ...
HTML引入vue.js，在ie浏览器中不显示
因为只有两个页面,所以我没有用 vue-cli 搭框架,直接在 HTML 中引入vue.js 文件.发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie ...

html页面引入vue

基础环境

基于Mui样例

一、参数传递差异性

二、路由定制（vue-router）

三、Http请求处理（axios）

html页面引入vue相关推荐

最新文章

热门文章