前言
Vue.js 和 Element UI 都是用 JavaScript 编写的。
- 1、Vue.js 是一个渐进式 JavaScript 框架。
- 2、Element UI 是基于 Vue.js 的组件库。
- 3、JavaScript 是这两个项目的主要编程语言。
而Element Plus是基于TypeScript开发的。
一、Vue2
1、基于vue@cli工具创建
vue2 + element ui + js/ts
1、创建项目命令
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test选择vue2
2、过程截图
二、Vue3
1、基于vue@cli工具创建
Vue3 + element plus + ts/js
创建项目命令
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test选择vue3
过程截图同上,只是选择3.x
2、基于vite创建
Vue3 + element plus + ts/js
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
npm create vue@latest
过程截图
三、引入element ui或element plus
1、vue2 + element ui + js
引入element ui
npm i element-ui -S --legacy-peer-deps
main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
2、vue3 + element plus + ts
引入element plus
npm install element-plus --save
main.ts配置
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus as any)
总结
推荐vite创建项目时,选择TS,因为element plus很多组件是基于TS开发的。
但是,如果你实在不会TS,那么,就创建JS项目
否则,你使用element plus可能就比较麻烦
你需要把TS实现的组件,自行转化成JS代码
所以,你会TS,那么用vite方式创建项目,选择Vue3+TS,然后,引入element plus框架。
如果,你不会TS,那么用vue@cli方式创建项目,选择Vue2+JS,然后,引入element ui框架。
补充
创建好项目后,我们需要进入项目执行npm i
,进行依赖想下载。
如果,你使用npm命令,下载依赖过慢。
我们可以选择一下几种方式处理。
1、修改npm镜像源。
npm config set registry https://registry.npmmirror.com
2、使用cnpm
安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm -v
用法与npm一样。
3、使用yarn
npm install --global yarn --registry=https://registry.npmmirror.com
yarn -v
用法略有区别
安装npm、cnpm、yarn
的教程
https://blog.csdn.net/weixin_44373876/article/details/133500027