安装vuejs全过程、淘宝镜像

小技巧：因为npm是国外的，因此使用淘宝镜像，把命令粘过来

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

我： 

之后用npm的地方就用cnpm替换

看cnpm装上了吗：  cnpm -v 或npm ls cnpm -g 

我：

安装完cli后再输入vue就能够看到vue自己变成了一个命令：

而后：在F盘的workplace文件夹，打包my-frist-vue-project

vue init webpack my-frist-vue-project

我：

此时，在当前文件夹（F:\workplace）下，多了个《my-frist-vue-project》

咱们进来看一下——在cmd里输入：cd my-frist-vue-project 再输ls就能够查看《my-frist-vue-project》里有哪些东西了：

咱们下载了这个项目也不能跑起来，由于咱们要先装它的依赖。依赖必须和package.json文件装在同一目录，因此先type package.json看一下当前目录有没有package.json文件。而后用npm install就能够安装全部依赖了：

我：

把依赖（npm install）安装在F:\workplace\my-frist-vue-project目录，依赖装好后多了个node_modules目录。

跑一下这个项目：命令npm run dev

此时，服务器就启动了，端口是：localhost:8080自动出来http://localhost:8080/的网页。网页效果：

这是vue的模板。这套脚手架工具就算搭建成功了。

 

接下来要作的就是在《my-first-vue-project》文件夹的《src》里进行具体的项目开发，其它的文件夹都不用关注。

 

《src》里的App.vue文件有热更新，在文件改了（本例to改为"to2"）以后保存，点webstrom的浏览器图标，发现网页会自动更新,这是脚手架工具所提供的一个功能。

 

 

 

经过webstorm中的File Types配置（Preferences > Editor >File types） 将.vue格式的文件注册为HTML文件类型(在HTML里加*.vue),这样html中的代码提示也会被用到.vue上；

不对，不能把*.vue放HTML里，由于VUE的*.vue就自动没了（用webstorm打开后缀vue文件时，因为VUE的*.vue没了，因此浏览器就变成下载.vue文件了）

 

sublime能够热更新 而webstorm不能热更新：解决：

webstorm保存的时候会先保存到旧时文件中，其实并无真正保存，要在setting->stystem settings下的“use save write”去掉，如图：