详解如何从零开始搭建表达+ Vue开发环境

  

<强>
  

  

<强> 1。为前端选择合适的预处理工具和资源管理工具
  

  

预处理工具又分为js预处理工具和css预处理工具.Javascript一直以来最为人诟病的一点就是缺乏原生的模块机制,所有js代码文件在被html页面引入后将共用同一个命名空间,所以才出现了各种“标准“尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理,虽然ES6终于引入了模块机制,但以现在的浏览器支持程度,还不足以“毫无顾虑地随拿随用”。所以js预处理工具最主要的工作就是帮助解决js的模块问题。而css预处理工具则很好理解,就是把sass,少或者笔代码翻译,合并成css代码。

  

资源管理工具则是帮我们管理前端所需的各种资源文件(比如css, js,图片,字体等等),便于我们引用。目前常用的解决方法是将他们直接编码进js代码中,然后像引用js模块一样引用它们。这可比手写各种url方便多了。

  

正如标题所说,我们将采用Webpack,因为它具备上面所说的所有功能。此外还支持代码热替换,使修改代码后不用刷新页面也能在浏览器中立即看到效果。

  

详解如何从零开始搭建表达+ Vue开发环境

  

<强> 2。为后端选择合适的预处理工具
  

  

后端面对的都是js代码,不需要前端那样的资源管理工具,另外,节点强迫你使用至少一种模块管理方案(CommonJS或ES6的导入),也不用考虑代码的依赖问题。

  

所以后端要简单许多,唯一需要考虑的基本上就剩下如何将ES6转译成ES5了(如果你打算使用ES6的话)。目前常用的做法是使用巴别塔,你可以用巴贝尔命令行工具独立执行编译过程,也可以配置巴贝尔注册实现代码运行时动态翻译,这对于开发场景而言无疑是最方便的,所以我们选择后一种方式。

  

<强> 3。为整个项目选择合适的流程控制工具
  

  

流程控制工具是为了帮助我们管理诸如代码检查,编译,压缩,移动,部署这些任务的,原本我们是通过手敲命令(或者高级一点写个脚本)的方式做,有了流程控制工具以后,只需要提供配置文件和少量代码就可以完成。

  

目前最流行的解决方案是吞咽。不过,由于我们这里要搭建的是开发环境,没有移动代码,压缩,部署等需求,所以不需要功能强大的喘不过气。我们只要用nodemon这个工具监听代码变动然后适时重启服务器就够了。

  

详解如何从零开始搭建表达+ Vue开发环境

  

<强>
  

  

<强> 1。利用表达脚手架快速搭建应用
  

  

使用表达提供的脚手架工具(表达应用程序生成器)可以在1 s之内搭建出最基本的应用。

  

如果你以前还没试过,首先执行下面的命令安装

        npm安装express-generator - g      

然后执行以下命令生成代码,命令执行过程中需要输入一些参数。

        表达& lt; myapp>      

完成后的文件结构是这样的

        .   ├──app.js   ├──本   │└──www   ├──package.json   ├──公共   │├──图像   │├──的javascript   │└──样式表   │└──style.css   ├──路线   │├──index.js   │└──users.js   └──的观点   ├──error.jade   ├──index.jade   └──layout.jade   之前      

但是这个文件结构只是后端代码,要想跟前端代码相结合,需要做一些改动。我们计划最终的文件结构应该是这样的

        .   ├──src   │├──客户机   │└──服务器   └──…      

所以需要将上面自动生成的表达代码放到/src/服务器/路径下。

  

接下来我们要删除一些用不着的东西以及增加一些缺失的东西。

  

首先,由于我们打算在前端使用Vue框架,并由Vue-Router管理大部分路,由后端表达仅保留少量的RESTful API路由,所以后端不需要复杂的路由设置,那么路线文件夹下的内容可以简化成一个路由器。js文件。

  

然后,我们需要配置好巴别塔登记,所以需要在项目跟路径下新增两个文件

详解如何从零开始搭建表达+ Vue开发环境