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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
jQuery 联动日历实现代码
May 31 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 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
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
jquery CSS选择器笔记
2010/03/29 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
浅谈小程序 setData学问多
2019/02/20 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Python+django实现文件上传
2016/01/17 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python中format函数如何使用
2020/06/22 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
群众路线教师自我剖析材料
2014/09/29 职场文书
投资入股合作协议书
2014/10/28 职场文书
优秀班组事迹材料
2014/12/24 职场文书
教师个人年度总结
2015/02/11 职场文书
党小组鉴定意见
2015/06/02 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
解读Vue组件注册方式
2021/05/15 Vue.js