【Vue,Webpack】自己动手搭建Vue项目脚手架

Vue如此流行，但是如何自己动手搭建一个使用vue开发的脚手架呢？点击了解详情。

【Vue,Webpack】自己动手搭建Vue项目脚手架

By img Microanswer Create at：Jun 13, 2019, 11:36:51 AM 

Tags： vue 前端 javascript node webpack 脚手架

Vue如此流行，但是如何自己动手搭建一个使用vue开发的脚手架呢？点击了解详情。

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

使用Vue框架在做前端的时候，大部分人肯定使用的vue-cli工具生成的项目结构，然后直接开始写代码，干项目，方便快捷，大大的提高了效率。但是有时候出些莫名其妙的问题着实让人摸不着头脑。其实出现问题的最大不是问题，问题是不知道如何去解决这些莫名其妙的问题，这篇文章就从零开始自己动手搭建脚手架，里里外外自己心中清清楚楚，出了问题也方便快速定位原因并解决掉。

本文使用 webpack 工具进行vue脚手架的搭建。Vue 项目脚手架的搭建，不同 webpack 版本搭建方式不同，按照本文的搭建方式，会自动使用最新的 webpack 4 版本(截止时间2019年8月8日19:25:00)进行搭建。

1、准备工作

本文章使用 Windows 10 64位环境。idea 开发工具。

(1)、安装 Nodejs

Nodejs 的下载地址：立刻跳转下载。你可以选择 msi 安装包下载并安装，这种安装文件在安装时会自动为你配置 nodejs的环境变量，安装完成你就可以在任何位置打开cmd输入node相关命令了。如果你选择二进制包，则需要手动配置相关环境变量，然后才能使用node的相关命令。环境变量配置相关，详见：Nodejs安装和环境变量配置。

(2)、注意事项

当你安装完成了 node 运行环境后，你就可以执行相关命令了。 命令node -v输出node的版本号，我目前使用的版本号为：

C:\...\Desktop>node -v
v11.5.0

除了 node 本身这个命令外，还有一个npm 命令，这是管理前端项目各个模块依赖的工具，下面将做详细介绍。查看npm版本号：

C:\...\Desktop>npm -v
v6.9.0

这两个命令都输出了相应的版本号，基本证明你的nodejs环境可以正常使用了。

(3)、npm 简介

npm 是一个依赖管理工具，了解过 maven、gradle、composer的话理解起来可能会更容易一点。前端开发现在也是模块化开发了，各个模块相互独立，可以通过引入的方式使用。由此就不得不产生一个依赖管理工具了， 开发者可以将自己的功能模块发布到npm代码库里，你做开发的时候，正好需要这个模块，你只需要在你项目里面加入依赖说明，表明你要使用这个模块，npm就会为你将此模块下载到本地方便使用。

npm 的一些基本命令：


# 初始化当前目录为一个项目。
npm init

# 为项目安装全部指定的依赖模块。
npm install
# 简写
npm i

# 安装指定模块,这里安装了 axios模块， axios 是一个网络请求模块。
npm install axios

更多npm的命令使用，请参考：NPM 使用介绍。

2、创建项目

(1)、初始化项目

在桌面创建文件夹：vuedemo, 并进入vuedmeo 目录：

C:\...\Desktop>mkdir vuedemo
C:\...\Desktop>cd vuedemo
C:\...\vuedemo>

使用初始化命令，在vuedemo目录下进行初始化，输入 npm init，然后一路回车最后输入yes即可：

C:\...\vuedemo>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vuedemo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\Microanswer\Desktop\vuedemo\package.json:

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes) yes

C:\...\vuedemo>

此时，vuedemo 目录下多了一个文件： package.json，此文件就是对整个项目的信息概要文件，文件中描述了项目名称、版本、入口文件、依赖、简介等等重要信息。此文件是必须不能却少的。

项目创建成功，只有一个描述文件，毕竟还没有开始安装各个模块嘛，下面开始正式开工！

(2)、安装必须的依赖模块

本文使用webpack打包工具搭建vue项目脚手架，所以，必须要安装这两依赖：

npm install webpack vue --save

使用 --save 参数，表示将这些安装了的依赖自动添加到 package.json 文件中，这样，别人在拿到这个项目是，就可以通过 npm install 将这些必要模块下载下来使用。

