Javascript实践之搭建Vue.js框架篇_3

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及后续的几个组件

执行完成后的效果如下:

扫描二维码关注公众号,回复: 4741927 查看本文章

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文件路径前面加上"."号并保存(相对路径引用错误),效果如下:

最终呈现效果如下:

参考资料:

[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

猜你喜欢

转载自blog.csdn.net/dobuy/article/details/85544324
今日推荐