创建 Vue 工程的3种方法

小公鸡卡哇伊呀~

已于 2023-04-16 12:32:46 修改

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端

于 2022-05-14 23:04:36 首次发布

本文链接：https://blog.csdn.net/ftell/article/details/124774443

版权

可以使用以下3种方法创建并初始化一个Vue app：

方法1. 从CDN 加载 Vue

CDN：Content Delivery Network 内容分发网络，使用脚本从CND加载Vue，步骤如下：

index.html 中增加脚本：<script src="https://unpkg.com/vue@3"></script>
（参考网页: https://vuejs.org/guide/quick-start.html ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="app.js" defer></script>
</head>
<body>
    <div id="app">{{ message }}</div>
</body>
</html>

app.js 代码：

const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
});
  
app.mount('#app');

这种方法是创建 Vue 项目最为简单，存在以下缺点：

缺少开发服务器，html 文件双击打开，使用的是文件协议，对于更新，必须手动刷新页面，这会导致会丢失app状态。
开发缺少IDE支持，例如没有auto-completion，没有拼写错误提示等等。

因此，这种简单的方法不适用于初始化大型复杂的 Vue app。

方法 2. 使用 Vue CLI 工具

不同于Vue 框架，Vue CLI 只是一个工具，使用这个工具能够创建具有某些配置，某些内置工具的项目，使用 Vue CLI 有助于开发大型复杂的 Vue App。

使用 Vue CLI 创建项目步骤如下：

1. 安装 Node

Vue CLI 在后台使用 NodeJS，要使用 Vue CLI，首先必须下载并安装 Node.js。Vue CLI 当前不支持 Node 17 版本，所以 node 应安装 LTS 版本。

2. 运行命令 npm install -g @vue/cli

参考网页：
https://cli.vuejs.org/guide/installation.html

此命令将在系统上全局安装 Vue CLI 工具。

3. 创建Vue 工程

运行命令：vue create my-first-vue-app

在项目路径下运行此命令，创建并初始化一个名称为 my-first-vue-app 的 Vue 工程。

参考网页：https://cli.vuejs.org/guide/creating-a-project.html

方法3. 使用命令 `npm init vue`

vuejs.org 上列出的命令：npm init vue@latest
(https://vuejs.org/guide/quick-start.html#with-build-tools)

因为使用了npm, 所以要运行这个命令，也必须首先安装 NodeJS。

此命令使用命令行向导引导项目的创建，对于基本的 Vue 工程，所有的 option 都选 no.

综上，创建简单的 demo 小程序，可以使用方法1。要创建大型复杂的程序，使用方法 2 或者方法 3，方法 3 是 Vue 列出的方法，比方法 2 新。

小公鸡卡哇伊呀~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
创建 Vue 工程的3种方法

可以使用以下3种方法创建并初始化一个Vue app：方法1. 从CDN 加载 VueCDN：Content Delivery Network 内容分发网络，使用脚本从CND加载Vue，步骤如下：index.html 中增加脚本：<script src="https://unpkg.com/vue@3"></script>（参考网页: https://vuejs.org/guide/quick-start.html ）<!DOCTYPE html><
复制链接

扫一扫