在vue-cli4版本下,创建vue项目

1.键盘按键Win+R ,输入cmd,进入到命令行页面,

2.在node.js 和npm安装完成的前提下,创建vue项目

3.进入到项目的安装路径,我将项目放在了D盘中的vue-list文件夹中

在vue-cli4版本下,创建vue项目_第1张图片

4.输入   vue create vue-app(项目名称)

5.回车,进入到以下页面

该页面的意思是创建项目是默认的框架还是自己手动设置,用键盘的上下方向键进行选择,我一般选择的是手动设置。

default 默认

Manually select features 手动设置

在vue-cli4版本下,创建vue项目_第2张图片

6.回车,进入到以下页面

该页面显示的是选择项目所需要的插件(项目需要什么,就选择什么),可用键盘中的上下方向键来进行选择,按中空格键来选中

我一般都选择以下几个插件

           Router                 路由
            Vuex                   vue状态管理
CSS Pre-processors      样式
Linter / Formatter            规范类型

 

在vue-cli4版本下,创建vue项目_第3张图片

7.回车,进入到以下的页面

该页面显示的是路由是否选择history模式,其实呢就是我们的页面路由含不含有#

按照项目要求进行选择

如果是自己练习学习的话,我建议选择N,这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。

选yes的话,还需要在服务器中进行设置。

在vue-cli4版本下,创建vue项目_第4张图片

8.回车,进入到以下页面

选择css预编译器

这里我建议选择的是第一个【Sass/SCSS(with dart-sass)】

node-sass是自动编译实时的,dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass ,最新的特性都会在这个上面先实现

在vue-cli4版本下,创建vue项目_第5张图片

9.回车,进入到以下页面

选择Eslint代码验证规则,

提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

在vue-cli4版本下,创建vue项目_第6张图片

10.回车,进入到以下页面,

选择代码规则检测的时间

这个地方我选择的是lint on save (保存就检测),这样可以随时发现问题,如果选择Lint and fix on commit,到fix和commit的时候问题可能就积累的很多了,或许会浪费更多的时间在解决问题上。

在vue-cli4版本下,创建vue项目_第7张图片

11.回车,进入到以下页面

选择如何存放配置

如果本着项目结构简单的想法,就选择了第二个

具体可按照项目要求进行选择。

这里我选择第二个

在vue-cli4版本下,创建vue项目_第8张图片

12.回车,返回以下页面,

是否保存当前的配置,N 不记录,如果选择 Y 需要输入保存名字,

如果是刚开始学习的朋友我是不建议保存,毕竟多练习也是好的。

所以,这里我选择的是N

 

在vue-cli4版本下,创建vue项目_第9张图片

13.回车,等待创建项目,

创建成功,显示以下页面

在vue-cli4版本下,创建vue项目_第10张图片

 

14.执行给出的命令,

cd vue-app

yarn serve

回车,

在vue-cli4版本下,创建vue项目_第11张图片

就可以直接访问了。

你可能感兴趣的:(vue-cli)