webpack配合vue.js实现完整的单页面demo

时间  2019-11-08
标签 webpack 配合 vue.js vue 实现 完整 页面 demo 栏目 JavaScript 繁體版
原文   原文链接

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，由于须要用到node的npm，因此确保安装了node，建议官网安装最新的稳定版本。而且在项目中须要加载一些npm包，因为npm的服务器在国外，可能咱们下载的过程会比较慢，因此建议用阿里的镜像cnpm安装，10分钟实时更新一次npm的镜像。具体的下载配置参考阿里的cnpm官网。本文章只是和你们探讨怎么利用webpack配合vue.js作一个单页面应用，具体关于vue里面的内容怎么写并不在本篇文章的介绍范围。具体请参考官方文档，里面作了详细的vue的语法介绍.javascript

建议阅读前准备内容

1. 定义咱们demo的基本目录

├── README.md           
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── vue         // 组件
│   |    ├──home.vue
│   |    ├──blog.vue
│   |    ├──about.vue
│   |    ├──topic.vue
│   ├── components     // 各类组件
│   ├── views          // css文件
│   ├── scss               //scss文件
│   └── main.js        // Webpack 预编译入口
└── webpack.js  // Webpack 配置文件

2. 配置一下咱们的webpack.js文件

在介绍怎么配置以前你须要掌握一个命令 npm install <模块> --save-dev这个命令的意思是这个命名的意思是咱们安装了这个包而且把它的基本信息写入目录的package.json文件。还有一个命令是咱们直接运行cnpm install会自动下载package.json里面写入的包.java

在webpack的配置文件咱们须要用到四个npm的模块分别是：path，webpack，extract-text-webpack-plugin,vue-loader记得先下载包在用require命令引入进来node

//node的路径模块
var path=require('path');
//咱们是webpack固然要引入这个
var webpack = require('webpack');
//这个是构建页面资源的插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//由于咱们是vue.js的应用，把各个组件当作一个页面.vue后缀，因此引入这个能够编译這些文件
var vue = require("vue-loader");

好了，咱们已经把须要的模块引入进来了，接下来咱们定义一些接下来要用到的一些文件夹路径webpack

//__dirname是node里面的一个变量，指向的是当前文件夹目录
var ROOT_PATH = path.resolve(__dirname);
//这个咱们的文件入口，等下咱们就会从main.js这个文件做为入口
var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');
//这个是文件打包出来的输出路径
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

基本的文件路径咱们已经定义好了，接下来咱们要用到extract-text-webpack-plugin这个插件了git

var plugins = [
  //提公用js到common.js文件中
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  //将样式统一发布到style.css中
  new ExtractTextPlugin("style.css"),
 // 使用 ProvidePlugin 加载使用率高的依赖库
  new webpack.ProvidePlugin({
    $: 'webpack-zepto'
  })
];

接下来是webpack的重点了loader，webpack的思想是把每一个静态资源文件当作一个模块加载，咱们须要作一些配置，在这里咱们须要用到编译css，sass模块，多以咱们还须要安装'css-loader','style-loader','node-sass','md5'es6

module.exports = {
     //文件的入口，还能够写成多数组的形式，具体本身扩展
     entry:[APP_PATH],
     //输出
     output:{
         //输出路径
         path: BUILD_PATH，
         //打包的js命名
         filename：build.js'
         // 指向异步加载的路径
         publicPath : __dirname + '/build/',
         // 非主文件的命名规则，加缓存用到md5
         chunkFilename: '[id].build.js?[chunkhash]'
     },
     module: {
         loaders: [
              {
                test: /\.vue$/,
                loader: 'vue',
              },
              {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", 'css-loader')
              },
              {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
              },
              {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=40000'
              }
         ]
    },
  //这个特别说明下，vue提倡把一个组件当作一个页面，因此可能在一个页面写html，style，javascript，也能够引入和写scss文件
  vue: {
    css: ExtractTextPlugin.extract("css"),
    sass: ExtractTextPlugin.extract("css!sass-loader")
  },
  plugins: plugins
}

3. 配置咱们的入口文件main.js

这里咱们须要三个npm模块，vue，vue-router，vue-resource三个模块，咱们依次安装而后在引入github

//vue的应用固然要引，等下要用它来注册
var Vue = require('vue')
//这个是路由，spa应用必要哦
var VueRouter = require('vue-router');
//这个是相似ajax请求,确定要拉去数据啦，因此也下载吧
var VueResource = require('vue-resource');

在vue里面声明并注册个空组件

Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});

实例化VueRounter

var router = new VueRouter({
    // 当hashbang的值为true时，全部的路径都会被格式化已#!开头，
    hashbang: true,
    history: false,
    saveScrollPosition: true,
    transitionOnLoad: true
});

接下来写下咱们的路由路径，也能够单独把路由写在一个文件，咱们这边只是个demo因此写一块儿了，不打紧，关于这块路由的写法能够具体参考下vue-router的文档http://router.vuejs.org/zh-cn...，将的很详细。

