当前位置: 首页>编程语言>正文

Vue脚手架-创建新项目

一:VUE-CLI介绍

Vue-CLI是一个基于vue.js进行快速开发的完整系统,提供:

  • 通过@vue/cli实现的交互式的项目脚手架
  • 一个丰富的官方插件合集,集成了前端生态中最好的工具
  • 一套完全图形化的创建和管理Vue.js项目的用户界面

二:安装步骤

1.安装nodejs(要求10以上的版本)

2.通过npm去安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org

3.通过cnpm去安装vue脚手架
cnpm install -g @vue/cli

安装后,通过vue --version命令,查看是否安装成功


Vue脚手架-创建新项目,第1张

三:创建项目

3-1:通过页面项目管理工具创建项目

通过在命令行输入:vue ui 启动vue脚手架自带的项目管理工具(服务)


Vue脚手架-创建新项目,第2张

命令启动成功后,会弹出如下页面


Vue脚手架-创建新项目,第3张

点击创建按钮,即可新建项目,新建成功后,会自动生成项目目录
Vue脚手架-创建新项目,第4张

3-2:通过命令行创建项目

vue create 项目名

对相应的配置项进行如下勾选


Vue脚手架-创建新项目,第5张

Vue脚手架-创建新项目,第6张

Vue脚手架-创建新项目,第7张

Vue脚手架-创建新项目,第8张

Vue脚手架-创建新项目,第9张
第一步:详情

Vue脚手架-创建新项目,第10张
第二步:预设

Vue脚手架-创建新项目,第11张
第三步:功能

Vue脚手架-创建新项目,第12张
第四步:配置

四:所需插件

4-1:element-plus插件

命令行安装:vue add element-plus
不建议安装,建议安装element-plus的依赖


Vue脚手架-创建新项目,第13张
图形界面

Vue脚手架-创建新项目,第14张

五:安装依赖库

5-1:安装element-plus和axios依赖库
Vue脚手架-创建新项目,第15张

5-2:安装vue3-ace-editor,json数据编辑器


Vue脚手架-创建新项目,第16张

https://www.xamrdz.com/lan/5t31996096.html

相关文章: