▼ 2.2.1 create-vue 创建 Vue 2 项目 (推荐)#

执行命令：npm create vue@2

这是文章记录时官方最新的脚手架工具，推荐使用。

▼ 2.2.2 vue-cli@2.9.6 创建 Vue 2 项目#

执行命令：vue2 init webpack pro

这是 Vue 2.0 时期最早的脚手架工具。其中 vue2 命令来自于本地安装 vue-cli@2.9.6 之后，手动将命令行文件更名为 vue2 并添加到系统环境变量中得到的。

▼ 2.3.1 create-vue 创建 Vue 3 项目 (推荐)#

执行命令：npm create vue@3

这是文章记录时官方最新的脚手架工具，推荐使用。

▼ 2.3.2 @vue/cli@5.0.8 创建 Vue 3 项目#

执行命令：vue3 create vue3-cli-demo

其中 vue3 命令来自于本地安装 @vue/cli@5.0.8 之后，手动将命令行文件更名为 vue3 并添加到系统环境变量中得到的。

这个命令在创建项目的第一步，也可以选择创建 vue2 的项目；第二步选择默认包管理器：[yarn, npm]。

在 js 文件中如何使用elementUI中的方法：#

我们先来看下elementUI中的 js 的源码：

elementUI 中的 js 的线上地址 (点击查看)：https://unpkg.com/element-ui/lib/index.js

打开这个线上地址，看到满屏的 vue 的时候，就一定要清楚：elementUI 是跟 vue 一起使用的，而且引入elementUI一定要是在vue引入之后才可以。

而且代码开头处，有 define("ELEMENT" 和 exports.ELEMENT，找不到可以Ctrl+F搜索查看。这个其实就是 element 的集合，所有使用的组件方法都可以直接通过ELEMENT去调用。

下面汇总一下使用方法：#

1. 首先要引入 vue.js

未压缩版本

1
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

minify 版本：

1
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

2. 引入 elementUI 的 css 和 js 文件

1
<!-- 引入样式 -->
2
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
3
<!-- 引入组件库 -->
4
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3. 需要在 body 闭合标签之前引入封装好的函数文件才可以生效，也就是为了能够在所有的标签渲染完成后再使用，这点要注意。

4. 通过 cdn 引入的 elementUI，在使用 message.error 等方法时，需要通过下面的方式来调用：

1
ELEMENT.Message.error('错误');

其他方法同理

· 语法部分#

• 如下数据类型等引用，必须要确保在<script> 标签上加上lang="ts"

  1
  <script lang="ts">
  2
  export interface Dept {
  3
    id: number;
  4
    value: number;
  5
  }
  6
  function handleDeptSelect(v1: string | null, option: Dept) {
  7
    console.log(`${v1}, ${option}`);
  8
  }
  9
  ...
  10
  </script>
  

• 想使用 Vue3 的最新写法 (就是不使用原来的export default { }) 写法，请记得要在 <script> 标签中，加上 setup

  1
  <script lang="ts" setup>
  2
  </script>