8.0 vue cli自定义页面
1.新建a.html（public文件夹下）文件，并设定div的id=“a”
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="a"></div>
</body>
</html>
2.新建a.vue文件，注意文件的路径，本案例在src文件夹下
<template>
<div id="a">
{{name}}
</div>
</template> <script>
export default {
data() {
return {
name:jack,
};
},
name: "A",
components: {
//HelloWorld
},
};
</script> <style>
</style>
3.新建a.js文件（src文件夹下）
import Vue from 'vue'
import Backstage from './a.vue' new Vue({
render: h => h(A),
}).$mount('#a')
4.新建vue.config.js文件（很关键，这个文件可以让vue能找到上述自定义的文件）
module.exports = {
pages: {
mould: {
entry: 'src/a.js', //配置入口js文件
template: 'public/a.html', //主页面
filename: 'a.html', //打包后HTML文件名称
title: '测试自定文件' //打包后。HTML文件标题
}
}
}
8.0 vue cli自定义页面的更多相关文章
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- @vue/cli 4.0.5 学习记录
1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 专访Vue作者尤雨溪：Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
随机推荐
- 数据库遇到的问题之“datetime设置默认为CURRENT_TIMESTAMP时报无效默认问题”和“时区问题”
一.问题1 问题描述: 今日加入创建时间和修改时间,并设置为默认CURRENT_TIMESTAMP时,出现错误,指向sql中的datetime字段,查了一下,发现是版本问题 立马查询自己的MySQL版 ...
- 获取Java数据库中结果集的每个字段名和个数
/** * 查询到多条数据, 封装到List<Map> */public List<Map<String, Object>> queryForMapList(Str ...
- Polymer API开发指南 (二)（翻译）
公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...
- JavaScript中函数节流的理解
函数节流的原理 函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发.一般我们会给他起一个名字throttle.也就是节流的意思.一般这样的函数 ...
- 微信小程序要求HTTPS，如何选择SSL证书？
为了保护小程序应用安全,微信官方的需求文档要求,每个微信小程序必须事先设置一个通讯域名,并通过HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.因此开发者应先准备好配置好HTTPS证书的域名 ...
- 如何实现多个接口Implementing Multiple Interface
4.实现多个接口Implementing Multiple Interface 接口的优势:马克-to-win:类可以实现多个接口.与之相反,类只能继承一个超类(抽象类或其他类). A class c ...
- centos6的yum源更新版本
概述 centos6系统从2020年12月1号开始不再维护,官方的yum源不再可用,同时国内的阿里云镜像和163镜像也都不再可用. 但是我们有一些老的服务器仍然在使用centos6系统版本,依赖库的安 ...
- 还原lvm逻辑卷创建整个过程
很多情况入职的时候,系统可能已规划过的,但是有的信息也不是很完整,比如下面的lvm逻辑卷我们先不管对与错,利用一些工具来了解当前lvm逻辑卷的情况 系统采样: [root@fp-web-112 var ...
- 携程apollo配置中心服务端如何感知配置更新？
引言 前面有写过一篇<分布式配置中心apollo是如何实时感知配置被修改>,也就是客户端client是如何知道配置被修改了,有不少读者私信我你既然说了client端是如何感知的,那服务端又 ...
- CuteBot智能小车
原因 近期,别人送了我一个CuteBot智能小车,拆开一看做工挺精致的,但是这东西是积木图形编程,显然不适合我这个年龄,所以打算给家里的小孩玩. 那么,你可能会问了,为什么要写这篇文章呢?答案当然是用 ...