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 相关文章推荐
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
VUEX-action可以修改state吗
Nov 19 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
桌面中心(四)数据显示
2006/10/09 PHP
用Php实现链结人气统计
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
javascript 保存文件到本地实现方法
2012/11/29 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
2015年党员自我剖析材料
2014/12/17 职场文书
运动会主持词大全
2015/07/02 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript