可以使用以下3种方法创建并初始化一个Vue app:
方法1. 从CDN 加载 Vue
CDN:Content Delivery Network 内容分发网络,使用脚本从CND加载Vue,步骤如下:
index.htm
l 中增加脚本:<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 新。