Vue学习随笔（一）Vue的引入
前言
以往零零散散使用过一些Vue的语法，最近才刚刚系统接触Vue，现在是刚刚入门的状态，故在这里做一个记录和梳理，欢迎大家一起学习交流，有错误的地方也欢迎大家指正。
正篇
梦开始的地方
在写之前我想先在这里贴出Vue的一个官方的（应该是）学习教学https://cn.vuejs.org/guide/introduction.html
本文里我也会遵循这个步骤来整理，我会尽量写的区别于链接中的文档，也会提出一些自己的想法，欢迎看到的朋友们提出不同意见。
Vue的引入
Vue的引入分为两种，一种是再本地安装Vue，一种是使用CDN的形式引入，这里我更加熟悉的是通过CDN使用Vue的方式，但是使用CDN引入将无法使用单文件组件的语法（SFC），而我看到有朋友说SFC在大型开发中用的其实是比较多的。所以这里我从头到尾用在本地搭建的方式进行一次。
本地创建一个Vue应用
首先安装一个NodeJS，这是一个搭载V8内核的JavaScript运行环境，不依赖浏览器即可运行JavaScript代码。这里我编辑器采用VS Code并安装了Volar扩展。
在终端中输入
> npm init vue@latest
这个指令用于安装create-vue，这是一个CLI，用于Vue的安装，这里会看到一些可选功能，如果没有需要或是不了解，可以先选择No（毕竟到了需要的时候还能再装）。
在项目被创建后，可以通过
> cd "你的项目"
> npm install
> npm run dev
这时已经可以运行一个Vue项目了
当你准备把应用发布到生产环境（投入应用）时，运行
> npm run build
通过CDN使用Vue
这是一种很方便的Vue使用方法，和很多JavaScript组件的引用方式相同，直接在代码中引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
这样使用了全局构建版本的Vue，所有的顶层API都会在Vue对象中。这里给出一个例子：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
此外，利用CDN引入还可以考虑ES模块的方法：
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
此外还有使用Import maps的方法，这个方法与上面代码类似，感觉写的要麻烦一点，这里就先不提了。