Vue.js 开发环境搭建笔记

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/

发表评论

电子邮件地址不会被公开。 必填项已用*标注