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

by Microanswer

标签: vue 前端 javascript node webpack 脚手架


创建时间:Jun 13, 2019 11:36:51 AM | 最后更新:Sep 29, 2019 9:09:37 AM 


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

使用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 是一个依赖管理工具,了解过 mavengradlecomposer的话理解起来可能会更容易一点。前端开发现在也是模块化开发了,各个模块相互独立,可以通过引入的方式使用。由此就不得不产生一个依赖管理工具了, 开发者可以将自己的功能模块发布到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

为了让expresswebpack结合起来运行,还需要模块:

  • 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-编译打包


全文完, 转载请注明出处。 对你有帮助?不如赞一个吧:
发表评论(发表评论需要登录,你现在还没有登录。)

评论列表 (0条)

导航加载中…