【Vue 入门】使用 Vue2 开发一个展示项目列表的应用

前言

一直没有找到一个合适的展示个人项目的模板，所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置，只需要按一定规则编写 Markdown 文件，然后使用一个 在线工具 转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。

在线演示    源码

效果

程序最终的效果如下图所示：

整个项目只包含两个组件：项目介绍 和 侧边导航，逻辑比较简单，十分适合入门。

环境配置

这里我们使用 Gulp 和 Webpack 用作项目构建工具。初次使用 Gulp 和 Webpack 可能不太适应，因为它们的配置可能让你看的一头雾水。不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。等到使用了一段时间之后，自然而然的就知道该如何配置了。这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章：

• Gulp入门教程
• 一小时包教会 —— webpack 入门指南

Gulp 和 Webpack 集成

Gulp 和 Webpack 集成一个比较简单的方式就是将 Webpack 作为 Gulp 的一个 task，如下面的形式：

var gulp = require("gulp");
var webpack = require("webpack");

gulp.task("webpack", function (callback) {
   
    //webpack配置文件
    var config = {
        watch: true,
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        }
        //........
    };
    webpack(config, function (err, stats) {
   
        console.log(stats.toString());
    });
});

gulp.task('default', [ 'webpack']);

下面我们分别介绍一下 gulp 和 webpack 的配置

Gulp 配置

Gulp 中主要配置了两个任务：webpack 和 browserSync，这里主要说一下 browserSync。browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。下面是具体的配置

var gulp = require("gulp");
var browserSync = require('browser-sync');

// 添加 browserSync 任务
gulp.task('browserSync', function () {
   
    browserSync({
        server: {
            baseDir: '.'
        },
        port: 80
    })
});

// 配置需要监听的文件，当这些文件发生变化之后
// 将调用 browserSync.reload 使浏览器自动刷新
gulp.task("watch", function () {
   
    gulp.watch("./**/*.html", browserSync.reload);
    gulp.watch("dist/**/*.js", browserSync.reload);
    gulp.watch("dist/**/*.css", browserSync.reload);
});

// 添加到默认任务
gulp.task('default', ['browserSync', 'watch', 'webpack']);

Webpack 配置

我们使用 webpack 进行资源打包的工作，就是说将各种资源（css、js、图片等）交给 Webpack 进行管理，它会将资源整合压缩，我们在页面中只需引用压缩之后的文件即可。webpack 的基础配置文件如下所示

gulp.task("webpack", function (callback) {
   

    //webpack配置文件
    var config = {
        // true 表示 监听文件的变化
        watch: true,
        // 加载的插件项
        plugins: [
            new ExtractTextPlugin("../css/[name].css")
        ],
        // 入口文件配置
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        // 输出文件配置
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        },

        module: {
            // 加载器配置，它告诉 Webpack 每一种文件需要采用什么加载器来处理，
            // 只有配置好了加载器才能处理相关的文件。
            // test 用来测试是什么文件，loader 表示对应的加载器
            loaders: [
                {test: /\.vue$/, loader: 'vue-loader'}
            ]
        },
        resolve: {
            // 模块别名定义，方便后续直接引用别名，无须多写长长的地址
            // 例如下面的示例，使用时只需要写 import Vue from "vue"
            alias: {
                vue: path.join(__dirname, "/node_modules/vue/dist/vue.min.js")
            },
            // 自动扩展文件后缀名，在引入文件时只需写文件名，而不用写后缀
            extensions: ['.js', '.json', '.less', '.vue']
        }
    };
    webpack(config, function (err, stats) {
   
        console.log(stats.toString());
    });
});

webpack 的相关配置说明可以参考前面的给出的文章，下面说一下使用 webpack 2 遇到的坑：

extract-text-webpack-plugin

extract-text-webpack-plugin 会将 css 样式打包成一个独立的 css 文件，而不是直接将样式打包到 js 文件中。下面是使用方法

{
    plugins: [new ExtractTextPlugin("../css/[name].css")],
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({