11.解析.vue文件

最新推荐文章于 2024-03-05 21:03:59 发布

碵蝎

最新推荐文章于 2024-03-05 21:03:59 发布

阅读量1.6w

点赞数 7

分类专栏： vue

本文链接：https://blog.csdn.net/QQ408896436/article/details/79266376

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

还记得前9章我们说过，可以把template写在外面的那一部分知识么？回顾下：

但这样的做法实际上也不是很好的解决方法。如果组件太多，都写在同一个html文件上，似乎也挺乱的。

解决的方法是，把组件模块都提取出来，写在一个xxx.vue的文件上。但解析这种.vue结尾的文件也不是一份轻松的工作，你需要安装以下这些插件到你的项目中，它们分别是：

(把es6语法转换成es5，因为部分浏览器还不支持es6)

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-plugin-transform-runtime": "^6.23.0",

"babel-preset-es2015": "^6.24.1",

"babel-runtime": "^6.26.0",

（解析.vue文件里的css样式表）

"css-loader": "^0.28.9",

"vue-hot-reload-api": "^1.3.2",

（解析.vue文件里的html）

"vue-html-loader": "^1.2.4",

(解析.vue文件用)

"vue-loader": "^8.5.4",

（解析.vue文件里的内链样式）

"vue-style-loader": "^3.1.2",

(vue-loader是基于webpack的，所以需要安装webpack模块)

"webpack": "^3.10.0",

"webpack-dev-server": "^2.11.1"

为了省事，笔记已经把要安装的模块贴在下面了，大家只要把这些代码复制到你的package.json文件，在运行命令窗口，敲入cnpm install或者 npm install即可安装完成。

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.28.9",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^3.1.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "vue": "^1.0.28"
  }

提示：package.json的创建方法就是在你项目的目录下，运行cmd，输入npm init，然后根据提示输入对应的信息即可创建完成。

具体如何配置？

提示：这里我们直接跳过了安装上面说的模块步骤。若一直安装模块失败，请升级你的npm或者node.js或者使用npm install，不要使用cnpm install

1、根据下图，创建如下文件：

2、编写index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id='app'>
		<app></app>
	</div>
	<script src='build.js'></script>
</body>
</html>

提示：这里我们提前引入了一个build.js的文件，这个文件会在待会编译的时候自动生成在内存中。

3、编写入口文件main.js

import Vue from 'vue';
import App from './App.vue';
new Vue({
	el : '#app',
	components : {
		app : App
	}
});

4、编写组件App.vue

<template>
	<h1 @click='say'>{{msg}}</h1>
</template>
<script>
	export default {
	  data () {
	    return {
	      msg: 'Hello Vue'
	    }
	  },
	  methods : {
	  	say : function(){
	  		alert('Hello Vue');
	  	}
	  }
	}
</script>
<style>
	h1{color:red;}
</style>

5、配置webpack.config.js

module.exports={
	entry:'./main.js',		

	output:{
		path:__dirname,
		filename:'build.js'		
	},
	module:{
		loaders:[
			{
				test:/\.vue$/,
				loader:'vue-loader'
			},
			{
				test:/\.js$/, 
				loader:'babel-loader', 	
				exclude:/node_modules/, 
				query:{
					presets: ['es2015'],
					plugins:['transform-runtime']
				}
			}
		]
	}
};

6、配置启动命令

打开package.json，添加这条命令用于启动服务器："dev": "webpack-dev-server --inline --hot --port 8110"，如下图：

提示：8110是端口号,这里不一定要和我一样。

7、运行

所有的准备工作已经做好了，在你的项目中打开命令窗口输入“npm run dev”，

如果一切顺利的话，你会看到如下画面：

注意蓝色字体的地方，命令窗口已经提示你了，项目运行在http://localhost:8110/下，打开你的浏览器输入这个地址。顺利的话，你会看到如下界面：

并且Console里也没报错。

分析

当在命令窗口输入npm run dev时，编译器会去查找webpack.config.js这个文件，查看你的项目的入口文件是哪个，很明显这里我们的入口文件是main.js

找到这个main.js后，发现你引入了vue和App.vue文件，此时去解析App.vue，然后返回一个组件对象给App

然后你在下面写了

new Vue({
	el : '#app',
	components : {
		app : App
	}
});

el 绑定了html 页面id 为app 的div

注册的组件是app

最终完成显示整个页面。

添加打包命令

在项目要上线的时候，需要打包项目。打开你的package.json，添加如下命令：

"build" : "webpack -p"

这时在命令窗口运行npm run build即可完成打包。

webpack.config.js 配置说明

module.exports={
	entry:'./main.js',	//入口文件	

	output:{
		path:__dirname,
		filename:'build.js'	//就是html页面引入的build.js
	},
	module:{
		loaders:[
			{
				test:/\.vue$/,		
				loader:'vue-loader'		//这两句的意思以.vue结尾的文件，就用vue-loader去解析
			},
			{
				test:/\.js$/, 	//匹配以.js结尾的文件
				loader:'babel-loader', 	//.js的文件使用的babel-loader解析
				exclude:/node_modules/, //这里不匹配node_modules里的js文件
				query:{
					presets: ['es2015'],
					plugins:['transform-runtime']
				}
			}
		]
	}
};

本章代码下载： http://download.csdn.net/download/qq408896436/10241812

碵蝎

关注

7
点赞
踩
38

收藏

觉得还不错? 一键收藏
3
评论
11.解析.vue文件

还记得前9章我们说过，可以把template写在外面的那一部分知识么？回顾下：但这样的做法实际上也不是很好的解决方法。如果组件太多，都写在同一个html文件上，似乎也挺乱的。解决的方法是，把组件模块都提取出来，写在一个xxx.vue的文件上。但解析这种.vue结尾的文件也不是一份轻松的工作，你需要安装以下这些插件到你的项目中，它们分别是：(把es6语法转换成es5，
复制链接

扫一扫