Vue.框架搭建以及Webstorm快速启动配置

一、Vue.js简介以及搭建前期准备工作

      Vue.js 是一套构建用户界面的渐进式框架，搭建前期首先系统需要安装Node.js，npm（Node.js打包工具），Git代码管理工具。Node.js与Git安装可以参考这篇博客Node.js启程之旅（一）之安装和检查，npm会跟随Node.js下载。
      我在安装过程中参考的是Vue.js官方安装文档与菜鸟教程Vue.js安装，还有慕课网vue.js入门基础课程。下面的框架搭建基于官方文档提供的命令行工具Vue CLI，命令行的命令参考菜鸟教程。

      Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档

二、npm更换淘宝镜像+Vue Devtools插件安装

      将npm更换淘宝镜像cnpm，下载速度会加快，命令行输入以下命令，安装成功后输入cnpm -v可以查看版本号。
      注意：此处用管理员身份打开Git Bash，再输入相应命令，不然可能会出现一些权限的错误。

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

$ cnpm -v

     在使用 Vue 时，推荐在浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。在这里介绍下Chrome下安装Vue Devtools以及使用。
     下载Chrome插件的github地址：https://github.com/vuejs/vue-devtools#vue-devtools

     插件下载安装成功后可以在右上角看见V的图标

     启动一个Vue.js应用，在Chrome浏览器下右键检查，最后一栏有Vue标签，点开即可在浏览器中对Vue元素进行查看与调试。

三、Vue.js框架搭建基于命令行工具

1.首先全局安装vue-cli

$ cnpm install -g vue-cli

2.创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

     这里需要进行一些配置，vue-router为路由配置，ESLint为一个代码规范检查工具，unit test为单元测试，e2e test也为一个测试，根据项目实际情况进行选择。

3.项目创建成功，根据提示启动项目

根据提示输入一下命令启动项目

cd my-project

npm run dev

项目启动成功后界面如下，根据提示输入地址即可查看

至此Vue.js框架搭建成功，下一步可以用Webstrom打开该项目查看目录

四、Webstorm快速启动Vue项目配置

     Webstorm为JetBrains公司下专注前端开发的IDE，具有强大的集成功能，首先将该项目打开，看一下项目目录，基本我们需要开发的目录即为src下的文件：APP.vue文件引入组件，components组件目录，以及index.js设置默认组件渲染文件。

     由于项目的启动命令为npm run dev，所以在Webstorm启动项目可以选择在终端输入命令，Webstorm调用终端可以使用快捷键：Alt+F12，或者在View菜单手动调用。

     终端启动成功界面如图所示

     配置快速启动会比命令行更加便捷，所以在右上角添加npm配置。

     配置完成后，点击绿色小三角即可启动项目。

     可以看到终端项目在启动，启动成功后单击终端的地址或者在浏览器输入地址即可查看。

好了，我终于写完了，真的好多的，希望有些用处，Bye~