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

来源:互联网 发布:apache教程 编辑:程序博客网 时间:2024/05/19 23:15

周围的朋友一直都在说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。

  1. 安装nodejs;node的安装去node官网下载你所需要的,一路next即可。
  2. 为了快速安装vue-cli,可以先安装淘宝镜像cnpm:npm install -g cnpm –registry=https://registry.npm.taobao.org
  3. 全局安装vue-cli:cnpm install -g vue-cli
    结果展示:这里写图片描述
    通过vue list可以列出来vue-cli安装了哪些模板
    这里写图片描述
    环境搭建完成之后,就是构建我们的vue项目

vue-cli构建vue项目

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

  1. 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并没有对它们做相应的配置,可以点击这里查看

原创粉丝点击