欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html页面引入vue

程序员文章站 2022-06-06 20:25:19
...

 

基础环境

①所需的基本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.push
    VueLoad.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 = res
    return 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
        }
    }
    //跨域请求,允许保存cookie
    this.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_TOKEN
 
    return 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/[email protected]/nprogress.js"></script>
<link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet">
<script>
...
​
httpClient.install(axios).init({
    baseUrl: "/api",
    timeout: 15000,
}).interceptors({
    //根据选择可以是否引入
    NPgres: NProgress
})  
            
...
</script>
相关标签: Vue html引入vue