快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

webstorm建立vue-cli脚手架的方法教程-创新互联

webstorm建立vue-cli脚手架的方法教程?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

从事四川联通机房服务器托管,服务器租用,云主机,网站空间域名注册,CDN,网络代维等服务。

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脚手架的方法教程-创新互联
路径分享:http://6mz.cn/article/gshce.html

其他资讯