上一次我们搭好了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: '<App/>',
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
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<router-view></router-view>路由匹配到的组件将渲染在这里
网友评论