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文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- Windows7下安装与破解IntelliJ IDEA2017(转载)
IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...
- OpenShift helm的安装
1.安装过程 下载addons的代码 $ git clone https://github.com/jorgemoralespou/minishift-addons $ cd minishift-ad ...
- Java中设置classpath、path、JAVA_HOME的作用？
1.classpath是用来找编译后的class文件的,操作系统或者编译器等会在这些目录下寻找对应的.class文件 2.path时用来找命令行执行文件的,操作系统或者其他软件会在这些目录下找对应的命 ...
- ylbtech-LanguageSamples-Porperties(属性)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Porperties(属性) 1.A,示例(Sample) 返回顶部 “属性”示例 本示 ...
- http://blog.sina.com.cn/s/blog_4a5dbd380101f031.html
http://blog.sina.com.cn/s/blog_4a5dbd380101f031.html mvn clean install
- in_array() 和array_search的区别
在判断字符串是否在某个数组里面的时候,我们会经常用到in_array()和array_search这两个函数. 他们的用法都是在数组中搜索给定的值,但是不同的是, in_array()给定的值 val ...
- mysql 比较隐秘的问题
2017-11-13 13:47:27:DEBUG DubboServerHandler-192.168.30.114:20990-thread-5 com.yryz.qshop.modules.in ...
- DevExpress TreeList使用教程之绑定多级树
DevExpress TreeList使用教程之绑定多级树 概述:TreeList控件可以同时显示树结构和其他数据列,即在一个列上建立父子关系展开或收缩,同时还可以显示其他列的内容.在TreeLi ...
- hdu 4568 Hunter bfs建图+TSP状压DP
想AC的人请跳过这一段... 题目应该都能读懂.但是个人觉得这题出的很烂,意思太模糊了. 首先,进出次数只能是一次!!这个居然在题目中没有明确说明,让我在当时看到题目的时候无从下手. 因为我想到了这几 ...
- 算法笔记_167:算法提高 矩阵翻转(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 Ciel有一个N*N的矩阵,每个格子里都有一个整数. N是一个奇数,设X = (N+1)/2.Ciel每次都可以做这样的一次操作:他从矩阵 ...