安装依赖模块过程可能比较慢，这取决于你的网速快慢。值得注意的是，有些依赖包甚至要去国外网站下载，所以，请提前做好科学上网的准备。没有条件进行科学上网，可以使用国内镜像来完成，使用国内镜像方法：

# 使用淘宝镜像 https://registry.npm.taobao.org
npm install webpack vue --save --registry=https://registry.npm.taobao.org

有关淘宝镜像方面内容详情：淘宝NPM镜像

安装完成这两个依赖过后，会发现新增了一个目录：node_modules。这个目录就保存了所有依赖的模块，你可以进入这个目录查看每个模块的源代码。

3、开始写代码

(1)、html创建

使用vue进行前端开发，通常应用于开发 单页面 应用。因此首先新建一个index.html文件，今后的所有应用效果，都将在这个页面上展示出来。为了更好的整理我们的所有源代码，对于程序主要部分代码，将其放在 src 目录下。

新建目录 src :

C:\...\vuedemo>mkdir src

然后在 src 目录下新建文件：index.html

# 命令 type nul>src\index.html 在src目录下新建index.html文件
C:\...\vuedemo>type nul>src\index.html

然后在 index.html 文件中写入下面的基本内容：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>vuedemo</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

这样，咱们的页面就算写好了。接下来开始写入口js代码。

(2)、主 Js 入口文件。

对于单页面项目，必然有一个入口文件要最开始运行的。在src目录下新建index.js用于程序的入口js文件：

C:\...\vuedemo>type nul>src\index.js

以后每次运行项目，都是由此js文件最先运行vue相关的逻辑。

(3)、webpack配置

对于单文件组件的vue项目，是逃不出配置webpack的套路的，也正是webpack的存在，让各个模块的衔接变得出神入化！针对配置类的代码，使用 config 目录来保存，在vuedemo目录下创建config目录:

C:\...\vuedemo>mkdir config

在 config 目录下新建webpack的文件 webpack_config.js 作为webpack的配置文件：

C:\...\vuedemo>type nul>config\webpack_config.js

在 webpack_config.js 文件中，写入下面的内容：

// 引入 path 模块，处理各个目录之间层级转换。
let path = require("path");

// 获取项目目录。
let projectPath = path.resolve(__dirname, "../");

const webpackConfig = {

    mode: "development",
    // 入口文件
    entry: {
        app: path.join(projectPath, "./src/index.js")
    },

    // 结果输出
    output: {
        path: path.join(projectPath, "./dist/"), // 输出目录
        
        // 输出文件名，可以写入目录层级在里面。这里使用[name]，是为了打包的时候，生成的名称根据打包模块自动适应名字。
        filename: "static/js/[name].js", 
        
        publicPath: "./" // 输出的文件是会自动注入到 index.html 里面的，此处的作用是：在注入时，src 的最前方的一截内容。
    },

    // webpack在编译打包时，要处理那些文件：
    resolve: {
        extensions: [".js", ".vue", ".json"] // 三种基本的必须要加入噻， vue单页面组件， 所以vue后缀文件必不可少了。
    }
};

module.exports = webpackConfig;

配置文件目前还没有全部完整的写出来，还需要继续添加一些不可缺少的流程。要让vue的单文件组件发挥作用，单单靠webpack是完不成的，还需要vue提供的专门处理vue单文件的一个loader,它是webpack的一种处理文件的中间件(我姑且这样认为),他能将特定的文件按照loader特定的解析方式去处理，由于loader机制， 使webpack的作用显得尤为强大和重要。vue-loader就是vue提供的专门处理单文件组件的loader，我们需要先安装这个模块，才能够用它。不过还有一点需要注意，vue-loader在运作时，需要模板编译器：vue-template-compiler，每个vue包新版发布时，一个相应的模板编译器也会发布，所以vue的版本和模板编译器的版本必须保持一致， 因此安装vue-loader时使用下面命令：

C:\...\vuedemo>npm install vue-loader vue-template-compiler --save

更多关于vue-template-compiler 的信息请参考：vue-loader指南。

等待安装完成后，你会看到一条警告信息：

npm WARN vue-loader@15.7.0 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.

意思是：vue-loader 需要配合 css-loader 一起使用，但是并没有被安装，你必须要自己安装这个依赖。既然提示我们要安装，那就安装吧：

C:\...\vuedemo>npm install css-loader --save

安装完成后，就可以使用新安装的这些模块继续配置webpack_config.js 配置文件了，进一步进行配置后的文件内容应该是下面这样的：

