新版vue脚手架更加傻瓜了,但是默认创建的项目和实际开发需求还是有点出入,比如vue的特点就是快,现在脚手架强制eslint就不友好了,教程重点是如何配置本地代理和关闭eslint.
1.创建项目 vue create xxxx
image.png
2.选择模式preset
默认选择第一个带babel,eslint的,我们选第二个自己配置
image.png
3.选完手动配置后,会出现一个配置页面
image.png
上下箭头切换选项,空格选中/取消,开发一般这么选
选router和css处理器就好了,现在版本没有取消eslint的选项了比较强迫
image.png
4.然后会问你用hash模式路由还是history模式路由
pc页面就has,移动页面如果是APP webkit渲染页面建议history,因为有的APP h5方案会在URL后面加特定参数,hash模式的#/会被忽略,刷新的时候会出问题
hash敲n history敲y
image.png
5.css预处理器
选dart-sass 或者node-sass都行
6.babel eslint等配置文件存在哪,
这里要选第二个package.json中
image.png
7.Save this as a preset for future projects?
要不要把上面的选项保存下来方便以后创建省事,不建议保存,这样以后创建新项目自己能再过一遍,熟悉了增加工作经验
8.安装完成之后,目录结构
image.png
9.设置本地代理和关闭eslint
在src同级新建文件vue.config.js
按照图片所示配置即可
10.npm run serve即可启动项目啦!
网友评论