入门
注：以下的开发流程、方法，已经可以归为专业化的前端开发了。
在我看来，普通的前端应用和专业前端开发，有个基本的分界线：是不是使用整套的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(){
- 需要引用custom.js的vue模块内：
- 其它的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模式打包
推荐这个打包模式 参考资料：
