系列三、vue cli3初始化项目（命令行方式）

原创已于 2023-05-19 21:27:58 修改 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-05-19 21:03:07 首次发布

Vue系列专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何全局安装VueCLI，查看其版本，然后初始化一个新的Vue项目。接着，详细阐述了安装Element-Plus库的过程，包括在package.json和main.js中的配置，以及在App.vue中使用Element组件的示例。最后，通过启动项目来验证Element-Plus安装是否成功。

一、全局安装vue-cli

npm install -g @vue/cli

二、查看vue-cli的版本

vue -V

三、初始化项目

vue create vue-cli3-project-example

四、验证安装是否成功

五、安装 element-plus

npm install element-plus --save

5.1、package.json中的变化

5.2、main.js中配置

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
 
createApp(App).use(router).use(ElementPlus).mount('#app')

5.3、App.vue添加element组件

<el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
</el-row>