这里有必要将一下，webpack提供了异步加载功能，配合vue-router的路由使用，当哪一个组件须要渲染是，会加载它依赖的组件，而且异步加载进来。是否是很棒。

router.map({
     '/':{                    //首页
        component: function (resolve) {
           require(['./vue/home.vue'],resolve)
         }
    },
    '/home':{
        name : 'home',                    //首页
        component: function (resolve) {
           require(['./vue/home.vue'],resolve)
         }
    },
    '/blog':{
         name : 'blog',               //博客列表
        component: function (resolve) {
           require(['./vue/blog.vue'],resolve)
         }
    },
    '/blog/topic':{
         name : 'topic',
         //文章详情
         component: function (resolve) {
           require(['./vue/topic.vue'],resolve)
         }
    },
    '/about':{
         name : 'about',
         //关于
         component: function (resolve) {
           require(['./vue/about.vue'],resolve)
         }
    }
})

再加句代码，测试访问路由访问是否成功

router.afterEach(function (transition) {
  console.log('成功浏览到: ' + transition.to.path)
})

最后咱们注册下vue

router.start(app, "#app");

4. 填充下index.html文件的结构

<router-view> 用于渲染匹配的组件，它基于 Vue 的动态组件系统。咱们的index.html结构是这样子的

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>我的站</title>
     <link rel="stylesheet" href="./build/style.css">
</head>
<body>
     <div id="app">    
        <router-view></router-view>
    </div>
    <script src="./build/common.js"></script>
    <script src="./build/build.js"></script>
</body>
</html>

5. 怎么写一个组件

关于组件，vue提倡一个模块写一个具体的组件好比列表组件能够list.vue，而后根据路由加载具体的组件，组件之间也能够相互的引用，具体参考vue文档。

为了方便咱们测试，咱们以home为例，其余组件也相似，方便等下测试，等项目能完整跑起来你在本身去添加组件里面的内容。

<template>
     <div>home</div>
</template>
<script>
     // js
</script>
<style>
     /*style*/
</style>

6. 运行webpack

关于一个单页面的大致的框架咱们已经搭建好了，如今直接运行webpack就能把文件载出来了。而后打开index.html直接测试就行了。更详细的demo已经提交到github上了 demo,还有本人使用webpack+vue+es6+sass的技术栈重构的Cnode中文网单页面应用，感兴趣的能够围观下，欢迎star。

7.开发模式

在实际开发过程当中咱们确定不是每一次修改保存，而后在运行一下webpack命令，那样就太麻烦了，因此咱们用到了热替换，webpack-dev-server这个包，安装好这个包后在pack.json加上

"scripts": {
    "start": "webpack-dev-server --hot --inline"
}

而且把webpack.config.js这前咱们配置好的

// 指向异步加载的路径
 publicPath : __dirname + '/build/';

替换为

// 指向异步加载的路径
 publicPath : '/build/';

为何这样作呢？由于咱们这前用webpack是把组件异步加载在本地上，而咱们用了热替换后是地址委托到了http://localhost:8080/端口了，因此要去掉__dirname(指向本地根目录),一切准备完毕了，接下来直接运行npm start，而后打开http://localhost:8080/就能够访问，试着修改内容保存能够看看页面实时的在刷新，是否是省了不少的开发时间呢！

关于vue-cli

vue.js的原做者为了方便咱们作项目前期花费时间配置這些自动化构建工具，出了一个vue-cli的脚手架，能够自动生成项目的一系列基本配置。vue-cli的github地址为https://github.com/vuejs/vue-cli，感兴趣的童鞋能够去了解下。

关于vue2.0

2.0已经出来了，相信之后你们也要慢慢跟上2.0的版本了，2.0在1.0的基础上构建这边有一点点和1.0的区别，听我讲来。
在评论里有位同窗说2.0已经不支持1.0的路由方式了，恩，的确是，这里我把2.0的路由方式从新写了下。

var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
const Home = resolve => {
    require.ensure(['./vue/home.vue'], () => {
        resolve(require('./vue/home.vue'));
    });
};
const List = resolve => {
    require.ensure(['./vue/list.vue'], () => {
        resolve(require('./vue/list.vue'));
    });
};
const routes = [{
        path: '/',
        name: 'home',
        component: Home
    },{
        path: '/list',
        name: 'list',
        component: List
    },{
        path: '*',
        component: Home
    }];
const router = new VueRouter({
    mode: 'history',
    routes
});
new Vue({
    router
}).$mount('#app');

更多有关于路由的问题请参考vue-router2.0中文文档。
还有一点问题是若是是用webpack构建项目的时候，要在webpack.confing.js的配置文件加上

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
 }

由于vue2.0有两种构建模式，默认状况下运行构建，可是不能解析单文件的template模板，因此要使用独立构建。具体能够参考vue2.0中文文档，其余一些关于语法的改变看下2.0的文档就好了，还有vuex不被2.0影响，能够兼容。

寄语：

以为本篇文章对你有帮助的话能够关注我一下，后期会出一些关于基于vue.js开发单页面开发心得，谢谢！
代码已上传在github

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程