Vue之初识Vue CLI 脚手架

Vue CLI 是Vue 官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

脚手架有什么好处?

1.开箱即用,零配置

2.内置 babel 等工具

3.标准化

使用步骤:

1.全局安装(一次):yarn globaladd @vue/cli 或 npm i @vue/cli -g
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name(项目名-不能用中文)
4.启动项目:yarn serve 或 npm run serve(找package.json)

我们在终端执行

javascript 复制代码
 npm i @vue/cli -g

然后我们先随便创建一个文件夹,文件夹名随便取

我们进入到文件夹

输入cmd 回车

输入 vue create name(随便取,但不能是中文)

这是选择是 Vue2 还是 Vue3

我这暂时演示Vue2, 我们选中Vue2回车,我们耐心等待安装

安装完毕后,我们切换文件所在路径,也就是你创建好的vue脚手架

我们输入:

javascript 复制代码
npm run serve

我们打开链接,如果是如下图所示,说明我们的脚手架安装成功了


感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
进取星辰21 分钟前
31、魔法生物图鉴——React 19 Web Workers
开发语言·javascript·ecmascript
GISer_Jing1 小时前
Vue 和 React 状态管理的性能优化策略对比
vue.js·react.js·性能优化
海天胜景1 小时前
jqGrid冻结列错行问题,将冻结表格(悬浮表格)与 正常表格进行高度同步
前端
清风细雨_林木木1 小时前
解决 Tailwind CSS 代码冗余问题
前端·css
HSunR1 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
搏博1 小时前
WPS中代码段的识别方法及JS宏实现
开发语言·javascript·wps
三天不学习2 小时前
VueUse/Core:提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
好青崧2 小时前
等于和绝对等于的区别
javascript
余道各努力,千里自同风2 小时前
CSS实现文本自动平衡text-wrap: balance
前端·css
半青年2 小时前
Qt图表库推荐指南与分析
c语言·开发语言·javascript·c++·qt·信息可视化