美文网首页
Vue实战2-第一个页面

Vue实战2-第一个页面

作者: danejahn | 来源:发表于2017-05-17 19:19 被阅读1120次

上一次我们搭好了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">
    ![](./assets/logo.png)
    <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>路由匹配到的组件将渲染在这里

相关文章

  • Vue实战2-第一个页面

    上一次我们搭好了vue的环境,也成功把网页跑起来了。但是我们还不知道这一切都是怎么实现的,现在来看看第一个页面。首...

  • 说下Nuxt中页面特有的两个重要方法和axios的使用

    -1- Nuxt 中的页面特指在 pages 文件夹中的 vue 组件。 -2- Nuxt 中的页面保留了 Vue...

  • VUE前端框架

    Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iO...

  • 使用web-view组件内嵌网页并去除网页title

    (1) 使用web-view组件内嵌网页 实战示例:index.vue (2) 去除网页title—页面不启用系统...

  • (转载)vue项目首屏加载优化实战

    vue项目首屏加载优化实战 问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用...

  • vue单页面项目实战

    1. 组件嵌套 将单文件组件组合在一起有两种方式,一种是嵌套方式,一种用路由的方式。嵌套的方式代码如下:如下,假设...

  • Vue 入门到实战课程

    Vue 入门到实战课程 说明 课程 VueCli3.0-小白入门 Vue2.0 小白入门教程 Vue 项目实战 在...

  • Vue.js项目实战

    介绍 项目是学完慕课网课程Vue.js高级实战—开发移动端音乐App后,独立开发,也是第一个vue程序。 项目与慕...

  • 实战:Vue刷新当前页面

    问题 最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中...

  • 基于vue多入口项目升级webpack4实践

    项目背景简介 多页面应用,每个页面独立entry,单个页面内使用vue-router 基于vue,使用vue-lo...

网友评论

      本文标题:Vue实战2-第一个页面

      本文链接:https://www.haomeiwen.com/subject/ztsdxxtx.html