vueCli脚手架搭建和文件详解（超详细保姆级教学）
一、找到希望创建项目的文件夹，进入终端
二、执行 vue create 文件夹名称
运行结果如下：
1、选择Manually select features ==> 手动选择特征（自己选择设置）前两个Default是默认推荐设置，其他的则是之前已经创建过的设置
注意：这里选择需要用空格选择，回车是所有想要的配置选择好后确认所有
- Babel ：是将ES6的代码在浏览器中自动转换成ES5的代码
必选 - TypeScript ：JS拓展的一些用法
- Progressive Web App (PWA) Support：渐进Web应用程序(PWA)支持
一般不选 - Router：路由
必选 - Vuex：Vue开发的状态管理模式
必选 - CSS Pre-processors：CSS 预处理器，让CSS变成一门编程语言，可以使用变量，函数，算法等
必选 - Linter / Formatter：
默认选中 - Unit Testing：单元测试
- E2E Testing：单元测试
2、进入Vue版本号的选择，一般选择3.x即可，老项目需要选择2.x
3、Use class-style component syntax?：使用css风格的组件语法？==> 输入y确认
4、Use Babel alongside TypeScript ：是否使用Babel处理TS？ ==> 选择y确认
5、Use history mode for router?：路由使用history模式？==> 选择y确认
6、Pick a CSS pre-processor ：选择一个CSS的预处理器 ==> 选择第一个Sass/SCSS
7、选择第三个ESlint + Standard config：通用规范
- ESLint with error prevention only ：只配置使用 ESLint 官网的推荐规则
- ESLint + Airbnb config ：Airbnb规范
- ESLint + Standard config :通用规范
- ESLint + Prettier ：Prettier规范
8、选择lint on save （养成代码的良好习惯）
- Lint on save：代码不符合 lint 规则时，会提示 warning；语法错误，会直接在页面上显示 error
- Lint and fix on commit：代码除语法错误不会提示 warning
9、建议选择In dedicated config files
- In dedicated config files：单独创建两个文件夹
- In package.json ：放在package.json文件内
10、Save this as a preset for future projects? ：是否保存这些设置；保存命名后就会和开始文件一样在开头生成一个demo文件设置可选择
11、Save preset as：保存这些设置的名字（最好和vue create 文件名的名字一致）
12、恭喜你，创建成功！关闭该页面
13、进入Vue create 文件名 的文件夹内打开终端输入 npm run serve
- local：该地址就是自己本地可以直接访问的地址，直接进入浏览器输入该地址即可
- Network：服务器地址，别人也可以访问
三、打开vscode将刚创建好的文件夹加入工作区
注意：！！！这里由于刚创建好的文件夹不一定在根目录，所以容易会将该文件夹的外层文件夹加入工作区，会导致后面vscode中eslint插件的工作失败，不会自动审查错误代码，建议直接将该文件夹添加到工作区！！！
- public // 开发环境服务器监听 根目录
- index.html：单页面的页面
- favicon.ico：浏览器最上方图标 // 可以在index.html中的最后一段进行修改
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
- src // 源码目录
- assets // 存储 开发时用到静态资源 css js imgs fonts
- components // 存储开发时公共UI组件
- router // 路由配置
- store // vuex配置
- views // 存储路由组件
- App.vue // 根组件 作为 app应用实例的 config
- main.js // webpack入口文件
- .browserslistrc // postcss 浏览器兼容配置
- .eslintrc // eslint配置文件
- babel.config.js // babel配置es6转es5
- package.json
- vue.config.js // 项目开发时配置，可以在这里修改默认配置
vueCli脚手架搭建和文件详解（超详细保姆级教学）相关推荐
- vue-cli脚手架配置基础文件详解/新手入门必看
vue-cli 脚手架中webpack 配置基础文件详解 需要Word版本 的小伙伴可以发我邮件2445478193@qq.com 一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的 ...
- vscode配置C/C++环境（超详细保姆级教学）
大一上学期被学长安利了vscode,但是下载安装后不会配置,自己连查带问搞了七八个小时终于配置好了.后面身边很多同学也不会配,都来找我帮忙配,加上之前自己摸索着配的时候感觉网上没有详细又靠谱的教程,所 ...
- 腾讯云存储上传头像、文件功能（超详细保姆级）
创建腾讯云,并实名认证 地址:申请腾讯云账号:腾讯云 产业智变·云启未来 - 腾讯 在官网搜索对象存储,点击立即使用 创建存储桶 无脑下一步,唯一注意点就是可以选择共有读写,以及取一个存储桶的名称 查 ...
- 【微信聊天记录制作词云】超详细保姆级教学！！！（详细步骤+代码）
简介 还在因各种情侣节日不知道送对方什么礼物而感到苦恼吗?不如试试这个超浪漫的微信聊天词云! 整体思路主要为: 1. 利用模拟器找到备份文件 2. 解密文件并导出文本文件 3. 代码制作词云 前期准备 ...
- 监控摄像头通过OBS取流变身电脑摄像头（超详细保姆级教学）
使用监控摄像头通过OBS取流变身电脑摄像头 小编这里的应用场景为 "使用摄像头作为线上会议摄像头进行取流",方便会议 使用到的软件工具:OBS Studio.VCL 系统环境:64 ...
- Java 泛型详解(超详细的java泛型方法解析)
Java 泛型详解(超详细的java泛型方法解析) 1. 什么是泛型 泛型:是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型.也就是说在泛型使用过程中,操作的数据类型被指定为 ...
- 动态规划27k字超详细保姆级入门讲解——附DP经典线性、区间、二维图、四维8个模型题解
动态规划27k字超详细保姆级入门讲解 写在前面: 这篇文章是目前为止我写过最长也是最久的文章,前面关于DP的讲解我查阅了大量的博客资料,学习其他博主对DP的理解,也翻阅了很多经典的纸质书籍,同时做了近 ...
- MySQL数据库快速入门到精通（超详细保姆级，建议收藏）这可能是目前最适合你的教程，从基础语法到实例演示。
前言 此文章旨在为需要掌握快速开发和复习MySQL的同学所准备,您完全可以把此文章当作参考文档来使用,本文将尽量精简,使您快速的理解和掌握语法. 关于MySQL MySQL是一个关系型数据库管理系统, ...
- 【Vue】Vue-cli(脚手架)的目录结构详解（转载）
一.图简单说明下各个目录都是干嘛的: 总体框架:一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 四.文件结构细分 1.b ...
最新文章
- MySQL模糊查询—between and关键字
- miui12怎么自定义开机动画_MIUI12正式官宣，5天后发布！网友:发布是发布，12月才能更新？...
- JMeter：负载测试关系数据库
- php redis 删除key 通配符,php中redis批量删除key的方法是什么
- jQuery中 trigger() 使用心得
- 为什么我们使用volatile关键字？ [重复]
- python练习题及答案-python编程练习题和答案.doc
- 11选5下期算法_五指大山｜新手入门，快速玩转11选5
- C++是C语言演变过来的，为何不能代替C语言？
- 基于微信小程序开发——音乐播放器
- Guice依赖注入(Provider)
- 上帝掷骰子吗？量子物理史话——读书笔记
- 丝滑流畅的手写签名 PC适配版
- 跨平台应用开发进阶(三十四) ：uni-app 应用 Universal Link 实现 iOS 微信分享
- 安卓手机查看充放电电压、电流及功率
- 岁月安好，不存在的！不过是有人替你负重前行
- [弱校联萌2016]2016弱校联盟十一专场10.3
- 云栖专辑 | 阿里开发者们的20个感悟，一通百通 1
- 有关指令集架构与微架构的一些知识
- 预见未来 · 遇见未来