五、 单文件组件

 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的单文件组件的更多相关文章
	

    
						
  1. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
		
    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
    
		
    2. 
						
  2. Vue之单文件组件的数据传递,axios请求数据及路由router
		
    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
    
		
    3. 
								
  3. vue.js单文件组件中非父子组件的传值
		
    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
    
		
    4. 
						
  4. 前端学习笔记系列一：2 Vue的单文件组件
		
    (1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
    
		
    5. 
						
  5. vue 创建单文件组件 注册组件  以及组件的使用
		
    <template> <div id="app"> <v-home></v-home> <hr > <br> ...
    
		
    6. 
						
  6. vue单文件组件的构建
		
    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
    
		
    7. 
						
  7. Vuejs - 单文件组件
		
    为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...
    
		
    8. 
						
  8. webpack入坑之旅（五）加载vue单文件组件
		
    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
    
		
    9. 
						
  9. Vue单文件组件基础模板
		
    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 新公司官网项目优化实践（Vue）
			
    入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...
    
			
    2. 
						
  2. [转]SQL 2005 开启OpenRowset/OpenDatasource的办法
			
    本文转自:http://www.cnblogs.com/chenghm2003/archive/2008/09/12/1289793.html 1.开始 —> 所有程序  —> Micro ...
    
			
    3. 
						
  3. 纯 PHP 代码最好在文件末尾删除 PHP 结束标记
			
    如果文件内容是纯 PHP 代码,最好在文件末尾删除 PHP 结束标记.这可以避免在 PHP 结束标记之后万一意外加入了空格或者换行符,会导致 PHP 开始输出这些空白,而脚本中此时并无输出的意图. & ...
    
			
    4. 
						
  4. 如何访问python类中的私有方法
			
    在python中,不像c#/java类语言,支持类的私有方法,这点有点像objc,虽然objc可以通过扩展extension来实现,但源于objc的运行时特性,我们还是可以通过非常手段来进行访问的.不 ...
    
			
    5. 
						
  5. 对Class.getResourceAsStream和ClassLoader.getResourceAsStream方法所使用的资源路径的解释
			
    这是个非常基础的问题了,这里提供一些演示样例,帮助高速理解和记忆这个问题. 在该方法的文档:http://docs.oracle.com/javase/7/docs/api/java/lang/Cla ...
    
			
    6. 
						
  6. [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
			
    HTMLTemplates are part of the web components specification. In this lesson we will learn what are HT ...
    
			
    7. 
						
  7. 我的Android进阶之旅------&gt;Android关于TextWatcher的初步了解
			
    首先来看一下TextWatcher的源码 package android.text; /** * When an object of a type is attached to an Editable ...
    
			
    8. 
						
  8. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误
			
    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...
    
			
    9. 
						
  9. Android TabHost控件 右侧留空并增加按钮
			
    涉及公司内部程序,部分地方进行模糊处理. 公司Android程序的一个子程序UI要进行改版,最初的UI添加按钮是在内容区,而且TabHost空间是正常的标题平均分布.如下图(其实这是改版的第一版,没有 ...
    
			
    10. 
						
  10. Android常用酷炫控件(开源项目)github地址汇总
			
    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...
    
			
    11.