vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component
来定义全局组件,这种方式在很多中小规模的项目中运作的很好。
但当在更复杂的项目中,就有了很大的弊端。
我们就可以用文件扩展名 .vue的单文件组件来解决这些问题。
我们建议你参考 webpack-simple ,只要遵循指示,你就能很快的运行一个用到 .vue
组件 。
这是vue-cli的项目模板。
npm install -g vue-cli
vue init webpack-simple my-project
cd my-project
npm install
npm run dev
npm run dev
:Webpack +vue-loader
与适当的配置源地图和热重新加载。npm run build
:使用HTML / CSS / JS进行构建。
在App.vue中引入你项目的页面(import)
export default{
components:{
"home":Home,
"goods":Goods,
"shopcar":Shopcar
}
在component中 引用以上组件
}
在项目页面组件中的结构如下:
同样在export default中
data:fuction(){
},
methods:{
}
这里要注意一点的是data是一个方法 就这个特殊
完成后 npm run build 完成打包 代码会自动压缩
index.html dist文件夹
这两个一起拿出来 就可以上线了
以上就是vue单页面组件的构建
vue单文件组件的构建的更多相关文章
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- Oracle-11g 基于 NBU 的 rman 冷备份及恢复
html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...
- Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储
在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- Oracle 12cR1 RAC 在VMware Workstation上安装(上)—OS环境配置
Oracle 12cR1 RAC 在VMware Workstation上安装(上)-OS环境配置 1.1 整体规划部分 1.1.1 所需软件介绍 Oracle RAC不支持异构平台.在同一个集群 ...
- 初识servlet--未完成
servlet到底是什么呢?今天我们一起看一下. 首先说下servlet是干啥的.servlet主要干这么一个事情:创建动态的问页面. servlet主要的功能是,访问外网,连接外部接口.它可以做如下 ...
- matlab 向量法建数组(推荐)
一.用赋值的方法可以扩展一个已知的数组: arr= 1:1:4; arr(8)=6; 此时,arr = 1 2 3 4 0 0 0 6 arrNew=arr; 此时arrNew = 1 2 3 4 0 ...
- Windows 10 IoT Serials 6 - 如何修改IoTStartupOnBoot.cmd文件
使用Windows 10 IoT Core系统的朋友应该会比较熟悉IoTStartupOnBoot.cmd文件,该文件是系统启动以后加载的批处理文件,一般会包含应用.服务和后台的启动,比如WinRM. ...
- devexpress表格gridcontrol实现分组,并根据分组计算总计及平均值
1.devexpress表格控件gridcontrol提供了强大的分组功能,你几乎不用写什么代码就可以实现一个分组功能,并且可根据分组计算总计和平均值.这里我例举了一个实现根据班级分组计算班级总人数, ...
- BZOJ 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复(最大生成树)
这很明显就是最大生成树= = CODE: #include<cstdio>#include<iostream>#include<algorithm>#include ...
- 强化学习读书笔记 - 02 - 多臂老O虎O机问题
# 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...