搭建vue-cli脚手架3.x版本和2.x版本项目

命令行搭建

一、 3.x版本

1、 安装 3.x 版本的 Vue 脚手架:

npm install -g @vue/cli

2、基于交互式命令行的方式,创建3.x版vue项目
输入vue create 新建项目名称,然后开始进行如图所示的项目配置
搭建vue-cli脚手架3.x版本和2.x版本项目_第1张图片搭建vue-cli脚手架3.x版本和2.x版本项目_第2张图片
搭建vue-cli脚手架3.x版本和2.x版本项目_第3张图片
安装成功后会显示安装成功,并提示运行项目的命令

3、运行上图的命令

cd 你刚刚创建的项目名称
npm run serve

然后会提示你项目开始启动…
搭建vue-cli脚手架3.x版本和2.x版本项目_第4张图片
见到如下页面说明搭建成功
搭建vue-cli脚手架3.x版本和2.x版本项目_第5张图片

一、 2.x版本

1、 安装 2.x 版本的 Vue 脚手架:

npm install -g @vue/cli-init

2、基于交互式命令行的方式,创建2.x版vue项目
输入vue init webpack 新建项目名称,按照下图进行配置
搭建vue-cli脚手架3.x版本和2.x版本项目_第6张图片
3、运行项目

cd 新建的项目名称
npm run dev

图形可视化搭建vue-cli 3.x版本

1、在命令行输入vue ui,然后就会在浏览器弹出创建页面,点击在此创建新项目
搭建vue-cli脚手架3.x版本和2.x版本项目_第7张图片
2、按照如图所示进行配置
在这里插入图片描述
搭建vue-cli脚手架3.x版本和2.x版本项目_第8张图片
勾选babel,router,link/formatter和使用配置文件
搭建vue-cli脚手架3.x版本和2.x版本项目_第9张图片
搭建vue-cli脚手架3.x版本和2.x版本项目_第10张图片
搭建vue-cli脚手架3.x版本和2.x版本项目_第11张图片

创建好的项目的目录结构

搭建vue-cli脚手架3.x版本和2.x版本项目_第12张图片

你可能感兴趣的:(前端那些奇奇怪怪的小问题)