webstorm建立vue-cli脚手架的傻瓜式教程


Posted in Javascript onSeptember 22, 2020

webstorm 文件 -> new -> project

1、尽量不要勾选 Use the default project setup (babel, eslint) 默认建立的项目好多的配置不全,后期再装很麻烦。

webstorm建立vue-cli脚手架的傻瓜式教程

2、点击 create 后出现以下选项,按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动

webstorm建立vue-cli脚手架的傻瓜式教程

3、选择配置,这时你会看见一些选项,你要集成什么就选就行了,我这里选个我比较常用的(注:空格键是选中与取消,A键是全选),这里有些选项可能看不见,移动上下键也不行,需要将选项边框网上拉才可以显示全。

webstorm建立vue-cli脚手架的傻瓜式教程

4、选择合适的 vue.js 版本开始这个项目,这里我选 3.x

webstorm建立vue-cli脚手架的傻瓜式教程

5、是否使用babel做转义 yes

webstorm建立vue-cli脚手架的傻瓜式教程

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

webstorm建立vue-cli脚手架的傻瓜式教程

7、是否使用history模式

webstorm建立vue-cli脚手架的傻瓜式教程

8、选择预处理的模式 这里我选 dart-sass ,与 node-sass 区别

  • node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass;
    dart-sass 是用 drat VM 来编译 sass;node-sass是自动编译实时的,dart-sass需要保存后才会生效
  • 推荐 dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass 因为国情问题经常装不上

webstorm建立vue-cli脚手架的傻瓜式教程

9、Pick a linter / formatter config: (Use arrow keys):选择语法检测规范 这里我选择 ESLint +Prettier

webstorm建立vue-cli脚手架的傻瓜式教程

10、保存就检测 和 fix和commit时候检查 这里我选择第一个

webstorm建立vue-cli脚手架的傻瓜式教程

11、放独立文件夹 与 放 package.json 。这里看自己喜欢哪个,这里我选的是 放独立文件夹

webstorm建立vue-cli脚手架的傻瓜式教程

12、是否记录一下以便下次继续使用这套配置 .键入N不记录,如果键入Y需要输入保存名字

webstorm建立vue-cli脚手架的傻瓜式教程

13、静静等待完成即可,如果时间比较长的话你可以去睡一觉。直到页面出现 Done 你就可以起来搬砖了。

到此这篇关于webstorm建立vue-cli脚手架的傻瓜式教程的文章就介绍到这了,更多相关webstorm建立vue-cli脚手架内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
Angular2入门--架构总览
Mar 29 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
通俗易懂地解释JS中的闭包
Oct 23 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
详解webpack 入门与解析
Apr 09 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 #Javascript
JS实现无限轮播无倒退效果
Sep 21 #Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
JS实现放大镜效果
Sep 21 #Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
You might like
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
公司中层干部的自我评价分享
2014/03/01 职场文书
抗震救灾标语
2014/06/26 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
教务处干事工作总结
2015/08/14 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle