公司内部技术分享之Vue.js和前端工程化

今天主要的核心话题是Vue.js和前端工程化。我将结合我这两年多的工作学习经历来谈谈这个，主要侧重点是前端工程化，Vue.js侧重点相对前端工程化，比重不是特别大。

Vue.js

Vue.js和React.js、Angular.js并驾齐驱号称前端三大框架(前端最常用的这三大框架，大中小公司均采用)。
Vue.js是一个叫尤雨溪及其他的团队开发的，不过早年是他自己独立做出来的。这一点我觉得他很牛逼。
我觉得每个做开发的朋友们，都要有一个自己的开源项目，自己的开源项目可以是自己工作三到四年发现有很多地方是重复的，可以写一个框架减少不必要的重复工作量，现在已经有很多人正在做，比如renren-security、jeesite等开源项目，通过它们很容易就可以写出一个功能齐全的后台管理系统。也可以是自己开发中常用的某些组件，那些组件每次开发都要用，可以将其收集起来，针对其中某个api进行改造，比如Hutools这个开源项目在这个方面就做的挺不错。又或者是在校的学生们，自己可以不断实践，写写图书管理系统或者是根据学校某些需求定制一个系统出来，然后将其开源，我觉得这样一来，对于以后毕业出来找工作也是很有帮助的。总而言之，开源项目可以是很多，它可以是一个电商系统、CMS、CRM或ERP之类的，也可以是读书笔记、书籍收集、文章收集等。

关于Vue.js这部分，主要参考Vue.js的官方网站和一些开源项目

下面正式开讲

工具 Devtools

Devtools其目的主要是用于浏览器调试Vue相关的项目(因为Vue.js中的标签并不仅仅是html相关的，还有如el这类的标签及其相关的dom关系等，这些都是常规的浏览器调试所不能做到的)

vue-devtools开源项目地址
图文详解vue.js devtools使用方法
使用Devtools调试对应的Vue.js应用程序，效果如图:

Vue CLI

1.Vue CLI具有如下优点
(1)功能丰富
对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

(2)易于扩展
它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

(3)无需 Eject
Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。

(4)CLI 之上的图形化界面
通过配套的图形化界面创建、开发和管理你的项目。

(5)即刻创建原型
用单个 Vue 文件即刻实践新的灵感。

(6)面向未来
为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

2.Vue CLI的三种构建方式
第一种方式(常规)

npm install -g @vue/cli vue create hello-world npm run server