Vue环境搭建和项目创建

        现在很多项目都用Vue进行开发，而elementUI是一套开源的基于Vue2.0的桌面端组件库，也就是说elementUI是一个基于Vue的ui框架，适用于PC端，能够快速生成较为美观和完整的页面，大大提高了前端开发的效率，该框架与Bootstrap框架相似度高。所以接下来的搭建过程是基于Vue2.0的。那本篇就来说说Vue环境搭建和项目创建的完整流程，下篇文章来说说关于如何使用elementUI来快速成型一个网页。

步骤一：下载node.js并安装

        首先node.js是什么呢？它是一个Javascript的运行环境，也就是说安装上了它，你编写的Javascript语言脚本无需在网页上被<script>引用才能执行。JavaScript程序可以在桌面、命令行终端、手机、平板电脑甚至嵌入式系统上运行，至于它的深层逻辑这里就不说了。进入官网下载页面。

         下载后，安装时无脑点下一步就行，如果要改路径，那就改路径。安装完成后修改环境变量（“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”-“系统变量”下选中“Path”点“编辑”-“新建”-将你node.js的安装路径复制在框框内点完成即可）

        那怎么知道安装成功没有呢？cmd里直接输入node -v，如果像下面出现版本号，就是安装成功！

步骤二：安装npm

        什么是npm？npm（“Node包管理器”）是用Javascript编写的node.js的默认程序包管理器，也就是说你可以通过npm下载别人写好的代码，下载到node_modules目录下你就可以随意使用，或者也可以提交自己的代码到npm的服务器供别人使用。由于npmjs.org的服务器在国外，国内开发者做项目的时候，很多“包”的下载速度极慢，在这种环境下阿里巴巴为了众多开发者的便捷便挺身而出推出了淘宝镜像（即cnpm），它把npm官方的“包”全部搬到国内，供广大开发者使用。

        命令行输入npm install –g cnpm –-registry=https://registry.npm.taobao.org

步骤三：安装vue-cli脚手架构建工具

        vue-cil是vue官方发布的开发vue项目的脚手架。它用于自动生成vue和webpack的项目模板，是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件、逐个引入的麻烦。

        命令行输入cnpm install -g @vue/cli

步骤四：创建基于webpack模板的vue项目

        命令行输入vue init webpack 项目名

        如果是首次创建需要配置全局设置，直接按照提示（蓝色字）输入命令就好

 步骤五：启动项目

        等它出现Project initialization finished就是项目初始化完成，项目创建完成，然后下面会出现两条命令（黄色字），分别输入这两行命令并执行即可。最后一行的网址就是你项目的主页面，直接浏览器打开就能看到。（命令窗口不要关闭！）