@vue/cli搭建前端项目

前端项目搭建

vue-cli搭建项目

1、全局安装vue-cli： npm install -g @vue/cli

2、初始化vue项目： vue create projectname(项目名不允许使用大写字母)

3、选择初始化项目的配置

第一步：提示选择一个preset(预设)

第二步：根据项目需求选择添加的配置项（按空格键选择/取消）

Babel：是一个JS编译器，使用babel，便于将我们的源码进行转换（把es6=>es5）

TypeScript：使用TS进行源码编写

Progressive Wep App(PWA) Support：使用渐进式网页应用

Router：使用vue-router(vue的路由)

Vuex：使用vuex（vue的状态管理器）

CSS Pre-processors：使用CSS预处理器，如Scss、Less

Linter/Formatter：使用代码风格检查和格式化，如ESLint

Unit Testing：使用单元测试

E2E Testing：使用E2E测试，end to end（端到端）是黑盒测试的一种

第三步：选择版本

第四、五、六步：都选择默认选中，按回车即可

是否使用class风格的组件语法

是否使用Babel和TypeScript一起用于自动检测的填充，置换JSX

路由模式，是否选择history模式

第七步：选择一种CSS预处理器

第八步：选择一种代码格式化检测工具

ESLint with error prevention only：ESLint错误提醒

ESLint + Airbnb config：ESLint Airbnb 标准（不严谨模式）

ESLint + Standard config：ESLlint Standard标准（正常模式）

ESLint + Prettier：ESLint（代码质量检测）+ Prettier（代码格式化工具） - 严格模式

TSLint (deprecated)：TS格式检测工具

第九步：代码检查的方式（保存时检查/提交时检查）

第十步：配置文件如何存放（放在单独的文件还是package.json文件）

最后一步：是否保存当前配置，在以后的项目中快速构建