入门

注:以下的开发流程、方法,已经可以归为专业化的前端开发了。

在我看来,普通的前端应用和专业前端开发,有个基本的分界线:是不是使用整套的js工具,处理从开发到发布的任务; 是不是使用编译式的发布模式。

普通的应用开发,一般从最简单的模式开始,只是引用预先发布好的vue.min.js等这类代码库,根据框架要求,编写对应的处理程序,最后手工发布。

这个模式是有缺点的。主要是手工流程多,容易引发bug。此外,Web应用很复杂,需要适应不同的浏览器,一些代码如果必须同时兼容,就要按要求书写对应的版本,这个工作手工处理很困难。应用变大的时候,会带来维护的困难。因为前端应用牵扯的应用需求多,变化快,与外部系统搭配的地方也多。

举个例子:发布的js/css,应该压缩成“min”模式,这是行业规范。一是减少网络传输,节省带宽(大网站的节省非常可观),减少用户下载时间; 二是可以屏蔽掉注释,代码产生一定的混淆,减少开发信息泄漏的几率。但是如果没有整体支持,压缩操作就需要自己手工完成,调用专门的压缩工具处理。

另外,为了提升整体性能,web服务器对js/css都有缓存,甚至默认缓存一周乃至一个月。可是产品开发阶段,改进频繁,web服务的缓存特性反而招来了麻烦,会干扰调试,只能先关掉。另外,产品上线之后,如果出现对js/css的更新需要,缓存也成了麻烦事。

一个典型的办法是:js/css引用后面加时间戳。加了时间戳之后,web系统就会自动更新缓存了,用户浏览器也会自动更新好。但是加时间戳也是需要写代码的,手工处理很容易出差错。

上面两个是普通开发模式面临的较为典型的问题,其实其它问题还有很多,比如js的模块化开发、css的预处理等等,这都是目前技术条件下需要解决的事情,普通开发模式是不好解决的。如果升级到专业前端模式,这些问题就都可以处理了。只要执行发布操作,所有的代码会自动打包/压缩,自动的标记版本,模块化开发也支持的很好。

不过,专业前端开发模式,需要掌握的知识明显要多得多了,需要一段时间的学习和研究。但是对于长期项目,这个回报肯定是值得的。

主要开发环境设置步骤和注意事项

注意事项

vue-cli依托node.js的npm/yarn系统构建,为了方便,可以使用docker工具进行支持,这样也能统一vue的开发框架环境。

vue的docker支持在这里: https://hub.docker.com/r/ebiven/vue-cli

安装后,使用: alias vue=’docker run -it –rm -v “$PWD”:”$PWD” -w “$PWD” -u “$(id -u)” ebiven/vue-cli vue’ 进行命令的映射,即可使用,非常方便。

node版本问题:

经过测试,因为打包的js脚本比较大,运行node 较旧的lts版本(10.16.3)会出现heap错误,时好时坏。 所以建议使用最新版Node打包,测试正常。

使用最新版本的Node有多种办法,比如直接安装、使用docker、使用虚拟环境。

下面是使用虚拟环境的办法,切换node版本比较简单: 先看这个说明: https://github.com/ekalinin/nodeenv

安装好nodeenv,然后在一个目录运行:

nodeenv –node=12.9.1 –prebuilt node_12.9.1

这样就安装好了,很快。

或者使用:nvm也是不错的选择

先激活这个环境,再使用这个node打包即可,就是直接运行yarn run build。vue-cli会自动运行node。

开发环境设置步骤

创建工程:

参照文档 https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

网络访问库axios参考文档: https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

附加模块: 除了小的工具模块,其它结合紧密的模块主要是:vuex 和 vue router。这两个是官方模块,可以开箱就用。 建议一开始就用yarn安装好: yarn add vuex vue-router

因为它们安装的时候,会设置代码模板。

vuex的功能是状态管理,其实就是:公共变量的控制。在SPA里面,一个模块和另外一个模块的数据交换,可以用这个完成。 vue-router是路由管理器,这个也好理解。

基本概念问题:

这种模式开发的前端程序,其实并无神秘之处。其主要差异是:

1、普通模式开发的js代码,一般写在一个文件里面,即便写成多个js文件,也是需要使用amd/cmd等机制调入的,js模块的天然语言缺陷。 这个模式下的vue js代码,组件、主代码都写在一起。这个代码是可以直接引入html中使用的。

但是专业模式下的代码不是,此模式下的组件代码,写成.vue形式。一个.vue文件,包含了模板/js/css代码,可以在主程序里面引入使用 – import 然后,需要发布的时候,编译、打包处理。编译器会把.vue文件编译成规范的js代码,组合进入整体的js文件,再进行压缩/发布。

这个模式的优点在于:可以模块化开发了,分工更容易,而且代码管理也变得更方便了。

2、第三方脚本问题: import受到语言限制,不能直接引入url类型的js文件。 解决方法: A,下载这类js,使用打包的模式压缩进去。 B,使用<script src=”urlxxxx”></script> 这种方式,内嵌到index.html

3、使用本地js脚本文件的方法

这分几种情况:

  • 自定义的本地js脚本,主要用于多vue组件的共享功能,避免重复这种可以这么定义:
    • custom.js 这么写: function demo_function(){
    } export { demo_function }
    • 需要引用custom.js的vue模块内:
    import { demo_function } from “../assets/js/demofunction”;这样,就可以在<script></script>内使用了。<script> demo_function(); </script>
  • 其它的js模块,通过yarn/npm安装的脚本 注意,未必所有的这类模块都能直接使用,需要测试。有的需要继续封装,热门包,社区经常有人会做成vue-xxx的插件包分发,可以检索。
    • 有的模块包做成了vue 插件的形式,可以在main.js内这样使用: import VueCookie from “vue-js-cookie” Vue.use(VueCookie);
    • 还有一部分,可以直接在<script>中引用的:<script> import moment from ‘moment’ // xxxxx </script>
  • 其它的js模块,是通过其它工程得到的包,用于UI框架或者自定义功能 这个意思就是,引用其它的通过webpack打包的脚本,其实就当成黑箱引入进来即可,不用操心内部运作,因为已经调试好了。 比如我们使用的appstack UI框架,经过自定义后,就得到了一套脚本和css,js直接在main.js引用: import “@/assets/js/appstack.js” 在App.vue里面引用自定义的css:<style src=”@/assets/css/classic.css”></style>

4、公共方法/模块

如果组件需要使用公用的方法,比如,多个组件都需要调用同样的函数,那么可以使用mixins功能,这是vue内置支持的。

示例代码: common.js

export default { methods: { check_state: function() { ;xxxx } } }

调用者:<script> import Common from “../assets/js/common”; this.check_state(); </script>

开发和编译

开发

初始化工程

这个按照vue-cli给的操作指南直接操作就行了: 参考:

vue create my-project

后续的开发,就是根据vue的框架设计来进行了,比如使用组件等等。

编译

这个vue已经给了框架脚本的支持,运行yarn run build就可以了,会得到一个dist目录,里面就是需要的安装包,拖到网站首页就可以运行,很强。

其它选项参考官方文档。

使用modern模式打包

推荐这个打包模式 参考资料:

JavaScript的进化和未来