能否不使用.vue组件与Webpack，纯靠HTML/CSS/JS构建Vue.js大型应用？

当然可以不用Webpack、不用.vue单文件组件来开发Vue大型应用。Vue提供了UMD格式的构建文件，可以直接通过CDN引入到HTML中，就像AngularJS那样，完全依赖原生HTML、CSS和JS文件开发。

虽然没有Webpack这类构建工具的代码拆分、压缩、预处理等优化能力，但只要做好代码的模块化组织（比如按功能拆分JS文件），完全可以支撑大型应用的开发。你甚至可以结合原生ES模块（type="module"）来更优雅地拆分代码。

下面是适配后的纯静态文件结构，完全不需要构建工具，直接在浏览器打开就能运行：

1. 主入口：index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-static-app</title>
  <!-- 引入Vue和Vue Router的CDN资源 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <img src="./assets/logo.png">
    <a href="#/hello">Hello route</a>
    <a href="#/">HelloWorld route</a>
    {{ route }}
    <router-view></router-view>
  </div>

  <!-- 按顺序引入组件和路由、应用逻辑 -->
  <script src="./components/HelloWorld.js"></script>
  <script src="./components/Hello.js"></script>
  <script src="./router.js"></script>
  <script src="./app.js"></script>
</body>
</html>

2. 应用逻辑：app.js #

// 初始化Vue实例
new Vue({
  el: '#app',
  router, // 引入全局定义的router实例
  data() {
    return {
      route: "This is main page"
    }
  }
})

3. 路由配置：router.js #

// 注册Vue Router插件
Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', name: 'HelloWorld', component: HelloWorld },
    { path: '/hello', name: 'Hello', component: Hello }
  ]
});

4. 组件文件：components/HelloWorld.js #

// 定义HelloWorld组件
const HelloWorld = {
  template: `
    <div class="hello-world">
      <h1>Hello World!</h1>
      <p>This is the default route component.</p>
    </div>
  `
};

5. 组件文件：components/Hello.js #

// 定义Hello组件
const Hello = {
  template: `
    <div class="hello">
      <h1>Hello Route!</h1>
      <p>This is the /hello route component.</p>
    </div>
  `
};

6. 资源文件：assets/logo.png #

把原来的Vue logo放在这个目录下即可，和Webpack版本的资源路径保持一致。

• 组件组织：把每个组件拆分成单独的JS文件，通过全局变量的方式暴露组件（或者用ES模块import/export，需要给script标签加type="module"）。
• 模板写法：组件的模板可以用字符串模板（如上），或者在HTML中用<template id="xxx">定义，然后通过template: '#xxx'引用，这样模板更易读。
• 状态管理：如果需要状态管理，可以使用Vuex的UMD版本，同样通过CDN引入，用法和Webpack版本一致。
• 性能优化：大型应用可以考虑手动拆分代码，或者使用原生ES模块的动态导入import()来实现懒加载路由。

内容的提问来源于stack exchange，提问作者Himanshu sharma