// 引入 path 模块，处理各个目录之间层级转换。
let path = require("path");
let VueloaderPlugin = require("vue-loader/lib/plugin");

// 获取项目目录。
let projectPath = path.resolve(__dirname, "../");

const webpackConfig = {

    mode: "development",
    // 入口文件
    entry: {
        app: path.join(projectPath, "./src/index.js")
    },

    // 结果输出
    output: {
        path: path.join(projectPath, "./dist/"), // 输出目录
        
        // 输出文件名，可以写入目录层级在里面。这里使用[name]，是为了打包的时候，生成的名称根据打包模块自动适应名字。
        filename: "static/js/[name].js", 
        
        publicPath: "./" // 输出的文件是会自动注入到 index.html 里面的，此处的作用是：在注入时，src 的最前方的一截内容。
    },

    // webpack在编译打包时，要处理那些文件：
    resolve: {
        extensions: [".js", ".vue", ".json"] // 三种基本的必须要加入噻， vue单页面组件， 所以vue后缀文件必不可少了。
    },

    // 配置vue-loader
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },

    // vueloader插件
    plugins: [
        new VueloaderPlugin()
    ]
};

module.exports = webpackConfig;

但是配置依然还没有结束，到目前为止，我们只是配置了webpack怎么去处理vue文件，但是今后我们还会有各种样式文件和资源文件，又该怎么办？ 要处理这些东西，还需要再加入一些模块：

  • babel-loader： 负责将高版本的js编译为浏览器能理解的js。
  • url-loader： 负责处理资源文件 - 路径上的相对关系。
  • file-loader：负责处理资源文件 - 文件本身拷贝等操作。
  • json-loader： 负责处理纯json文件。

安装这些模块：

C:\...\vuedemo>npm install babel-loader @babel/core @babel/preset-env url-loader file-loader json-loader --save

然后进一步配置 webpack_config.js 文件，为配置文件加入更多的资源文件支持和样式loader, 配置文件应该是下面这样:

// 引入 path 模块，处理各个目录之间层级转换。
let path = require("path");
let webpack = require("webpack");
// 引入 html 文件自动注入js插件
let HtmlwebpackPlugin = require('html-webpack-plugin');
let VueloaderPlugin = require("vue-loader/lib/plugin");

// 获取项目目录。
let projectPath = path.resolve(__dirname, "../");

const webpackConfig = {
    mode: "development",

    // 入口文件
    entry: {
        app: path.join(projectPath, "./src/index.js")
    },

    // 结果输出
    output: {
        path: path.join(projectPath, "./dist/"), // 输出目录
        
        
        // 输出文件名，可以写入目录层级在里面。这里使用[name]，是为了打包的时候，生成的名称根据打包模块自动适应名字。
        filename: "static/js/[name].js", 
        
        publicPath: "./" // 输出的文件是会自动注入到 index.html 里面的，此处的作用是：在注入时，src 的最前方的一截内容。
    },

    // webpack在编译打包时，要处理那些文件：
    resolve: {
        extensions: [".js", ".vue", ".json"] // 三种基本的必须要加入噻， vue单页面组件， 所以vue后缀文件必不可少了。
    },

    // 配置vue-loader
    module: {
        rules: [

            // 处理vue文件
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },{
            // 处理 js 文件， vue 文件里 script 节点的js内容也会被这里处理
                test: /\.js$/,
                loader: 'babel-loader',
            },{
            // 处理 css 文件， vue 文件里 style 节点的样式内容也会被这里处理
                test: /\.css$/,
                loader: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },{
            // 处理json文件
                test: /\.json$/,
                loader: 'json-loader'
            },{
            // 处理资源文件
                test: /\.(png|jpe?g|gif|svg)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'static/img/[name]_[hash:7].[ext]'
                }
            }
        ]
    },

    // vueloader插件
    plugins: [
        new VueloaderPlugin(),
        new HtmlwebpackPlugin({ // 将 index.html 也打包到输出中。
            filename: 'index.html',
            template: path.join(projectPath, 'src/index.html'),
            inject: true
        })
    ]
};

module.exports = webpackConfig;

至此，所有要处理 vue 单文件组件的webpack 配置基本告一段落。

(4)、运行与查看效果

慢活了半天，终于要开始运行了。但不得不告诉你，运行前，还需要再配置一些运行时相关的webpack配置以及一个本地运行时使用的服务器。express作为node上比较热门的web应用框架，几乎大部分node项目里都能看到它的身影。这里express也将做为我们测试的本地服务器后台。

