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的方法,这个方法与上面代码类似,感觉写的要麻烦一点,这里就先不提了。

热门相关:超武穿梭   情生意动   大神你人设崩了   大神你人设崩了   刺客之王