如何用sublime编写有本地服务的vue程序——给小白

时间:2024-04-07 12:25:13
版权声明:本文为博主原创文章,未经博主允许不得转载。

今天刚接触Vue2.0,所以有许多懵逼的地方,为什么要装node.js?为什么网上的视频都是用vs code编写的教程?怎么在sublime中像vs code一样开启本地服务(本人之前一直用sublime,所以不想换成网上流行的vs code)?其实这一切的问题都是我不懂node.js才造成的。啊哈~
在这里我就不多说了,有关node.js的知识内容自行百度咯!我就直接开始本次博客的主题:如何用sublime编写有本地服务的Vue程序!!!(其实sublime跟开启本地服务扯不上边

症结所在:sublime没有vs code的cmd命令窗口!
第一步:按照网上教程安装好node.js。(安装了这个才能在cmd命令使用npm)

第二步:在本地文件新建一个文件夹。我就在D盘新建了newVue文件。

第三步:打开cmd命令,指定到刚建的文件夹newVue。
如何用sublime编写有本地服务的vue程序——给小白

第四步:命令行中输入npm install -g cnpm –registry=https://registry.npm.taobao.org(安装淘宝镜像,cnpm代替npm,不然可能后面会出错)。

第五步:全局安装live-server(这就要用到node.js)。在命令行输入cnpm install -g live-server

第六步:启动本地服务。在命令行输入live-server。浏览器就会自动打开跳转页面,如果没有自动跳转,就在浏览器输入localhost,再按回车。
如何用sublime编写有本地服务的vue程序——给小白

第七步:下载Vue.js。我存储Vue.js的github库

第八步:在文件夹newVue中新建assets文件夹,将下载的Vue.js文件放在assets文件下。

第九步:开始第一个Vue的编程。在文件newVue中新建example文件,在example中写一个helloworld.html文件。
如何用sublime编写有本地服务的vue程序——给小白

第十步:在文件newVue下创建index.html文件(一定要取名为index.html,原因我这就不多说了)。
如何用sublime编写有本地服务的vue程序——给小白

第十一步:写的文件保存。
如何用sublime编写有本地服务的vue程序——给小白

sublime编写程序保存,浏览器会马上自动更新显示index.html页面,还有可以明显看到地址不再是文件路径了。证明是启动了本地服务的程序了!看到这还不赶快开始自己的Vue2.0之旅~~~


如果有不懂的地方可以随时留言哦!如果有错误的地方也希望指出,以免误导了大家!