Vue.js实战——框架搭建_2

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