vue cli4.0 搭建项目步骤详解
本文针对已经安装好node, npm, vue cli的情况~~~ps:没安装的自行安装呀~然后开始创建项目!1.进入想要存放即将创建项目的目录,输入命令:对应命令:vue create project-name2.选择“Manually select features”(手动配置)ps:通过↑ ↓ 箭头选择你要配置的项图片中对应的下标:在创建项目最后一步问你是否保存当前配置:键入N不记录,如果键
·
本文针对已经安装好node, npm, vue cli的情况~~~
ps:没安装的自行安装呀~
然后开始创建项目!
1.进入想要存放即将创建项目的目录,输入命令:
对应命令:
vue create project-name
2.选择“Manually select features”(手动配置)
ps:通过↑ ↓ 箭头选择你要配置的项
图片中对应的下标:
- 在创建项目最后一步问你是否保存当前配置:键入N不记录,如果键入Y需要输入保存名字。
- 默认安装的配置。
- 我们选择这个~~~手动配置
然后 按 Enter键继续后续步奏~~~
3.选择你需要的配置项
ps:依然是通过↑ ↓ 箭头选择你要配置的项,空格 是选中或取消
上图是我的项目需要的配置,上图列出的配置说明如下:
- Choose Vue version----选择vue的版本;
- Babel----转码器,可以将ES6代码转为ES5代码;
- TypeScript----TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法;
- Progressive Web App (PWA) Support----渐进式Web应用程序;
- Router----vue-router(vue路由);
- Vuex----vuex(vue的状态管理模式);
- CSS Pre-processors----CSS 预处理器(如:less、sass);
- Linter / Formatter----代码风格检查和格式化(如:ESlint);
- Unit Testing----单元测试(unit tests);
- E2E Testing----e2e(end to end) 测试;
选完之后按 Enter 继续选择选中配置的值(我选的如下)~~~
对应下标解释:
-
vue的版本:按需选择~
-
使用history router:依然按需选择呀~
-
选择css 预处理器(node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现)
-
选择Eslint代码验证规则—ESLint + Prettier使用较多,所以嘛~遇到问题,能找到解决方案的可能性更大
-
选择什么时候进行代码规则检测:
Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查
为了等到commit的时候,问题可能都已经积累很多了,所以建议选择保存就检测~ -
选择单元测试:按需选择~
-
如何存放配置:
In dedicated config files // 独立文件放置
In package.json // 放package.json里
所以 按需选择~
8.是否保存当前配置,保存的话 下次创建项目就更方便啦~
4.创建项目ing…
然后就创建成功啦~~~
更多推荐
已为社区贡献8条内容
所有评论(0)