学习vue该怎么起步?

本文将持续更新。

关于vue的学习,虽说官网有非常详尽的文档,但初学者总归是有些茫然无措。

小编决定花一点点时间,梳理一些快速上手的要点帮助后来人。

先不着急用脚手架,CDN单页面模式先把事情做起来

vue官网中有一段:

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

所以,起步我们还是跟随官网的指引,不要用CLI工具,也就是脚手架

这里给一个DEMO,地址在这里:

vue Helloworld 代码示例

代码如下

<!DOCTYPE html>
<html lang='zh-cn'>

<head>
  <title>vue demo</title>
  <!-- Chasing Dreams and Encouragement Network -->
  <meta name=keywords content="vue demo">
  <meta name=description content="vue demo">
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv='description' content='www.yixzm.cn' />
  <link rel="stylesheet" type="text/css" href="/lib/layui/css/layui.css">
  <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <script src="http://www.yixzm.cn/lib/vue/vue.min.js"></script>
  <script src="http://www.yixzm.cn/lib/vue/vue-router.min.js"></script>
</head>

<body>

  <div id="app">
    <p>{{ message }}</p>
  </div>

  <script src="/lib/axios/axios.min.js"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>

</body>

</html>

跟着手册,按图索骥

入门手册中,菜鸟教程起步 做的还是不错的,可以开始搭建基础页面了。

这里,对于基础不扎实的同学,先不着急用 iview、element UI 等成熟UI框架,可以参考HTML、CSS教程

比如这里:

html教程

css教程

这样,有三大手册在手,vue + html + css,可以跑起来了~

补课

上文文档熟悉后,开始逐步将组件、watch、mounted等各类常用知识点用起来。这样,应付一般的小型页面足够了

进阶

在熟悉上文所有内容后,我们可以尝试用用webpack,路由,然后进阶脚手架。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!