前端开发必须工具

1.官网下载 Sublime Text Build 3126 x64 Setup   

2.安装css js 提示插件Emmet

3.下载vue提示插件包，https://github.com/vuejs/vue-syntax-highlight   然后在sublime中引入包中创建Vue文件夹,把解压后文件内容拷入Vue,从启动

这里列举下常用标签

常用快捷键：

Ctrl + /  ---------------------注释
Ctrl + 滚动　--------------字体变大/缩小
Ctrl + N-------------------新建
Ctrl + Shift + P ------------------命令模式
Ctrl+Shift +k -----------删除一行
Alt + . ------------快速闭合标签
Ctrl + 回车 -----------添加一行空行
Ctrl + Shift + D ---------复制这行文本

接下来搭建nodejs简单服务器，这里不用nodejs做后台开发，只是用来开发前端同时来展示。

1.安装nodejs  

2.开发server.js启动文件，这里已经写好了，通用的哦

3.npm -g install supervisor   使用supervisor 监控js文件变更

注意：如果supervisor 报不是内部命令，请把安装的supervisor路径放path路径中

4.supervisor server.js  启动服务   这里静态页面更新，浏览器刷新就可以

然后安装vue调试神器  devtools 

1.GitHub下载地址：https://github.com/vuejs/vue-devtools

建议使用npm淘宝镜像按照依赖包 地址：http://npm.taobao.org/

命令行安装npm淘宝镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm按照依赖包了，npm安装依赖包确实太慢了.....

安装cnpm   cnpm install

下载完成后打开命令行cmd进入vue-devtools文件夹下chrome下面进行打包，按照依赖包并执行 cnpm run build

报错解决方案：'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件。原因：windows不支持NODE_ENV=development的设置方式

解决：安装cross-env:npm install cross-env --save-dev   在NODE_ENV=xxxxxxx前面添加cross-env就可以了,

然后安装webpack,安装流程

当前目录下创建package.json 文件，内容为

{

   "name" :  "demo" ,

   "version" :  "0.0.1" ,

   "dependencies" : {

     "webpack" :  "latest"

  },

   "devDependencies" : {

     "webpack" :  "^1.14.0"

  }

}

 进行安装淘宝镜像  npm config set registry https: //registry.npm.taobao.org   

安装webpack    npm install webpack --save-dev  这里检查webpack -h 命令是不是可用，如果不可用请把文件路径node_modules\.bin放环境变量的 path中去,webpack如果安装错误就比较麻烦了，我从新安装node额

打开shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true

2.扩展chrome插件

打开chrome浏览器，打开设置>点击或者程序>点击开发者模式

再点击加载已解压的扩展程序，然后把shell>chrome文件夹放入

注意：这里可能会报错-->chorome dev无法加载背景脚本JS的解决办法是由于前面cnpm run build 打包未成功

最后打开个vue写的项目，f12打开调试工具即可进行vue项目的调试。