【Vue实战教程】之Vue工程化项目详解

Vue工程化项目

随着多年的发展,前端越来越模块化、组件化、工程化,这是前端发展的大趋势。webpack是目前用于构建前端工程化项目的主流工具之一,也正变得越来越重要。本章节我们来详细讲解一下如何使用webpack搭建Vue工程化项目。

1 使用webpack构建Vue项目

1.1 什么是webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 Webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个 bundle。

Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具,打包的思路是:

遍历源文件 > 匹配规则 > 打包

这个过程中做不到按需加载,即对于打包起来的资源,到底页面用不用,打包过程中是不关心的。

Webpack 跟其他构建工具本质上不同之处在于:Webpack 是从入口文件开始,经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中,可以针对性的做一些解决方案,达到按需加载的目的,比如code split(拆分公共代码等)。

当然,Webpack 还可以轻松的解决传统构建工具解决的问题:

  • 模块化打包
  • 语法糖转换
  • 预处理器编译
  • 项目优化
  • 解决方案封装
  • 流程对接
1.2 webpack中配置Vue开发环境

在webpack中配置Vue开发环境的过程如下。

项目初始化

在硬盘上创建项目的根目录,例如 d:\myapp,在 myapp 目录下启动命令行工具,执行以下命令:

ssh 复制代码
npm init -y

上面命令运行成功后,会在myapp目录下自动创建package.json文件。

安装依赖

在myapp目录下的命令行工具中,依次执行以下命令:

ssh 复制代码
# 安装 vue 依赖
npm i vue

# 安装 webpack 和 webpack-cli 开发依赖
npm i webpack webpack-cli -D

# 安装 babel
npm i babel-loader @babel/core @babel/preset-env -D

# 安装 loader
npm i vue-loader vue-template-compiler -D

# 安装 html-webpack-plugin
npm i html-webpack-plugin -D

创建目录结构与文件

在myapp目录下依次新建 public 和 src 目录。

在public目录下新建 index.html 文件代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Webpack Vue Demo</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

在src目录下分别新建main.js和App.vue文件。

main.js文件代码如下:

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount('#app');

App.vue文件代码如下:

html 复制代码
<template>
    <div id="app">
        Hello Vue & Webpack
    </div>
</template>

<script>
    export default {};
</script>

配置webpack.config.js

在myapp目录下新建 webpack.config.js配置文件,配置内容如下:

javascript 复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    enter: './src/main.js',
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        })
    ]
};

Vue 的配置文件中关于 Vue 语法的模板需要使用vue-loader来处理。完成上面配置后,执行下npx webpack看下 dist 输出结果。

1.3 webpack配置本地服务器

webpack-dev-server 就是一个 Express 的小型服务器,它是通过 Express 的中间件 webpack-dev-middleware和 Webpack 进行交互的。在开发过程中,如果项目本身就是个 Express 服务器,那么可以使用 webpack-dev-middleware 和 webpack-hot-middleware 两个中间件来实现 HMR 功能。

webpack-dev-server具体操作如下。

安装与启动

webpack-dev-server安装命令如下:

ssh 复制代码
npm i webpack-dev-server

安装成功后,执行以下命令启动本地服务器:

ssh 复制代码
npx webpack-dev-server

执行webpack-dev-server命令之后,它会读取 Webpack 的配置文件(默认是 webpack.config.js)然后将文件打包到内存中(所以看不到dist文件夹的生产,Webpack 会打包到硬盘上),这时候打开 server 的默认地址:localhost:8080就可以看到文件目录或者页面(默认是显示 index.html,没有则显示目录)。

自动刷新

在开发中,我们希望边写代码,边看到代码的执行情况,webpack-dev-server 提供自动刷新页面的功能可以满足我们的需求。webpack-dev-server 支持两种模式的自动刷新页面。

  • iframe模式:页面被放到一个 iframe 内,当发生变化时,会重新加载;
  • inline模式:将 webpack-dev-server 的重载代码添加到产出的 bundle 中。

两种模式都支持模块热替换(Hot Module Replacement)。模块热替换的好处是只替换更新的部分,而不是整个页面都重新加载。

执行以下命令开启自动刷新:

ssh 复制代码
webpack-dev-server --hot --inline

2 Vue CLI脚手架工具

Vue CLI是一个基于 Vue.js 进行快速开发的完整系统,致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样就可以使开发者只专注与撰写应用,而不必浪费很多时间去研究项目搭建中配置的问题。

Vue CLI 有以下几个独立的部分。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建原型。

CLI服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖,属于一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。

CLI插件

CLI 插件是向 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头,非常容易使用。

2.1 脚手架安装

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。更新依赖版本命令如下:

ssh 复制代码
npm install -g @vue/cli
# 或者
yarn global add @vue/cli

安装之后,就可以在命令行中访问 vue 命令。还可以通过运行一些简单的 vue 命令来验证它是否安装成功。

例如,可以执行命令来检查其版本,命令如下:

ssh 复制代码
vue --version

如需升级全局的 Vue CLI 包,可以运行以下命令:

ssh 复制代码
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

2.2 使用脚手架创建Vue项目

运行以下命令来创建一个新项目:

ssh 复制代码
# myapp为项目名
vue create myapp

执行上面的命令会被提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选"手动选择特性"来选取需要的特性,如下图所示。

默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。如果使用了手动选择特性,在操作提示的最后可以选择将已选项保存为一个将来可复用的 preset。

具体的选项操作可以参考下图所示。

上面的选项执行完成后,会提示如何启动项目,如下图所示。

根据命令行工具的提示,依次执行下面命令,即可启动项目:

ssh 复制代码
# 进入项目目录
cd myapp
# 启动项目
npm run serve

上面命令执行成功后,会在命令行工具显示项目的IP地址和端口号,如下图所示。

在Google Chrome浏览器中访问http://localhost:8080打开项目的首页,效果如下图所示。

4.2.3 项目结构与文件描述

把创建好的项目在Visual Studio Code(以下简称VSCode)开发工具中打开,项目的目录结构如下图所示。

目录结构解析

vue-cli4.0版本脚手架工具创建的项目结构如下表所示。

目录/文件 说明
node_modules npm 加载的项目依赖模块
public 用于存放静态资源文件,启动本地服务器后,该目录为服务器访问的根目录。目录下存放index.html文件
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。
babel.config.js babel相关的配置文件
package.json npm相关的配置文件
package-lock.json npm相关的配置文件,用于锁定依赖包的版本号
README.md Markdown格式的项目说明文档

index.html文件

public目录下的index.html文件是项目的静态页面,当前创建的项目为单页面应用(SPA),所以整个项目中只有一个静态的HTML文件,index.html文件代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js文件

src为项目的源码文件的管理目录,项目中编写的代码都要放到这个目录下,在该目录下的main.js文件为整个项目的入口文件,关于项目的全局配置都要放到该文件中。

代码如下:

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue文件

在src目录下还有一个很重要的文件,就是项目的根组件App.vue文件,该文件一般用于项目的一级路由的管理。因为新建的项目中,会对App.vue编写初始化的页面内容,而且这些内容对后期的开发没有价值,所以我们在正式开发前,会对App.vue文件进行修改。

代码如下:

html 复制代码
<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
  export default {}
</script>
相关推荐
一ge科研小菜鸡15 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫44 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome