vue进阶篇 - 脚手架cli

343 阅读2分钟

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战」。


上一篇简单的和大家介绍了关于vue中单文件组件的内容,本期我会说一下vue脚手架的内容和使用安装方式,vue脚手架是Vue官方提供的标准化开发工具(开发平台)关于vue脚手架目前我用的是第四代的版本,脚手架是可以向下兼容的可以不用考虑脚手架是不是最新的,但是低版本是不可以想上兼容的,使用推荐用最新的开发平台也就是脚手架可以叫为vue-cli cli原称:command line inetrface,我们可以通过官网提示命令行安装方式:

image.png

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

第二步:切换到你要创建项目的目录,然后使用命令创建项目

vue create xxxx

例如:

1637294470(1).png

Please pick a preset: (Use arrow keys)

Default ([Vue 2] babel, eslint) 默认安装2.0版本的vue

Default (Vue 3 Preview) ([Vue 3] babel, eslint) 默认安装3.0版本的vue

Manually select features 自定义安装

1637300346(1).png 当我们选默认的时候vue/cli也就脚手架会自动帮你完成基础的项目我们可以通过第三步启动项目

第三步:启动项目

npm run serve

1637300697(1).png

当我们安装完成后,对应的路径会自动形成一个文件夹。

image.png

注意:我们需要在对的路径进行项目的启动否则将无法启动我们的项目,已我现在的这个项目为例,需要cd ceshi的方式更换路径,之后就可以npm run serve启动项目了,

注意,如果安装缓慢可以通过转换地址安装的,我这里推荐的是淘宝的镜像:npm config set registry registry.npm.taobao.org

这是正常启动的样子,我们可以通过地址来访问我们写的内容,当然我们选的默认也是有内容的,我们可以直接进去看,

image.png

这是vue默认的内容,下一篇我会和大家讲解里面具体的内容和我们真正使用那些部分; 1637301748(1).png