脚本宝典收集整理的这篇文章主要介绍了webpack -> vue Component 从入门到放弃（四），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_304_1@Foreword
之前三篇大致介绍了webpack的用法，正如这个系列标题而言 从webpack 到 vue component,所以最后一篇文章当然是要讲 component, 不对应该说是结合使用，所以看官要是对 vue Component不是很了解的话，先去瞅瞅吧 戳我带你去瞅瞅
Gabby
vue 官网对组件的介绍其实不少了，但是我第一次看 vue单文件组件 的介绍的时候，一阵不明觉厉之风刮的我找不到北。
全局定义(Global definITions) 强制要求每个 component 中的命名不得重复
不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
这些缺点就促使了我们要使用 vue 单文件组件了，（看到这里，我心里有股莫名的高兴！！！）
然而，NM-MMP 后面就贴上了简单的 demo 图片(居然还只是图片)，然后后面就说 “有了 .vue 组件，我们就进入了高级 JavaScript 应用领域” 是不是很牛掰终于可以摆脱菜鸟的衣服了，但是，但是，但是，如果你不知道 Modern JavaScript with ES2015/16，不知道打包工具 webpack/browserify，不知道 Node Package Manager (NPM)，好，很好，非常好，亲，你还没有准备好，请去啃一遍这些再来。。。。。
除了想撞墙我当时没有其他想法（幸好只是没用过webpack。。。）
Here we go
先展示一下文件目录结构：
先把相关的依赖给装好(注意一下注释只是为了解释，在Package.json中不能写注释)
"devDePEndencies": {
"babel-core": "^6.0.0", //babel 插件
"babel-loader": "^6.0.0", //babel-loader 加载器
"babel-PReset-es2015": "^6.0.0", //babel预编译es2015/es6语法
"cross-env": "^3.0.0", //跨平台环境用来设置NODE-ENV
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"vue": "^2.2.4",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"css-loader": "^0.26.2",
"style-loader": "^0.13.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
//命令行（CLI）安装
cnpm install .babelrc
//预编译es6语法的配置
{
"presets": [
["es2015", { "modules": false }]
]
}webpack.config.js
// VAR webpack = require('webpack')
var path = require('path')
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
module.exports = {
// 入口文件地址，不需要写完，会自动查找
entry: './src/main.js',
output: {
// 文件地址，使用绝对路径形式
path: path.resolve(__dirname, './dist'),
//[name]这里是webpack提供的根据路口文件自动生成的名字
publicPath: '/dist/',
filename: '[name].js'
},
module: {
loaders: [
// 解析.vue文件
{
test: /.vue$/,
loader: 'vue-loader',
options: {
//解析.vue文件中样式表
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
// 转化ES6的语法
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
//编译css并自动添加css前缀
{
test: /.css$/,
loader: 'style!css!autoprefixer'
},
//图片加上base64编码
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
// 别名，可以直接使用别名来代表设定的路径以及其他，在这个项目中没用到
alias: {
'vue$': 'vue/dist/vue.COMmon.js'
}
},
// 服务器配置相关
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
// 开启source-map，webpack有多种source-map，在官网文档可以查到 eval-source-map 不能实现断电调试， source-map 和 cheap-module-source-map 就没问题
devtool: '#eval-source-map'
}
src/main.js
//es6语法：
import Vue From "vue"
//外部引入别的库都可以用这样的方式，比如jquery等。。
//引入我们编写的测试用vue文件。
import App from './components/app.vue';
new Vue({
el:'#app',
render: h => h(App)
})
//vue 里有关于 render 的介绍，我大概简要介绍一下这里的用途，h 是 vue 生态系统中作为 createElement 别名的通用惯例 也是 JSX 语法的要求。如果在作用域中 h 失去作用， 在应用中会触发报错。
//render 所创建的 h 函数 可以直接返回模板中dom元素，相当于
render: function(h){
return h(App)
}
//个人觉得由于这里的App 是代表的 app.vue 这个组件文件，那么文件中的 <templete></templete>标签中的 dom 元素将自动被拿来返回，当然还包括文件中的data属性之类的src/components/second.vue
<script>
//es6
export default {
name:"app",
//data:function(){}，下面是es6写法
data () {
return {
msg: 'Second Component '
}
},
}
</script>
<template>
<div>
<span v-html="msg"></span>
</div>
</template>
// scoped 让css只在这文件中生效 lang='scss' 不能写成 sass 打包会报错
<style lang="scss" scoped>
div{
height:100px;
width: 50%;
border: solid 1px;
margin-top: 10px;
}
</style>src/components/app.vue
<script>
//es6
import second from './second.vue';//导入当前目录的second.vue
export default {
name:"app",
//data:function(){}，下面是es6写法
data () {
return {
msg: 'first Component '
}
},
components:{
//等价于
// second: second
second
}
}
</script>
<template>
<div>
<div class="first">
<span>df</span>
<span v-html="msg"></span>
</div>
<second></second>
</div>
</template>
<style lang="scss" scoped>
.first{
height:100px;
width: 50%;
border: solid 1px;
}
</style>index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
<script src="dist/main.js"></script>//这是打包生成的main文件
</body>
</html>Last step 更改 package.json
// 在 scripts 中加入 dev 之后直接通过 npm运行 项目中装的 webpack-dev-server,而不是使用全局的 webpack-dev-server
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --color --port 80"
}运行(CIL)
@H_276_777@npm run dev
ps:
如果想让他自动打开默认浏览器 再 选项 "dev" webpack-dev-server 后面加个 --open
--hot 与 --line 区别
// 不会刷新浏览器
$ webpack-dev-server
//刷新浏览器
$ webpack-dev-server --inline
//重新加载改变的部分，hrM(热替换)失败则刷新页面
$ webpack-dev-server --inline --hot
Final
打开浏览器看看效果。这系列文章就全部结束，最后一篇间隔稍微长了点，不过还是没夭折~~~
webpack -> vue Component 从入门到放弃（三）
webpack -> vue Component 从入门到放弃（二）
webpack -> vue Component 从入门到放弃（一）
github源代码
以上是脚本宝典为你收集整理的webpack -> vue Component 从入门到放弃（四）全部内容，希望文章能够帮你解决webpack -> vue Component 从入门到放弃（四）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。