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

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> 

待续……

参考 

  1. What are the differences between vue-cli and vue-cli-service? https://stackoverflow.com/questions/54248678/which-are-the-differences-between-vue-cli-and-vue-cli-service 
  2. Decoding the Vue CLI https://alligator.io/vuejs/vue-cli-reference/ 
  3.  Vue.js Single File JavaScript Components In The Browser  https://medium.com/js-dojo/vue-js-single-file-javascript-components-in-the-browser-c03a0a1f13b8 

推荐阅读:):极简Vuejs入门  http://misc-notes.netlify.com/2020/01/13/%E6%9E%81%E7%AE%80vuejs%E5%85%A5%E9%97%A8/

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注