Vue前端开发入门中的一些困惑

Question

我的网页开发经验吧是这样的：

Python + Flask + Jinja2 + Bootstrap 这种的

也就是说Python+Flask构造生成业务数据,通过Nginx/Apache等提供HTTP

然后渲染到Jinja语法的模板中，然后模板的样式这些主要有bootstrap来提供。

可如今，出于各种原因接触了Vue, 更加接触了其它一些新的知识，概念。

比如Node.js，比如什么路由。

首先发现Vue本身有点和jinja2之类的模板语法类似呀，也就是把对应数据渲染到对应的地方去。

优势可能是，对于模板比较固定，只是数据发生变化的时候，Vue之类的这种前端优势就来了。

另外就是写法，也很让我这种传统的网页开发的人很不能适应。

比如我要引用 js 可能调用<script> 引用相应的js文件

但是现在学Vue开发，更多的是看到什么import xxx (有点像Python的倒是）

然后又冒出来路由。在Flask时吧，感觉很容易理解

@app.route('/') 之类的。

到了Vue吧。

import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
routes: [

{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
}

]
})

我就觉得大脑一片混乱。
首先比如第一句，已经从vue-route引用 了Route 这玩意。
然后又让 Vue.use(Router) --何意？好吧，可以理解为让Vue把路由功能装载进来？ 我实在纳闷，为何Vue 不直接默认自带上这个router? 且认为它是模块化，组件化吧。

那后面一句，又是什么鬼用意？

export ?default ? new ?

这么学下去，我顶多是能基于现有代码去修改，但是至于让我从空白写起，我实在写不来。
也不明白为何这么写。

当然理解上的困难可能是我OUT了

但求大佬 指点迷津，我该补什么知识？
还是多练习练习？

Answer 1

从几个方面来解惑：

Jinja 和 Vue

Jinja 是专属 Python 模板语言，Vue 是一个框架，两者的功能是不对等的，Jinja 属于服务器渲染，而 Vue 可以不需要服务器渲染。相比来讲 Vue 可以提供的东西比 Jinja 要丰富的多，这让我们可以完全做到前后端分离。也就是从构建用户界面到处理数据逻辑、路由功能甚至部署都可以独立于服务器端完成。而 Python 可以专注于业务逻辑，不需要为用户界面操心。在这一点上可以说是改变了老的前后端的分工比列以及使分工更加精确、代码分离。Vue 一般也会搭配一些 UI 框架来使用，包括 Bootstrap 及除此之外的选择。如果不采用独立部署，前后端代码组织在一起时，只需在服务器提供一个入口路由给 Vue 的入口视图，它就是单页面应用，其中的路由在前端完成，其实是模拟出来的，其他与服务器端的交互都是通过 API 完成。如楼上所说，这样的方式也是可选的，由于 Vue 及其相关的一些功能都进行了模块拆分，可以根据自己的需要去选择使用什么。

Vue及其自己的生态

Vue 现在发展壮大，它的概念从广义上涵盖了以框架为基础的一切开发生态圈。包括路由、状态管理、服务器端渲染等等概念。其实楼主的直觉是对的，这些都是模块化了的功能。模块化就意味着它们是可插拔的。use 方法就是 Vue 的一个接口，在添加插件的时候，需要调用它把插件或独立的功能加入到框架中来。其他的前端框架都是有这样的类似功能，但要注意只有在工程化开发的时候才需要进行相关的配置。

Vue 和 Node.js

Node.js 的概念是不依赖于 Vue 的，它是一个 JS 运行环境，就跟 Python 运行环境类似，同 pip 一样它也有一个自己内置的包管理器 npm，一切都与 python 安装和管理包类似，它也有一套自己的生态系统，遵循模块化规范使 js 功能实现模块化，可以作为第三方插件提供给各个开发者使用。Vue 本身和一些功能比如路由都是单独拆分出来的包，所以它们可以作为一个模块包被项目使用，从这个层面来讲它就相当于一个插件。当然 Vue 也可以不依赖于 Node.js 使用，原因如下。

工程化开发和非工程化

有了 Node.js ，前端也有了工程化开发的选择，并且现在越来越主流。如上所述，可以基于 Node.js 把 Vue 当作一个插件引入到项目使用，这也是构建前端的工程化的一部分。构建用户界面或者是本地调试、打包和独立部署，工程化的方式都是非常便利的。这其实与服务器端开发的一切都很类似，简直就可以说是把这个过程搬来给前端开发使用。而非工程化的方式就比较原始了，也就是楼主所说的使用标签引入样式和脚本的方式，毫无疑问这样的方式是非常简单直接的，并且即便是工程化来发之后最后得到的也就是这么个引用了各种静态文件的HTML，所以工程化也并非一定是必选项，当然如果你想享受生态带给你的一切，使用工程化的开发是必须的。

ES6~特性
1.import、export 这些是 JavaScript 新增的模块化语法，可以阅读ED6 模块加深理解，新特性很多也是借鉴了 Python 的特性，都是动态类型的语言，所以使用起来也比较类似，你是如何理解 Python 的就可以近似地理解它，虽然底层的实现机制不一样，但这不耽误概念的通用。
2.new 是为了模拟以类模式进行开发的一个关键词，与构造函数搭配使用：根据类（其实质是函数）创造实例，基础语法，并没有什么难以理解的。如果不需要使用复杂的前端逻辑，一般也不会用到。

Answer 2

1. 关于路由的概念，你熟悉的 flask 的路由是 “一个 URI 对应一个资源（常见形式是页面 .html/.jsp/.asp/.php）的组织分类”，而 vue 的路由是 “一个 URI 对应一个组件（组件之间可以相互嵌套也可以直接作为整个页面）的组织分类”。换句话说，路由这种形式，只是用来组织多个资源（页面/组件/接口）的结果。一个网站的 URL 所构成的路由相当于这个网站的地图，而 vue 的组件所构成的路由则描述了这个前端应用界面上有什么页面，每个页面里有什么组件，这些组件的嵌套关系如何（当然嵌套关系并不完全能从路由中发现）。
2. vue 本身只做一件事：数据和页面的双向绑定，通俗来说就是渲染数据。即路由并不是必需品，一个很简单的单页面显然并不需要路由。
3. 关于 export、default、new 这些都是 js 里的概念，前两个是 js 中模块的概念，用于控制 import 能从模块文件中导入的内容范围。而 new 是很常见的 “新建对象实例” 的语义，python 比较接近的概念是 __init__，只不过变成了显式调用。

至于怎么学，显然你需要这个 JavaScript | MDN

Answer 3

求求老哥 去学习一下js基础吧。

Answer 4

建议认真读Vue官网文档，文档写的还是很国内友好的。