前言

以往零零散散使用过一些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的方法，这个方法与上面代码类似，感觉写的要麻烦一点，这里就先不提了。