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 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
jquery键盘事件介绍
Jan 31 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
$("").click与onclick的区别示例介绍
2014/09/25 Javascript
Javascript学习指南
2014/12/01 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python常用内置函数总结
2015/02/08 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python 调用c语言函数的方法
2017/09/29 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python内存映射文件读写方式
2020/04/24 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
财务简历的自我评价
2014/03/05 职场文书
机关节能减排实施方案
2014/03/17 职场文书
积极向上的团队口号
2014/06/06 职场文书
招商银行工作证明
2015/06/17 职场文书
党员反邪教心得体会
2016/01/15 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Go获取两个时区的时间差
2022/04/20 Golang