Vue-cli是什么:vue-cli是vue的脚⼿架,建筑上的脚⼿架就是先搭个架⼦,然后⼯⼈们慢慢往⾥⾯砌砖头,直到建筑成型。⽽程序的脚⼿架就是帮你把⼀些环境配置、基础变量定义,⽂件结构等都搭建好, 要创建新的项⽬时拿过来直接往⾥⾯添加新项⽬需要的东⻄。
为什么要⽤脚⼿架:
功能丰富
易于拓展
无需eject
CLI之上的图形化界面
即刻创建原型
vue-cli创建项⽬
执⾏步骤:
1.全局安装vue-cli,执⾏指令npm install -g @vue/cli
2.控制台输⼊vue验证是否出现以下⻚⾯
3.创建⼀个项⽬
3.x以上版本创建⽅法:
执⾏指令vue create xxx (xxx为项⽬名),或者采⽤图形化界⾯创建,执⾏指令vue ui
注意:以上指令是基于Wabpack⽣成的,然后现在Vue更推荐基于Vite的⽅式创建执⾏指令:
npm create vite@latest my-vue-app -- --template vue
2.x版本创建⽅法:
Vue CLI >= 3和旧版使⽤了相同的vue命令,所以Vue CLI 2 ( vue-cli )被覆盖了。如果你仍然需要使⽤旧版本的vue init功能,你可以全局安装⼀个桥接⼯具:npm install -g @vue/cli-init
创建项⽬:执⾏指令
vue init webpack my-project
4.基于webpack创建项⽬的时候会让你选择环境预设,回⻋确定开始下载依赖
a.第⼀步,快速选择环境
b.选择本项⽬需要的⼀些配置,可以按空格键取消或选中
c.选择Vue的版本号
d.选择服务的配置⽂件是单独⽂件还是放在package.json中
e.是否保存当前的预设
f.下载库后安装成功
5.终端进⼊到上⾯创建的项⽬⽂件夹,可以使⽤命令cd xxx,(xxx为上⾯的项⽬⽬录),也可以在vscode中选中项⽬⽂件夹右键在终端中打开
6.在终端中运⾏执⾏vue run serve
7.浏览启动后的⽹⻚