1 配置 Webstorm
1.1 解决vue文件v字图标显示问题:
安装 GitHub – ChrisRM/material-theme-jetbrains: JetBrains theme of Material Theme 这个主题 注意不要安装 vue-for-idea那个插件 功能不全用起来不爽
1.2 解决vue文件代码高亮:
设置 – Editor – File types – HTML ,添加*.vue
1.3 解决webstorm不能识别es6的问题:
设置 – Language&Frameworks – Javascript, 右侧选择version为ES6
1.4 解决sass,less等异构语言显示报错问题:
在样式标签里面写上对应的异构语言,webstorm根据rel属性区分的,如
<style lang="scss" rel="stylesheet/scss"> // 这里面就可以写sass了 </style> <style lang="less" rel="stylesheet/less"> // 这里面就可以写less了 </style>
1.5 解决写模板的时候没有vue指令智能提示:
设置 – Inspections – HTML – Unknown HTML tags,添加customs:
v-text v-html v-once v-if v-show v-else v-for v-on v-bind v-model v-ref v-el v-pre v-cloak v-on:click v-on:keyup.enter v-on:keyup @click @change number debounce transition :is
1.6 关闭webstorm保存缓存,使nodejs的dev服务器实时预览生效:
设置 – Appearance&Behavior – System Settings, 取消勾选 Use “safe write”
2 安装开发环境
2.1 安装nodejs
官网下载即可
2.2 安装vue-cli
npm install -g vue-cli
2.3 使用vue的webpack模板新建项目
vue init webpack hello-vue cd hello-vue npm install npm run dev # ready to go!
3 其他配置
3.1 配置后端转发
需要在npm的node dev server里访问后端数据的时候可以配置转发,在config的index.js中proxyTable里进行配置:
{'/ajax/': 'http://a.com/'}
如此配置时,ajax的访问会自动转发至a.com/ajax
参考
https://www.zhihu.com/question/20936155/answer/111454501
http://vue-loader.vuejs.org/