大家好，又见面了，我是你们的朋友全栈君。
http://misc-notes.netlify.com/2020/01/13/极简vuejs入门/
可能很多想学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_modulesbin里调用或从目录里package.json调用）。为简单和方便起见，就装了全局。可以在目录行运行一下目录查看是否装妥（#后是对应的输出）。
代码语言：javascript复制vue -V
# 输出类似 3.5.0vue-cli-service
# 输出类似 Usage: vue-cli-service <command> [options]后面将看到，vue/cli-service可以帮助我们预览 vue 文件（vue serve 文件名）。预览是学习vue的重要一步，因为可以即时验证语法、对概念的理解的是否准确。
下一步，我们用 vue 生产一个最简单的网页，先在一个目录比如（vue-example）里用文本编辑器生产一个 index.html, 例如
代码语言：javascript复制mkdir vue-example
cd vue-example
notepad index.htmlindex.html
代码语言：javascript复制<!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> 待续……
参考
- 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
- Decoding the Vue CLI https://alligator.io/vuejs/vue-cli-reference/
- 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/极简vuejs入门/
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166580.html原文链接：https://javaforall.cn
