Foreword

之前三篇大抵引见了webpack的用法，正如这个系列题目而言 从webpack 到 vue Component,所以末了一篇文章固然是要讲 component, 不对应当说是连系运用，所以看官假如对 vue Component不是很相识的话，先去瞅瞅吧 戳我带你去瞅瞅

Gabby

vue 官网对组件的引见实在不少了，然则我第一次看 vue单文件组件 的引见的时刻，一阵不明觉厉之风刮的我找不到北。

• 全局定义(Global definitions) 强迫请求每一个 component 中的定名不得反复

• 字符串模板(String templates) 缺少语法高亮，在 HTML 有多行的时刻，须要用到貌寝的 \

• 不支持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

先展现一下文件目次构造：

• node_modules

• src

  • main.js

  • components

    • app.vue

    • second.vue

• .babelrc

• index.html

• package.json

• webpack.config.js

先把相干的依靠给装好(注重一下诠释只是为相识释，在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)

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源代码