学习vue该怎么起步？

你的名字 2023-02-27 13:56 19阅读 0赞

本文将持续更新。

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

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

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

vue官网中有一段：

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

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

这里给一个DEMO，地址在这里：

[vue Helloworld 代码示例][vue Helloworld]

代码如下

<!DOCTYPE html>
    <html lang='zh-cn'>
    
    <head>
      <title>vue demo</title>
      
      <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>

## 跟着手册，按图索骥 ##

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

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

比如这里：

[html教程][html]

[css教程][css]

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

## 补课 ##

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

## 进阶 ##

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

查看原文：

[学习vue该怎么起步？][vue]

[vue Helloworld]: http://www.yixzm.cn/d/vue_demo.html
[Link 1]: https://www.runoob.com/vue2/vue-template-syntax.html
[html]: https://www.runoob.com/html/html-tutorial.html
[css]: https://www.runoob.com/css/css-tutorial.html
[vue]: http://www.yixzm.cn/index/reading/article/story/296