采用vue3+element-plus 快速创建项目

返回 使用微信阅读
请用微信扫一扫
JackFan

步骤如下:

前提是先安装好node(14.x及以上)与npm(6.x及以上),这里就不描述node 与 npm的安装了

1、安装vue-cli4.5

npm i -g @vue/cli   //全局安装vue-cli最新版本

如果之前安装了vue2.0的版本,我们可以先把2.0的版本删除

npm uni -g vue-cli

安装完检查版本号

vue -V

执行上面的命令如下图,vue3就安装好了

1623318088(1)

2、创建vue项目

vue create xxx (xxx项目名)

3、按照提示一步步操作,如下图:

1623401188(1)

选择vue3,这里包含了babel,eslint等等

然后回车

1623401948(1)

按照上面的命令,cd进入项目,然后npm run serve,项目就可以跑起来了

npm run serve

1623404108(1)

4、快速安装element-plus

vue add element-plus

5、按照提示选择fully import安装成功即可

1623402104(1)

7、再看看loclhost:8080效果,如下图即安装成功

1623402201(1)

如果没有出现上面的粉色按钮,你也可以手动到hello world组件添加一个按钮检查element-plus 是否生效,下面是按钮代码

 <el-button type="primary">主要按钮</el-button> 

8、安装Vue Router 与 Vuex以及,我们可以采用vue cli 的图形界面来安装管理这些插件,非常方便。执行以下命令,导入刚刚创建的项目即可

vue ui

 

阅读数  1018