您现在的位置是:首页 > 经典句子

脚手架vue-cli创建Vue项目手把手教学

作者:峨乐时间:2024-05-15 15:25:52分类:经典句子

简介  文章浏览阅读1.8k次,点赞4次,收藏10次。Default是默认选择(vue2,vue3),Manually select features 是自己手动选择,可以选择你需要的。通常都是自己手动选择,键盘上下键选择,enter确定。用vue -V检查版本,如果

点击全文阅读

一、安装vue-cli

npm install -g @vue/cli

安装完成后:输入vue -V检查版本,出现版本号就表示安装成功,如果出现“vue” 不是内部或外部命令,也不是可运行的程序或批处理文件,就说明安装失败了

 tips:失败了也不用慌,详细看官网怎么安装,下面放的链接

安装 | Vue CLI (vuejs.org)

二、创建项目

(1)新建文件,使用VScode打开文件夹,左上角新建终端。

(2)输入创建命令按回车 vue create vue-project-name (项目名不能用驼峰命名)

 第一项和第二项,选择后会直接创建对应项目。

这里主要介绍选择第三项手动配置。

(3)选择第三项以后,会有如下选择配置项,按空格选中/取消选中

个人习惯勾选如下:

 

(4)选择vue版本 

(5)路由模式

第三步选择路由才会有这一步骤,一般选择yes,输入y/n

(6)css预处理器

在第三步中勾选CSS pre-processors才会有这一步选择

 (7)配置文件的存放位置

选项一:配置文件放在独立的配置文件中。

选项二:配置文件放在package.json中。

tips:建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置

(8)保存配置

输入Y以后,会让你输入一个名称,下次创建项目,在(2)中就会多出一个这个名称的选项。一般输入N

 (9)运行项目

 

打开效果如下:

 

这样就创建完成一个基于vue-cli的vue2脚手架项目!

如果报错,请看下一篇文章!!!!!!!!!

 

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

我来说两句