新手上路!vue-cli4.0脚手架安装过程及项目搭建!

  • vue-cli初学者纪录篇。作为一个只会复制粘贴的码农也想来码码字hhhh 好记性不如烂笔头,就我这记性,我估计要多看几遍才行,所以就记录下这个过程。

全局安装vue脚手架

npm i -g @vue/cli

我喜欢在vs code终端(Ctrl + ` 调出)安装vue脚手架,因为安装过程有进度的显示,但是我忘了截图新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第1张图片

查看vue脚手架的版本

vue -V

查看vue脚手架版本号
一般安装好的脚手架都是最新版本的,除非指定版本安装。

npm install -g vue-cli@版本号
npm install -g @vue/cli@版本号

搭vue脚手架项目的步骤

1、vue create 项目名称

用方向键选择,Manually select features. 回车!
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第2张图片
2、使用方向键,空格键选中。回车!(项目需要什么就选择什么)
Router路由
Vuex vue状态管理
CSS Pre-processors 样式
Linter / Formatter 规范类型新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第3张图片
3、选中配置路由的Y,回车!新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第4张图片
这里我选择less,回车!
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第5张图片
4、代码风格和eslint,这里我选择Standard config。回车!
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第6张图片
5、选择代码一保存的时候就检查。回车!
在这里插入图片描述
6、选择lint的配置文件如何存放。这里选择分开存放,方便管理。回车!在这里插入图片描述
7、是否保存本次的配置项,方便下次创建项目。输入Y,回车!
在这里插入图片描述
8、项目搭建完成!
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第7张图片
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第8张图片
访问localhost:8080/
新手上路!vue-cli4.0脚手架安装过程及项目搭建!_第9张图片

你可能感兴趣的:(vue)