vue的单文件组件
五、 单文件组件
1. .vue文件
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js .vue文件由三部分组成：<template>、<style>、<script>
<template>
html
</template> <style>
css
</style> <script>
js
</script>
2. vue-loader
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的
3. webpack
webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出 [官网](http://webpack.github.io/) webpack版本：v1.x v2.x webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下 4. 示例，步骤： 4.1 创建项目，目录结构 如下：
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件 4.2 编写App.vue 4.3 安装相关模板
cnpm install vue -S cnpm install webpack -D
cnpm install webpack-dev-server -D cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板 合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler 4.4 编写main.js
4.5 编写webpack.config.js
4.6 编写.babelrc
4.7 编写package.json
4.8 运行测试
npm run dev
//webpaack.config.js
module.exports={
entry:'./main.js',//入口文件
output:{
path:__dirname,//项目根路径
filename:'bundle.js'//打包后的文件，需要手动引入到index.js中
},
// 配置模块加载器
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
}
]
}
}
//package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack-dev-server --open --hot --port 8800"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
//index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>
//App.vue
<template>
<div id="itany">
<h1>welcome</h1>
<h2 @click="change">{{name}}</h2>
<User></User>
</div>
</template> <script>
import User from './components/User.vue'
export default {
name: "app",
data(){
return {
name:'tom'
}
},
methods:{
change(){
this.name='汤姆';
}
},
components:{
User
},
}
</script> <style scoped>
body{
background-color:#ccc;
}
</style>
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
//main.js
//使用ES6语法引入模块
import Vue from 'vue'
import App from './App.vue'//引入自定义模块，当前目录下要加./
new Vue({
el:'#app',
renter:function(h){
return h(App);
}
})
//babelIrc
{
"presets":[
["env",{"module":false}]
]
}
vue的单文件组件的更多相关文章
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- 前端学习笔记系列一：2 Vue的单文件组件
(1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
- vue 创建单文件组件 注册组件 以及组件的使用
<template> <div id="app"> <v-home></v-home> <hr > <br> ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vuejs - 单文件组件
为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- [Android Pro] 使用CursorLoader异步加载数据 from 3.0
Android 3.0引入了CursorLoader实现异步加载数据,为了避免同步查询数据库时阻塞UI线程的问题.在API 11之前可以通过下载支持库,来使之前的系统支持此功能,下载页面为 http: ...
- Jenkins和Docker以及Kubernetes结合考虑
今天搞了一下Jenkins和Docker的结合,我在想几个问题: 构建是经常的,构建最大的目标还是生成一个包或者应用 发布应用也是频繁的,发布本质上是把这个包放到可运行的环境中便于测试 如果每次构建我 ...
- linux面试题目--1
Linux面试题目 填空题1. 在Linux系统中,以 (文件)方式访问设备 .2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用i节 ...
- synchronized 线程同步-类级别锁定
1.demo 说明:代码中通过 printNum 方法传入参数判断 a.b 分别对 num 这个参数的值进行了修改. package demo1; import sun.applet.Main; pu ...
- apache无法启动：The request operation has failed
apache无法启动提示the requested operation has failed 的错误信息,有以下几种解决方法:1.80端口占用 apache默认使用的端口是80,而IIS和迅雷用的也是 ...
- VC在windows中打开文件夹并选中文件
网上一位前辈高人的一段精髓代码让我眼前一亮…… ShellExecute(NULL, "open", "explorer.exe", "/select ...
- iOS 8 Share Extension Safari URL Example（在iOS中分享url的样例）
ios8 的Extension给我们提供了非常多奇妙的功能.以后分享内容再也不用进入app了,让我们的手机更安全,以下我们以在safari 浏览器中分享一个web url 来讲述Share Exten ...
- LeetCode-NQueensII
经典的N皇后问题, 这里学到了一个非常牛的新方法(http://www.matrix67.com/blog/archives/266),用位运算来求解N皇后问题: 思路其实也很容易懂,一点都不复杂, ...
- shader学习之路（1）- half lambert
在学习这个shader之前先提个经常使用概念.即光照模型.LightModel(光照模型)即是对于物体怎么对打在其上的光做出视觉反应的数学模型.意即表达物体对光反应产生的视觉效果与入射光.物体表面属性 ...
- nginx location静态文件配置
进入nginx安装目录的conf目录下,修改nginx.conf文件,在一个server{}中添加 一个location 部分配置代码如下 root@ubuntu:/usr/local/nginx/c ...