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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
Vue-Router的使用方法
Sep 05 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript 字符编码规则
2009/05/04 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
如何利用Python 进行边缘检测
2020/10/14 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
学生个人求职自荐信格式
2013/09/23 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
社会工作专业自荐信
2014/09/26 职场文书
介绍信的写法
2015/01/31 职场文书
创业计划书之美容店
2019/09/16 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS