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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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> 

待续……

参考 

  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/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166580.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号