不使用Webpack的Vue传统前端使用方式（一）

本文展示使用传统的前端开发方式使用vuejs，不使用webpack的如何使用vuejs开发前端工程。一方面可以对比两者的差异，一方面学习一种新的思路（或者是老路）。在做一个小型的前端工程时，可以考虑这种轻量化的方案。本示例使用了boostrap、jquery、vue、vue-router组件，创建了一个SPA单页示例。

先闲扯几句。最近vuejs 3.0 开始beta，相信不久（也不好说是多久）就会发布了，性能提升令人期待。由Webpack支撑的前端技术栈，把以往传统的前端开发和发布模式引入了一个新的工程化的阶段。依赖管理、编译、treeshaking等等。对于研发是提升了工程组织维护效率，但是对于用户来说是增加整体拥有成本。

开放共享的互联网正在变得封闭。像jquery、bootstrap这样的组件库都是RELEASE的，为什么还要从源码的层面去引入依赖，然后重新编译和发布。把所有的公共库都打包的vender.js里，明明可以共享CDN的，节省流量的。我注意到这一切好像是从进入移动互联网开始的，也就是用户终端从浏览器更换到了手机。浏览器被组件化到APP中，一切开始私有和封闭起来。

以下是bootstrap v4.x的官方文档，使用CDN直接引入依赖的css和js。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

好，回到正文。

我们开始搭建一个工程。考虑到我们需要http的调用，还是得有个服务，这里使用nodejs环境，当然你也可以用nginx，或者其他语言的web appserver，比如tomcat。

初始化工程

新建一个目录demo，使用cnpm init初始化一个工程(或者npm)，安装express、axios两个组件库。

$ cnpm init
$ cnpm i -S express axios

然后创建一个public目录，用来放置我们的前端代码，因为不需要编译，都是静态资源。

目录如下：

demo/
├── index.js
├── node_modules/
├── package-lock.json
├── package.json
└── public/

创建一个index.js来启动web服务。

const express = require('express');
const bodyParser = require('body-parser');

const port = 8080;

app = express();
app.use(bodyParser.json());
app.use(express.static('public')); //静态资源目录


app.listen(port,  () => console.log(`Server running: http://localhost:${
     port}