前言

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



















，这里就先不提了
 

 

 

 

 

 

 
。