在vue-cli4版本下,创建vue项目
1.键盘按键Win+R ,输入cmd,进入到命令行页面,
2.在node.js 和npm安装完成的前提下,创建vue项目
3.进入到项目的安装路径,我将项目放在了D盘中的vue-list文件夹中
4.输入 vue create vue-app(项目名称)
5.回车,进入到以下页面
该页面的意思是创建项目是默认的框架还是自己手动设置,用键盘的上下方向键进行选择,我一般选择的是手动设置。
default 默认
Manually select features 手动设置
6.回车,进入到以下页面
该页面显示的是选择项目所需要的插件(项目需要什么,就选择什么),可用键盘中的上下方向键来进行选择,按中空格键来选中
我一般都选择以下几个插件
Router 路由
Vuex vue状态管理
CSS Pre-processors 样式
Linter / Formatter 规范类型
7.回车,进入到以下的页面
该页面显示的是路由是否选择history模式,其实呢就是我们的页面路由含不含有#
按照项目要求进行选择
如果是自己练习学习的话,我建议选择N,这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。
选yes的话,还需要在服务器中进行设置。
8.回车,进入到以下页面
选择css预编译器
这里我建议选择的是第一个【Sass/SCSS(with dart-sass)】
node-sass是自动编译实时的,dart-sass需要保存后才会生效
sass 官方目前主力推 dart-sass ,最新的特性都会在这个上面先实现
9.回车,进入到以下页面
选择Eslint代码验证规则,
提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多
10.回车,进入到以下页面,
选择代码规则检测的时间
这个地方我选择的是lint on save (保存就检测),这样可以随时发现问题,如果选择Lint and fix on commit,到fix和commit的时候问题可能就积累的很多了,或许会浪费更多的时间在解决问题上。
11.回车,进入到以下页面
选择如何存放配置
如果本着项目结构简单的想法,就选择了第二个
具体可按照项目要求进行选择。
这里我选择第二个
12.回车,返回以下页面,
是否保存当前的配置,N 不记录,如果选择 Y 需要输入保存名字,
如果是刚开始学习的朋友我是不建议保存,毕竟多练习也是好的。
所以,这里我选择的是N
13.回车,等待创建项目,
创建成功,显示以下页面
14.执行给出的命令,
cd vue-app
yarn serve
回车,
就可以直接访问了。