Vue2+Webpack创建vue项目

　　相比较AngularJS和ReactJS,VueJS一直以轻量级，易上手称道。MVVM的开发模式也使前端从原先的DOM中解放出来，我们在不需要在维护视图和数据的统一上花大量时间，只需要关注于data的变化，代码变得更加容易维护。理想状态下，我们能直接在前后端分离的新项目中使用Vue.js更为合适。这样能最大程度上发挥Vue.js的优势和特性，熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上，Vue.js压缩后只有18KB，而且没有其他的依赖。正是由于vueJS轻量、易上手，所以很多前端从事工作者都选择vueJS框架，使用vue创建项目需要搭建node环境，下面我将给大家介绍如何从搭建node环境到创建vue项目的整体步骤

node环境搭建

　　你可以在https://nodejs.org/en/ 官方网站下载安装包，然后进行安装。如果是 linux 或者 mac 命令行的用户，也可以使用命令行安装。

mac安装node

　　如果你没有安装 brew 包管理器，可以直接使用下面的命令安装：

　1 curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

　　如果你安装了 brew 包管理器，用下面的命令安装：

　　 brew install node

linux安装node

　　请参考官方网站的文档操作 命令行安装 nodejs

　　安装完成后再命令行输入node -v ，如果出现版本号则说明安装成功。

特别提醒：

　　windows环境下安装要配置环境node，不过也可以默认不改。具体怎么配置请参照我给我的连接地址 https://www.jianshu.com/p/03a76b2e7e00 学习 。到这里我已经默认你的node环境安装成功，并且环境配置都已经弄好，接下来就要使用vue闯将项目了，但是在创建项目之前需要安装vue的脚手架vue-cli,安装命令如下;

npm install vue-cli -g

说明;

　　npm是nodejs的官方包管理工具，安装如何项目所依赖的包文件都可以借助npm install 命令安装；

　　vue-cli是vue的脚手架，用于vue项目的创建；

　　-g是安装搭配全局目录，默认的全局目录在c盘，一般在安装node的时候都会配置node环境，修改node的全局目录

vue安装完成

　　在命令行输入 vue - v如果出现vue的版本号则说明vue已安装成功。在安装vue项目需要的脚手架之后我们就可以借助vue的脚手架vue-cli创建项目。

vue项目创建

　　1、创建一个项目文夹vue，在命令行敲击命令 cd vue

　　2、创建基于webpack模板的vue项目，命令如下：

　　  vue init webpack vue_demo

　　注意：

　　接下来命令行会出现一系列问题，你只需要一路回车就好，当然也要根据自己的具体情况惊醒修改，选择y/n；

　　3、敲击命令 cd vue_demo 文件夹

　　4、在命令行一依次输入以下命令：

npm install 

npm run dev

　　5、在浏览器中输入localhost:8080就会出现如下界面。到这里，基于vue框架的项目已经建立完成，接下来只需要在组件中编写自己的代码就ok；