五、 单文件组件

 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. 如何实现jenkins的多平台任务同时执行
			
    如果需要我们的程序在多个平台(linux.mac.window)同时执行,该如何操作 1.首先需要构建一个“多配置项目” 2.配置项目在过个平台上运行
    
			
    2. 
						
  2. SQLAlchemy中filter()和filter_by()的区别
			
    1.filter引用列名时,使用“类名.属性名”的方式,比较使用两个等号“==” 2.filter_by引用列名时,使用“属性名”,比较使用一个等号“=” 3.在使用多条件匹配的时候,filter需要 ...
    
			
    3. 
						
  3. sqlserver的CTE实现递归查询
			
    --递归查询 IF OBJECT_ID('DiGui','U') IS NOT NULL DROP TABLE DiGui CREATE TABLE DiGui( Id ), ParentId ) ) ...
    
			
    4. 
						
  4. jQuery中，选择器既匹配开头又匹配结尾
			
    jQuery中,选择器既匹配开头又匹配结尾的方法: [attr^=val]attr$=val [attr^=val][attr$=val]
    
			
    5. 
						
  5. @查看MySQL版本的方法
			
    1.在终端下:mysql -V. [root@localhost bin]# mysql -V; mysql Ver 14.14 Distrib 5.6.21, for Linux (x86_64)  ...
    
			
    6. 
						
  6. BS中保存参数
			
    开发中经常需要将值存起来,当点击某一项时以便知道点击了哪一项. 一:应用JS页面跳转(牛腩中讲到) HTML: <td class="txt c"><a href ...
    
			
    7. 
						
  7. redis学习笔记——事件处理
			
    Redis服务器是一个事件驱动程序,服务器需要处理以下两类事件: 文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接,而文件事件就是服务器对套接字 ...
    
			
    8. 
						
  8. draw call 理解和优化
			
    draw call是openGL的描绘次数(directX没怎么研究,但原理应该差不多)一个简单的openGL的绘图次序是:设置颜色→绘图方式→顶点座标→绘制→结束.每帧都会重复以上的步骤.这就是一次 ...
    
			
    9. 
						
  9. NoSQL的CURD结构体的定义
			
    NoSQL的CURD结构体的定义 flyfish 2015-7-23 參考MongoDB Wire Protocol  在这里document部分使用json表示 使用boost::property_ ...
    
			
    10. 
						
  10. selenium获取html源代码
			
    # 执行js得到整个HTML html = driver.execute_script("return document.documentElement.outerHTML") 获 ...
    
			
    11.