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 文件,内容为
安装webpack npm install webpack --save-dev 这里检查webpack -h 命令是不是可用,如果不可用请把文件路径node_modules\.bin放环境变量的 path中去,webpack如果安装错误就比较麻烦了,我从新安装node额
2.扩展chrome插件
打开chrome浏览器,打开设置>点击或者程序>点击开发者模式
再点击加载已解压的扩展程序,然后把shell>chrome文件夹放入
注意:这里可能会报错-->chorome dev无法加载背景脚本JS的解决办法是由于前面cnpm run build 打包未成功
最后打开个vue写的项目,f12打开调试工具即可进行vue项目的调试。