1、参考网友的经验安装Node.js:https://blog.csdn.net/zhaibingbinglove/article/details/79311673安装好:node(如果部分组件下载timeout时,才需要考虑使用cnpm,建议一开始跳过这步)。本人因几个月前已经做完这些操作,无法一一验证。各位也可以自行通过其他经验进行安装验证。安装完成后的结果如下:
2、安装vue-cli:
npm install -g vue-cli
安装完成效果如下:
3、初始化第一个项目:
vue init webpack geolocation_1
注意,本着极简主义的思想,不要安装Router及后续的几个组件
执行完成后的效果如下:
4、按照上图标红的命令逐一执行,会看到如下结果:
5、在浏览器中输入命令中的标红地址,结果如下则表明项目初始化成功:
6、由于Chrome的原生特性,比如获取地理位置(经纬度)坐标需要https才能获取到坐标,所以我们再把dev开发的url变成https的,修改方式参考:https://blog.csdn.net/lyn1772671980/article/details/81390089。修改完成后,ctrl+c终止原运行的本地服务器,重新执行:
npm run dev
运行效果如下:
7、执行编译命令:
npm run dev
会单独生成一个文件夹dest,直接使用chrome打开其下的html页面。
如果显示一片空白,则去编辑该html文件,在所有css/js文件路径前面加上"."号并保存(相对路径引用错误),效果如下:
最终呈现效果如下:
上一篇:Vue.js实战——序言_1 下一篇:Vue.js实战——精简webpack配置_3
参考资料:
[1]https://blog.csdn.net/zhaibingbinglove/article/details/79311673
[2]https://cn.vuejs.org/v2/guide/installation.html#NPM
[3]https://blog.csdn.net/lyn1772671980/article/details/81390089