近年来,Vue.js越来越火,原因是它集各家之所长,比说说:它集React和Angular的优点,更关键的是Vue.js本身就是由中国开发者开发的一款前端框架,所有很多中国朋友们看起来不会那么费力。俗话说:“要想富,先修路。”,那么想学习Vue.js首先就必须安装好Vue.js开发环境以及了解一下Vue项目运行机制是如何,话不多跟着我一起来跟Vue.js说:“Hello Vue.js”。
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。由于Vue.js的命令行式安装是基于node.js的所有说首先你要安装一下node.js而且如果你的电脑是Windows版本的还有安装一下git,这两个东西可以直接在1百度搜索,如何直接点击运行安装即可,非常简单在此就不赘述。
1.安装淘宝镜像NPM
由于npm的服务器在国外,所有国内用于在安装Vue.js时使用npm命令会比较慢,在此推荐使用国内的淘宝镜像NPM,之后我们便可以使用cnpm代替npm极大地加快安装速度。淘宝镜像地址:(https://npm.taobao.org/) 直接在命令行中执行如下命令即可安装淘宝镜像NPM:
npm install -g cnpm –registry=https://registry.npm.taobao.org
- 安装Vue.js “脚手架”
Vue.js “脚手架”类似于做房子时搭的框架,所以得首先安装它。在命令行中执行以下命令:npm install –global vue-cli(或者使用cnpm安装:cnpm install –global vue-cli)在此推荐使用cnpm安装,使用npm安装太慢了。 - 创建一个基于 webpack 模板的新项目
在命令行下切换到你的workspace,然后新建一个基于webpack模板的项目,执行以下命令:
vue init webpack my-project(项目名称),之后它会提示你输入项目的一些消息,依次是项目名称,描述,作者名称等。相信大家这个应该问题不大。
4.安装依赖,走你
使用cd命令切换到workspace中后,使用cnpm install命令安装项目所需要的包依赖,执行如下命令:npm install。
5.执行.Vue文件
因为在package.json文件中的dev属性中就指明了.Vue文件的路径,所有执行命令:npm run dev就可以执行.Vue文件的Vue程序。
“工欲善其事,必先利其器”,让我们开始一步一步走进Vue.js吧!