vue-cli 3 VUE脚手架项目搭建（详解）

版权声明：本文为CSDN博主「陨石猎人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42205731/article/details/106698888

vue-cli 3 VUE脚手架
注： vue cli3 需要node8.9或者以上版本

vue-cli版本检查

// 命令行
vue -V  // 查看当前版本
npm uninstall -g vue-cli  //卸载之前的
npm install -g @vue/cli   //安装最新的

// 命令行
vue -V  // 查看当前版本
npm uninstall -g vue-cli  //卸载之前的
npm install -g @vue/cli   //安装最新的

开始构建项目
vue create ‘项目名’ 回车创建

配置

default 是默认配置
Manually select features 是自己手动选择
（上下箭头切换，回车确定）

手动配置：
需要什么自己选择（上下箭头切换 空格选中 ）
babel:转换es6语法的这个必须要
typescript 看自己需不需要用
router管理路由的也选上
vuex状态管理就看自己需不需要用
css pre样式预处理器这个也加上
linter/Formatter统一代码风格
最后2个分别是单元测试和端对端测试。 示例选择了几个常用的 然后回车确认

路由使用历史模式吗？
路由模式分为Hash模式 History(历史)模式 Abstract模式 三种
hash模式最明显的特点就是url上会带有#号， History历史模式的url就跟正常的访问地址一样。
示例不使用历史模式，所以选的n

选择css预处理器 我选的less

选择语法检测工具
ESLint with error prevention only(只检测错误)
ESLint + Standard config 自带linter和自动代码纠正，没有配置，自动格式化代码，可在编码早起发现规范问题和低级错误
ESLint + Prettier 能统团队的代码风格
示例选择 ESLint + Prettier

选择语法检查方式

Lint on save (保存就检测)
Lint and fex on commit ( 用户提交文件到git的时候检测 )
示例选择 Lint on save

babel,postcss,eslint配置文件存放位置
in dedicated config files（在专用配置文件中，就是单独管理）
in package.json（放在package.json里）
示例选择：in dedicated config files

保存为未来项目的预配置

安装成功
npm run serve启动项目