安装express:

C:\...\vuedemo>npm install express --save

为了让express和webpack结合起来运行，还需要模块：

  • html-webpack-plugin： 将 index.html 文件输出到结果中并自动将主入口js文件注入此html里。
  • webpack-dev-middleware： 本地测试服务器开发中间件。主要功能就是打通webpack的打包与express的服务。

安装这些模块：

C:\...\vuedemo>npm install html-webpack-plugin webpack-dev-middleware --save

为了能够开启本地测试服务，我们新建一个本地服务器，在 config 目录下新建 devServer.js 文件， 并写入下面的内容，内容已有注释，理解十分容易：

// 引入 express 依赖
let express = require("express");
// 引入webpack
let webpack = require("webpack");
// 引入写好的webpack配置
let webpackconfig = require("./webpack_config");
// 引入 webpack 与 express 的中间件
let devMiddleware = require('webpack-dev-middleware');
// 引入路径处理工具
let path = require("path");

// 定义端口
let PORT = 3011;

// 创建一个服务器。
let app = express();

// 使用 webpack的配置，建立一个webpack 编译器，使单文件vue能够被webpack编译。
let compiler = webpack(webpackconfig);

// 使用编译器创建一个express中间件
let middleware = devMiddleware(compiler, {
    publicPath: "/",
    index: 'index.html'
});

// 将中间件纳入express创建的服务程序。
app.use(middleware);

// 防止google浏览器因为找不到这个文件而显示一个不好看的错误。
app.use("/favicon.ico", function (req, res) {
    res.end("");
});

// 启动服务，监听端口。
app.listen(PORT, function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log("服务已开启，点击：http://127.0.0.1:" + PORT + " 打开.");
    }
});

运行这个文件：

C:\...\vuedemo>node config\devServer

等待控制台输出： Compiled successfully. 即表示编译完成，此时可以在浏览器输入：http://127.0.0.1:3011。来进行访问，

你将看到一片空白，空白网页，但是查看网页源代码可以正常看到网页的基本代码。

是的，由于我们的主入口文件index.js中什么也没写，所以它是没有任何内容的，为了让它显示vue的组件，咱们先建立一个主vue单文件组件。在src目录下创建main.vue，内容如下：

<template>
    <div>
        哈哈，我是Vue渲染出来的。<br>
        <input v-model="value"/><br>
        {{value}}
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: 0
            }
        }
    }
</script>
<style scoped></style>

然后在主js入口文件中引入这个文件, 修改 index.js 文件如下面内容：

import Vue from "vue";
import Main from "./main";

new Vue({
    el: "#app",
    render: function (h) {
        return h(Main);
    }
});

这时候再将之前 开启的服务关闭，使用 Ctrl + C 关闭控制台服务。然后重新运行，即可看到vue组件已渲染到界面上。 介于每次这样手动写命令node src/devServer 进行运行，不仅不方便，而且今后可能忘了运行文件在那里了。为了解决这个问题，可修改 package.json文件， 在该文件中的 scripts 节点里，新增dev节点，修改后文件内容如下：

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node config/devServer"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "express": "^4.17.1",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "url-loader": "^2.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.34.0",
    "webpack-dev-middleware": "^3.7.0"
  }
}

今后想要运行，只需要输入命令：

npm run dev

即可运行。

4、后续

到目前为止，我们完成了：

  1. webpack配置
  2. vue-loader加入
  3. 资源文件处理
  4. 本地测试服务搭建

这些的完成已经可以促成一个项目的开发的持续进行了。脚手架基本已经搭建完成，但是还差最后一步，缺少了这一步， 前面的所有工作都是没有用的。

当我们完成了整个项目想要发布时，最终要发布的是 html+js+css 的文件，不可能把这么大一堆vue文件拿去的， 这就需要使用webpack进行编译build生成合适浏览器的 html+js+css 文件了。如何完成 build, 又如何做到所有的vue组件在打包后文件最小。这部分内容将在后续持续更新。

5、附件

本篇文章涉及的示列代码你可以通过百度网盘下载到，但建议你阅读了后续一篇文章后再进行示列代码的下载，否则你可能不能理解其中一些配置。 仍要下载，可前往下一篇文章末尾处进行下载。

下一篇：自己动手搭建脚手架2-编译打包

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)