学习vue该怎么起步？-蒲公英云

学习vue该怎么起步？

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

本文将持续更新。

关于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>