大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
待续……
参考
- 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/%E6%9E%81%E7%AE%80vuejs%E5%85%A5%E9%97%A8/
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/166580.html原文链接：https://javaforall.net
