五、 单文件组件

 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. python学习:Windows 下 Python easy_install 的安装
			
    Windows 下 Python easy_install 的安装     下载安装python安装工具下载地址:http://pypi.python.org/pypi/setuptools 可以找到 ...
    
			
    2. 
						
  2. phpMyAdmin配置
			
    一: (1):下载phpmyadmin,在官方最好               (2):个人建议最好将其安装在apache的htdocs文件中(apache的默认虚拟目录,或web访问目录)      ...
    
			
    3. 
						
  3. unity 实时间接光照 解决方案
			
    https://www.youtube.com/watch?v=D7LjsabD4V4 这个很强 他runtime bake lightprobe 之后走assetbundle加载 Place Pro ...
    
			
    4. 
						
  4. 关于typedef的用法总结（zz)
			
    不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多 的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一 ...
    
			
    5. 
						
  5. strtok()切割字符串函数
			
    #include <iostream> #include <string.h> using namespace std; char *my_strtok(char *dist, ...
    
			
    6. 
						
  6. 创建win32窗口
			
    #include <windows.h> LRESULT CALLBACK WinProc(HWND,UINT,WPARAM,LPARAM); int WINAPI WinMain(HIN ...
    
			
    7. 
						
  7. ROC
			
    # -*- coding: utf-8 -*- # __author__ = "JieYao" from biocluster.agent import Agent from bi ...
    
			
    8. 
						
  8. MQTT---HiveMQ源代码具体解释(七)Netty-SSL/NoSSL
			
    源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 实现功能 依据用户配置的不同的Listener(TcpListener.TlsTcpLi ...
    
			
    9. 
						
  9. ASP.NET MVC3 系列教程 - 模型
			
    I:基础绑定的实现 1.在前面的两篇基础文章(路由 及 控制器&视图)当中,还没对QueryString的绑定进行介绍,因为我觉得它更适合放在这一章节中去介绍.我们在用WebForm去开发的时 ...
    
			
    10. 
						
  10. PHP-PHP5.3及以上版本中检查json格式的方法
			
    function is_json($string) { json_decode($string); return (json_last_error() == JSON_ERROR_NONE); } j ...
    
			
    11.