不使用脚手架的 vue 应用
时间:2020-04-21
本文章向大家介绍不使用脚手架的 vue 应用,主要包括不使用脚手架的 vue 应用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
工作中的项目不止有页面繁多的模块化项目,还会只有一两个页面的类似于填写信息参与活动的活动页。这个时候,就可以回归以前的三剑客模式,在 index.html 里引用 vue.js 进行开发。
关键点:
- 引入 babel-polyfill 以转换 es6 的代码,需要作为第一个引入的 script 脚本
- 将所用到的第三方库的 css 和 js 下载到本地引用
- 可以拆分公共组件,通过 script 引入使用
- 上线时,需要手动切换接口地址
主页面基本代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale = 1.0, width = device-width, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0">
<meta name="x5-orientation" content="portrait">
<title>测试</title>
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./swalAlert2.css">
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./mint.css">
</head>
<body>
<div id="app">
<my-header></my-header>
<div class="container" v-show="!showExample"></div>
<div class="btn">
<mt-button @click="submit">确定提交</mt-button>
</div>
<div class="rules">
<h3>活动规则</h3>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</div>
</div>
<div @click="closePic" v-show="showExample">
<img src="img/order-copy.jpg" width="100%">
</div>
<mt-popup v-model="showBigPic" popup-transition="popup-fade">
<img src="img/Praise_img_sample-graph_full_default@2x.jpg" class="pop-img" @click="showBigPic=false">
</mt-popup>
</div>
<script src="./polyfill.min.js"></script>
<script src="./swalAlert2.js"></script>
<script src="./axios.js"></script>
<script src="./vue-minify.js"></script>
<script src="./mint.js"></script>
<script src="./header.js"></script>
<script>
var instance = axios.create({
timeout: 10000,
transformResponse: [function (data) {
var value = JSON.parse(data);
if (value.state_code === 60028) {
return {
reason: value.data,
title: value.info
};
}
return value;
}]
});
new Vue({
el: '#app',
data: function data() {
return {
list: [],
uploading: false,
showPic: true,
imageUrl: 'img/buyer_uploadImg.png',
token: '',
showBigPic: false,
showExample: false,
phone: null,
order: null
};
},
methods: {
toPicTure: function toPicTure() {
this.showExample = true;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
instance({
method: 'post',
url: 'xxxx',
data: 'fdsfdaf',
headers: 'fds=xofda'
})
.then((data) => {})
.catch((failed) => {})
}
},
created: function created() {
this.getFontSize();
this.getToken();
}
});
</script>
</body>
</html>
代码主要是两部分,设置 axios 的选项,实例化 Vue,Vue 里的参数和单文件组件的一样。
公共组件基本代码如下:
var headerTemplate = '<div> header HTML 代码</div>'
Vue.component('my-header', {
template: headerTemplate,
data: xxx,
methods: {}
// ...
})
代码主要是给全局 Vue 对象添加组件
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12746213.html
- 性能下降的不定时炸弹_过旧的sql_profile(r3笔记第9天)
- 关于抓取session信息的一个脚本(r3笔记第8天)
- oracle PL/SQL中的重载 (r3笔记27天)
- 使用Python进行描述性统计
- 关于修改分区表的准备和操作细则(r3笔记26天)
- 一条"简单"的sql语句和小兔子买面包的故事 (r3笔记第25天)
- 生产环境sql语句调优实战第八篇(r3笔记第24天)
- Python做文本挖掘的情感极性分析
- 通过vmstat的简单分析数据库操作 (r3笔记23天)
- 海量数据迁移之一个误操作的问题总结(r3笔记第21天)
- 关于dblink锁定带来的问题(r3笔记第20天)
- 利用sql语句解决简单的数学题(r3笔记第19天)
- 用XGBoost做时间序列预测—forecastxgb包
- 数据挖掘算法(logistic回归,随机森林,GBDT和xgboost)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swift 的 MemoryLayout 是如何工作的(1)
- Redis - NoSQL 和 Jedis 入门
- cargo manifest规则使用介绍
- 小程序bindinput和bindblur赋值延迟问题解决
- 小程序监听屏幕滑动事件
- 使用GithubActions发布Vue网站到GithubPage
- 3.QOpenGLWidget-通过着色器来渲染渐变三角形
- 特斯拉大半夜「见鬼」!空无一人的路上,它却看见「幽灵」秒刹车
- .NET 异步详解
- 他被导师半夜敲门叫醒:你得诺贝尔奖了!还曾为5G频谱拍卖设计方案,担任谷歌IPO咨询顾问
- C#实现——十大排序算法之选择排序
- CSS高级技巧 CSS用户界面样式
- 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建
- Sentinel断路器与熔断降级【源码笔记】
- 数据分析、数据挖掘基础:描述统计学基础知识分享!