文章目录
解析和打包.vue组件页面
Vue
中的每个页面其实都是一个
.vue
的文件，这种文件，
Vue
称之为组件页面，其必须借助于
webpack
的
vue-loader
才能使用。
所需依赖
vue: vue js核心包
vue-loader: .vue文件编译loader
vue-template-compiler:.vue模版编译，被vue-loader所依赖。
babel-plugin-transform-runtime:es6实时转换成es5语法
开发阶段的依赖包：
cnpm i vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev
运行阶段的依赖包：
cnpm i vue --save
示例
源码
App.vue
源码：
<!--Vue项目的跟组件-->
<template>
<span v-text="msg" class="red"></span>
</template>
<script>
//负责导出.vue这个组件对象
//它本质上是一个Vue对象，所以Vue中该定义的元素都可以使用
export default {
data(){
return {
msg:'Hello World!'
}
}
}
</script>
<style scoped>
/*其中的scoped意识是这里定义的css样式只是在当前页面中有效，不会影响到其它组件页面*/
.red{
color: blue;
}
</style>
main.js
源码：
//1、导入vue核心包
import Vue from 'vue';
//2、导入App.vue的vue对象
import App from './App.vue';
//3、利用Vue对象进行解析渲染
new Vue({
el:'#app'
,render:c=>c(App) //es6的函数写法，是goes to 语法
//上面的等价于render:function(create){create(App)}
});
index.html
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<meta name="vireport" content="width=device-width,initial-scale=1,mininum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
package.json
源码：
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 4009"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.0"
},
"dependencies": {
"vue": "^2.5.17"
}
}
webpack.config.js
源码：
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry:'./src/main' //指定打包的入口文件
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
,{
test:/\.less/ //打包.less文件
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url请求的资源文件
,loader:'url-loader?limit=20000' //limit表示图片的大小为40k是临界值，小于20k的图片均被
// 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
}
,{
test:/\.js$/ //将.js文件中的es6语法转换成es5语法
,loader:'babel-loader'
,exclude:/node_modules/ //nodejs依赖库中的js文件全部都不需要进行转换
}
,{
test:/\.vue$/ //解析.vue组件页面文件
,loader:'vue-loader'
}
]
}
,babel:{
presets:['es2015'] //配置将es6语法转换成es5语法
,plugins:['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
,plugins:[
new htmlwp({
title:'首页' //生成的页面标题
,filename:'index.html' //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
,template:'index.html' //根据index.html这个模版来生成（这个文件请程序员自己生成）
})
]
};
运行结果
在控制台中运行下面代码查看运行结果：
分析
上面的代码所实现的功能就是在页面打印
Hello World!
，如上图所示，我们成功的在页面中打印出了该字符串，这说明项目本身编译与运行是没有问题的。
由于上面的代码中，绝大多数内容都是在之前文章中有提到，所以说这里就单单重点说说
.vue
文件。
在上面的代码中，我们可以发现在
.vue
文件中，其语法结构与在
HTML
中是及其相似的。与我们之前所写的
HTML
一样，其有
template
、
script
、
style
标签，而且其内部代码的编写，其与之前的
HTML
中的代码编写几乎一样，这里需要说明的是，
.vue
毕竟不是
HTML
，因而我们不能像在
HTML
中一样操作各种
DOM
节点，比如说下面的代码我们就不能使用：
document.getElementById(元素id)
因为其是在
.vue
文件内，而该文件本身并不支持原生的
JS
写法，由此我们可以再次推知
.vue
其还不支持
jQuery
，因为
jQuery
其本质是对原生
JS
的简化与封装，其底层还是基于原生
JS
的。
所以说我们在
.vue
文件内使用页面元素与其相关语法时要切记其毕竟不是在
HTML
内，尽管它们有很多相似之处，但毕竟不是同一个东西，因而还是存在着很多的不同之处的，不能随便套用，否则会入坑的。