使用脚手架新建Vue项目

安装淘宝镜像：

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

安装vue脚手架：

cnpm install vue-cli -g      

安装后输入 vue list 用于检测是否安装成功
新建项目:

vue init webpack "你的工程名"       

之后会让你选这一些配置，一般直接按回车选着默认，最后单元测试和e2e测试可以不选择

到此，vue项目新建完成
安装element-ui：

cnpm install element-ui -S

安装好element-ui后，即可进行使用：在main.js文件中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) // 全局使用ElementUI

随后即可在组件中使用element-ui库，如下在helloWorld.vue中写入：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

运行及如果如下：

其他一些常用的安装命令：
安装axios:cnpm install axios
安装 vuex:cnpm install vuex --save
使用淘宝镜像安装项目依赖：npm install --registry=https://registry.npm.taobao.org
安装echarts:npm install echarts --save

熟悉WebStorm编辑器的使用

WebStorm一些常用快捷键和用法

剪切当前行或所选代码到剪切板： ctrl + X
删除光标所在位置行： ctrl + Y
复制当前行或所选代码块： ctrl + D
当前文件内快速查找代码： ctrl + F
从多个文件查找,可以自定义查找范围 ctrl+shift+F
打开控制台： alt + F12
选中下一个同样的词： alt + J
选中所有同样的词： shift + ctrl + alt + J
跳转到函数定义的地方： ctrl + B
文件重命名：点击需要重命名的文件夹 shift+F6

按住alt点击不同位置，可以同时修改不同位置的内容
按住滚轮往下拖可以修改多行中相同位置的内容

在代码编辑窗口的左半部分，右击鼠标，出现以下几个选项,我们把Soft-Wrap选中打勾，这样代码就会根据窗口的宽度进行自动换行了。

清空控制台：右键单击并选择Clear buffer或仅在控制台聚焦时按Ctrl+ K

show history”选项，来查看文件的历史版本及相应改动。绿色背景的代码是新添加的，蓝色背景的是有改动的部分。

WebStorm中项目启动：在tools下的run npm 进行项目相关配置，配置后即可一键启动项目

webStorm中一个窗口启动多个项目，打开多个终端方法，选中项目文件，右键->open in terminal

拉取代码当发生冲突时，从此处VCS -> Git -> Resolve conflicts打开解决冲突页面
左边是本地代码，中间是要合并的代码，右边是线上 冲突的代码，点击下面的箭头，选择要保留的代码

WebStorm ctrl+shift+F 快捷键，无法打开全局搜索

原因：按键冲突
ctrl+shift+F
搜狗输入法：简繁切换
WebStorm：全局搜索
解决方式：禁用搜狗输入法简繁切换功能快捷键或者修改该功能快捷键