Vue学习之环境构建--------vue-cli构建vue项目

周围的朋友一直都在说vue的优点，之前一直在看angular，抱着好奇心学习了vue，想从最基础的地方记录我的vue。首先第一步离不开环境的搭建，那么就来记录我的vue环境搭建之路。

同作为前端的流行框架，vue免不了要与angularjs（现在升级到4.0版本，应该叫angular了）、react比较，那么vue的优点是什么呢？



vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。

vue-cli是快速构建这个单页应用的脚手架，也就是帮助我们写好vue.js基础代码的工具。

vue-cli的安装

vue-cli是node的包，所以需要node去安装它，故在此之前应该先安装node。

安装nodejs；node的安装去node官网下载你所需要的，一路next即可。

为了快速安装vue-cli,可以先安装淘宝镜像cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org

全局安装vue-cli：cnpm install -g vue-cli

结果展示：


通过vue list可以列出来vue-cli安装了哪些模板



环境搭建完成之后，就是构建我们的vue项目

vue-cli构建vue项目

因为不想在C盘构建项目，所以我的项目是建立在E盘中的vueProjects中，因此在命令行窗口中先切换盘符到E盘进入到vueProjects目录中再构建项目；构建项目具体步骤为

vue init webpack elema(采用webpack模板，项目名称为elema)

注意：此种方法构建的项目是vue2.x版本的，如果想构建vue1.x版本的话，最好这样写

vue init webpack#1.0 elema

具体可参考这里

如图：



2. cd elema（进入到创建的项目中）

3. npm install(安装项目的依赖)

4. npm run dev(启动项目)

如图：



在浏览器中输入localhost:8080就可以启动我们创建的项目啦



我们用webstorm打开我们的项目，项目目录结构如下：



如果发现我们的端口8080被占用了，可以查看端口占用问题解决办法

如果打开我们的项目文件，webstorm并不支持ES6语法已经vue的高亮提示，一定是webstorm并没有对它们做相应的配置，可以点击这里查看