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

YYAugenstern

已于 2023-05-19 21:27:58 修改

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue系列文章标签： vue.js javascript 前端

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

本文链接：https://blog.csdn.net/HelloWorld20161112/article/details/130773831

Vue系列专栏收录该内容

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、全局安装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>