Day 5. 怎麽开始Vue起来

Vue 的官网提供了三种不同的方式供我们使用,我们可以依照自己需求选择不同的方式开始我的与vue的旅程!
1. 直接在Html中用引入Vue.js 库

  • 使用Vue官网提供的vue.js下载包
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400mB17dW9ql9.png

  • 使用CDN方法载入
    CDN
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400UY2lvIGo2T.png

    unpkg
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400Be2No1bUkX.png

    cdnjs
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400S6jXedYwZp.png

2. 使用 npm或yarn 安装使用

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和 webpack 或 Browserify 模块打包器配合使用。

npm
https://ithelp.ithome.com.tw/upload/images/20210916/20131400cuZpeuDRkv.png

yarn
https://ithelp.ithome.com.tw/upload/images/20210916/20131400nj19PTK8rY.png

3. 使用Vue CLI
什麽是CLI?
CLI 全名为 Command-Line Interface,命令行工具,是在图形使用者介面得到普及之前使用最为广泛的使用者介面,它通常不支援滑鼠,使用者通过键盘输入指令,电脑接收到指令後,予以执行。也有人称之为文字使用者介面(character user interface, CUI)。

那Vue CLI呢?
Vue CLI 是一个全局安装的 npm 包,提供终端机(terminal)有关 vue 的指令,帮助开发者把常用到的资源都打包起来,让开发者可以快速建立一个即装即用的专案。
以官网的一句话总结, Vue CLI 是一个基於 Vue.js 进行快速开发的完整系统。
在安装 Vue CLI 之前,必须先安装 Node.js,接下来就来安装Vue CLI,在终端机(或 cmd 指令列)输入:
https://ithelp.ithome.com.tw/upload/images/20210916/20131400a1RCNTcqmI.png

官方建议新手可以从第一种方式(引入)开始使用,在还不熟悉Node.js构件工具时不建议一开始就使用Vue CLI欧!所以我们也先从第一种方式开始吧o(`ω´ )o

参考资料
VUE官网
Vue三种安装方式
CLI
Vue CLI


<<:  【Day17】音乐与自然语言处理的奇妙关联

>>:  学习Python纪录Day2 - Python基本介绍

30天程序语言研究

今天是30天程序语言研究的第十三天,由於深度学习老师多让我们上了python的进阶课程里面包括之前没...

Thunkable学习笔记 3 - 读取Realtime Database的值(Firebase)

於Realtime Database内手动建立如下图的资料, 试着使用thunkable读取, 测试...

Day 25:专案06 - 股市趋势图02 | 整年股市资料、Postman

复习一下昨天的进度 - 我们取得单月的个股日成交价的资料,并在电脑中储存成csv档。 目前都只有单月...

D27 - 用 Swift 和公开资讯,打造投资理财的 Apps { 三大法人成交比重实作.2 }

先制作出简单的一个 VC 上面显示取得的三大法人资料的日期。 拉出两个 Button、一个 stat...

Day 27 云端邮差来罗-SNS

在云端世界也有飞鸽传书的脚色,今天我们来认识一下SNS。 1. SNS的应用价值 SNS的全名是Si...