Vue前端项目学习（一）——搭建环境

在开始之前，首先介绍一个Vue这个框架

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

而且由于研发团队中有国人，所以文档的中文版也比较易懂。

刚开始时通过CDN引入Vue打demo，但需要进行组件切换和自定义组件时，通过CDN引入就显得过于麻烦了，所以在上周对之前的demo进行了代码重构，引入了Vue-cli的框架，现在记录Vue-cli项目的搭建过程

1.安装Npm

        直接从官网下载最新版即可，会和Node.js一起下载

        官网连接：https://www.npmjs.com/

2.安装淘宝镜像

        因为很多包是国外的，所以安装淘宝镜像后下载速度会快些，也能解决一些包无法下载的情况。

        在命令行输入：

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

3.安装Vue-cli

        在命令行输入：

        npm install -g vue-cli

4.创建初始化项目

        因为Vue-cli包含了Webpack，所以可在命令行直接输入：

        vue init webpack project-name

        project-name是项目的名字，自己决定

5.运行项目

        先进到项目的文件夹安装依赖，在命令行输入：

        npm install

        然后在命令行输入：

        npm run dev

        一般会直接在浏览器弹出网页，如果没有弹出，按命令行的域名访问即可

6.安装其他库

        例如要安装Vue router 或者 iview的话，在命令行输入：

        npm install vue-router iview --save

7.项目打包

        在命令行输入：

        npm run build