vuejs 菜鸟学习方法「建议收藏」

全栈程序员-站长 • 2022年8月1日下午7:00 • 未分类 • 阅读 4

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

http://misc-notes.netlify.com/2020/01/13/%E6%9E%81%E7%AE%80vuejs%E5%85%A5%E9%97%A8/

可能很多想学vue的人都苦于无法入门——因为用脚手架的正常做法前期太繁琐，而且即便搭好了脚手架也从浏览器看到了vue准备好的hello worl界面，下一步还是不知道从哪里入手。

此文就介绍一个开始学习vue的简单易行的办法。其实vue官方网站自然也介绍过此法，只是初入门者或许没有耐心读一遍官方文档。

前期准备：装node和npm。网上有很多教怎么做的，也不是很难，就不赘述了。

首先，命令行下装全局 vue-cli 和 @vue/cli-service

npm install -g @vue/cli
npm install-g @vue/cli-service-global

开关 -g 表示装在全局系统里（因此可以在不同的目录里直接调用）而不是装在一个目录（只能在一个目录里从node_modules\bin里调用或从目录里package.json调用）。为简单和方便起见，就装了全局。可以在目录行运行一下目录查看是否装妥（#后是对应的输出）。

vue -V
# 输出类似 3.5.0

vue-cli-service
# 输出类似 Usage: vue-cli-service <command> [options]

后面将看到，vue/cli-service可以帮助我们预览 vue 文件（vue serve 文件名）。预览是学习vue的重要一步，因为可以即时验证语法、对概念的理解的是否准确。

下一步，我们用 vue 生产一个最简单的网页，先在一个目录比如（vue-example）里用文本编辑器生产一个 index.html, 例如

mkdir  vue-example
cd vue-example
notepad++ index.html

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 你好世界 </title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="ComponentOne.js"></script>
  <script type="module" src="app.js"></script>
</body>
</html>

待续……

参考