Vue3 + Typescript + Node.js 搭建elementUI使用环境_vue node js typejs

1. 使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next

npm install -g @vue/cli@next
1

vue upgrade --next
1

2. 创建Vue+TypeScript项目

vue create demo
1

其中demo是我们使用的项目名。

选择手动配置特征：

勾选需要使用的插件，尤其是TypeScript，用空格选择，选择完成后回车：

我们使用的是Vue3：

如无更改需求，后续一路回车即可：

等待配置直到完成

3. 安装ElmentUI plus（必须使用plus版本）

建立项目后，先要进入到项目文件夹内：

cd demo
1

安装：

npm install element-plus --save
1

4. 将ElmentUI添加到项目中

vue add element-plus
1

这时你会看到在src/plugins目录下面生成了一个element.js文件，由于我们使用的是TypeScript，需要手动将其后缀改为.ts，即将element.js文件的文件名重命名为element.ts。打开它，为其中的app加入类型声明为any类型：

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
 
export default (app: any) => {
  app.use(ElementPlus, { locale })
}

1
2
3
4
5
6
7
8

5. 完成：

运行该项目：

npm run serve
1

你将看到如下界面：

其中显著的标记是中间的蓝色按钮，他是ElementUI提供的一个按钮组件：

当你看到它时，表示你安装成功了。