Vue实战2-第一个页面

上一次我们搭好了vue的环境，也成功把网页跑起来了。
但是我们还不知道这一切都是怎么实现的，现在来看看第一个页面。
首先我们得知道webpack是什么，以及怎么用的。
Webpack入门
一小时包教会 —— webpack 入门指南

Webpack的工作方式是：把你的项目当做一个整体，通过你给定的主文件（如：index.js），将从这个文件开始找到你项目的所有依赖文件，使用loaders处理它们，最后打包成一个浏览器可识别的js文件。

配置

每个项目下都必须配置一个webpack.config.js，它的作用如同gruntfiles.js，告诉webpack需要做什么。
我们可以在build目录下找到它。

image.png

webpack.base.conf.js - 基础配置文件
webpack.dev.conf.js-开发环境配置文件
webpack.prod.conf.js-生产环境配置文件

我们以我们通过vue webpack模板建立的项目为例来讲解。

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

这边是用来加载后面要用到的包

var path = require('path')
var webpack = require('webpack')

path是用来处理目录的对象。

接下来的module.exports是模块接口，有了这个我们就可以用require的方式去引用这个模块。
node.js module初步理解

  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }

entry是页面入口文件配置
output是入口文件对应的输出配置（入口文件最后生成什么名字的文件，存放在哪里）

Loaders

最激动人心的功能来了，在module.rules(1.x是module.loaders)中可以配置每一种文件都需要用什么样的loader来处理。

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }

后面还有一些配置，不是太重要，等以后有空了再说

入口文件

看完了配置，我们来看看入口文件做了什么。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

import router from './router'引入了router的目录，会默认识别里面index.js。

route

参考基于Vue2.0+Vue-router构建一个简单的单页应用

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',name: 'Hello',component: require('../components/Hello')
    }
  ]
})

path:'/'的意思是默认路由。

App.vue

路由匹配到的组件将渲染在这里