• vue学习（方法和路径）

    【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

            不管是公司，还是做个人开发，很多时候程序员除了编写后端程序之外，还要了解一点的前端开发的内容。可是，现在很多人还以为前端开发就是用html、css、javascript搭建一个网页就好了。事实上，早就不是这样了。随着vue、nodejs等技术的推广，现在前端开发已经演变为一个专门的职业了。对于前端开发来说，它有自己的平台、自己的框架、自己的语言，基本上成为一个专业的工种了。那么，这个时候，对于一个新手来说，应该如何学习vue做前端开发呢？

    1、打好html、css、js基础

            不管什么时候，html、css、js都是基础。写好一个网页，总是需要用html布局、css渲染、js编写交互逻辑的。所以说，只有掌握好了这三个基础，才有可能做好前端开发的工作。所谓的新架构、新平台，并不是说完全脱离了之前的基础内容，重新造一个轮子出来，那事实其实不是这样的。

    2、学好es6

            很多同学还把javascript当成是一个简单的脚本语言，殊不知随着es6的推广，javascript引入了很多新的语言特性。比如let关键字、class关键字、模块化开发等等，只有有了这些新的语言特性做基础，前端的专业化开发才能成为可能。

    3、掌握node.js

            node.js可以看成是一个开发平台。在上面，既可以做前端的开发，也可以做后端的开发，开发后的编译和发布也可以在上面完成。初此之外，node.js上面还有大量的第三方库、框架可以使用，这对软件开发的同学来说实在是太方便了。

    4、学习vue.js

            学习vue.js，除了掌握它的知识点，比如说v-if、v-model这样的命令，component这样的属性，template这样的模板语句之外，最重要的就是理解它的思想。个人觉得，vue最大的特点就是实现了view-model之间的解耦。从前网页的开发就是html做布局，jquery拿到数据之后重新对dom进行渲染。而在vue上面，程序员只需要和model打交道，数据二次渲染到dom上面，这个vue已经帮我们完成了。

    5、了解和掌握element ui

            和bootstrap类似，element ui是基于vue的一个ui库。在element ui上面，所有的控件都有对应的参考代码，怎么布局、怎么编写按钮、怎么输入、怎么输出、消息怎么显示，这部分都有对应的范例可以参考，整个网页也是非常的美观，对于开发者来说，这在无形之中节省了大量的时间。

    6、使用vue-elementui-admin模板

            很多时候，vue的开发者都是用来做一个后台管理程序，这个时候可以可以完全找一个类似于vue-elementui-admin这样的模板来修改就可以了。上面的登录、注册、表单、表格、localstorage、api等等这些功能都是现成的，自己拿来直接修改就可以了，完全没有必要从头到尾一行一行编写代码。

    7、继续复用其他的第三方js库

           有了上面1-6的准备，开发的同学就可以在此基础上继续拓展了。比如如果需要开发网站，那么可以学习下后端node.js express架构；如果学习3d相关的内容，可以了解下three.js；如果希望在前端实现绘图等工作，那么就可以了解了jsplumb等第三方js库。归根到底，vue只是帮助我们搭建了一个前端框架，后期做成什么样的效果还是要借助于大量的第三方js库才能完成。

    ps：

        很多同学都以为vue只能和element ui配合，这是不对的。只能说目前两者配合比较好。事实上，用iview开发vue ui程序的人也不少，写一个简单的iview页面就是这样的，

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>iview example</title>
    6.     <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    7.     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    8.     <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    9. </head>
    10. <body>
    11. <div id="app">
    12.     <i-button @click="show">Click me!</i-button>
    13.     <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
    14. </div>
    15. <script>
    16.     new Vue({
    17.         el: '#app',
    18.         data: {
    19.             visible: false
    20.         },
    21.         methods: {
    22.             show: function () {
    23.                 this.visible = true;
    24.             }
    25.         }
    26.     })
    27.   </script>
    28. </body>
    29. </html>

  • 相关阅读:
    力扣刷题笔记——Day1
    Spark SQL数据源 - Parquet文件
    分布式ID生成器-rain
    基于python的图书馆大数据可视化分析系统设计与实现
    Linux基本指令（下）——“Linux”
    git下载及基础
    presto和hive中grouping sets的格式不一致问题
    PostgreSQL 命令行工具介绍
    go语言零碎笔记
    数据挖掘与分析课程笔记（Chapter 14）
  • 原文地址：https://blog.csdn.net/feixiaoxing/article/details/126883070