vue入门之单文件组件
介绍
在很多 Vue 项目中,我们使用 Vue.component
来定义全局组件,紧接着用 new Vue({ el: '#container '})
在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的
\
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue
的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue
的简单实例:
现在我们获得:
正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 Pug,Babel (with ES2015 modules),和 Stylus。
这些特定的语言只是例子,你可以只是简单地使用 Babel,TypeScript,SCSS,PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader
使用 webpack,它也能为 CSS Modules 提供头等支持。
Vue Loader 是什么?
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件:
<template>
<div class="example">{{ msg }}</div>
</template> <script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script> <style>
.example {
color: red;
}
</style>
Vue Loader 还提供了很多酷炫的特性:
- 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在
<style>
的部分使用 Sass 和在<template>
的部分使用 Pug; - 允许在一个
.vue
文件中使用自定义块,并对其运用自定义的 loader 链; - 使用 webpack loader 将
<style>
和<template>
中引用的资源当作模块依赖来处理; - 为每个组件模拟出 scoped CSS;
- 在开发过程中使用热重载来保持状态。
简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用。
起步
Vue CLI
如果你不想手动设置 webpack,我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用。
如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南。
手动设置
安装
你应该将 vue-loader
和 vue-template-compiler
一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户:
npm install -D vue-loader vue-template-compiler
vue-template-compiler
需要独立安装的原因是你可以单独指定其版本。
每个 vue
包的新版本发布时,一个相应版本的 vue-template-compiler
也会随之发布。编译器的版本必须和基本的 vue
包保持同步,这样 vue-loader
就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue
包时,也应该匹配升级 vue-template-compiler
。
webpack 配置
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader
应用到所有扩展名为 .vue
的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin()
]
}
这个插件是必须的! 它的职责是将你定义过的其它规则复制并应用到 .vue
文件里相应语言的块。例如,如果你有一条匹配 /\.js$/
的规则,那么它会应用到 .vue
文件里的 <script>
块。
一个更完整的 webpack 配置示例看起来像这样:
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
{
test: /\.js$/,
loader: 'babel-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// 请确保引入这个插件来施展魔法
new VueLoaderPlugin()
]
}
你也可以在选项参考查阅所有可用的 loader 选项。
警告
如果你在开发一个库或多项目仓库 (monorepo),请注意导入 CSS 是具有副作用的。请确保在 package.json
中移除 "sideEffects": false
,否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。
Vue CLI
vue可视化配置方式
1 可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli

2 启动vue ui
vue ui
vue入门之单文件组件的更多相关文章
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- Vue -3:单文件组件
在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...
- Vue中创建单文件组件 注册组件 以及组件的使用
<template> <div id="app"> <v-home></v-home> <hr > <br> ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
随机推荐
- dede:channel二级导航currentstyle属性失效问题
dede:channel默认只作用在一级导航中,在调用下级导航(type='son')时,发现不起作用. 修改方法:修改 include/taglib/channel.lib.php 第133行.if ...
- idea 如何优雅的添加.ignore 忽略不必要提交的文件
最近有点时间然后就跑去搜了下idea热门的插件,一不小心发现了一个.ignore插件.有过在idea使用git都知道.gitignore文件,而这个插件就是能优雅的帮我们做这件事. 首先先讲下安装这个 ...
- LeetCode429. N-ary Tree Level Order Traversal
题目来源:429. N-ary Tree Level Order Traversal https://leetcode.com/problems/n-ary-tree-level-order-trav ...
- Kafka设计解析(八)Exactly Once语义与事务机制原理
转载自 技术世界,原文链接 Kafka设计解析(八)- Exactly Once语义与事务机制原理 本文介绍了Kafka实现事务性的几个阶段——正好一次语义与原子操作.之后详细分析了Kafka事务机制 ...
- spark机制理解(一)
一 基本术语 Application: 基于Spark的用用户程序,包含了Driver程序和集群上的Executor. Driver Program: 运行行main函数并且新建SparkCont ...
- PCL利用RANSAC自行拟合分割平面
利用PCL中分割算法. pcl::SACSegmentation<pcl::PointXYZ> seg; ,不利用法线参数,只根据模型参数得到的分割面片,与想象的面片差距很大, pcl:: ...
- jQuery----操作类样式(依托开关灯案例)
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...
- 20155212 2016-2017-2 《Java程序设计》第9周学习总结
20155212 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 Chapter16 数据库本身是个独立运行的应用程序. 应用程序如何呼叫这组链接库? 不同的 ...
- QtGUI Module's Classes
Qt GUI C++ Classes The Qt GUI module provides the basic enablers for graphical applications written ...
- 9.26 开课第二十三天 (JS表单验证)
<form action="lizi1.html" method="post"> 非空验证 <input type="text&qu ...