从零开始学Vue----------vue.js环境的搭建

原创 zax 随笔 Vue.js 424阅读 2017-05-18 18:05:04 举报

其实这个看官方文档就好,但我还是在这里自己总结一下。
一般情况,只要按照官方文档一步一步来,是不会有什么问题的。

步骤1、首先要先搭建Node环境。
去官网下载一下然后安装就可以了,网址:http://nodejs.cn/ 点击最新的,然后根据自己计算机的系统下载相应的文件,然后下一步下一步安装就好了。

node.js下载界面

从零开始学Vue----------vue.js环境的搭建

从零开始学Vue----------vue.js环境的搭建

从零开始学Vue----------vue.js环境的搭建

步骤2、安装cnpm。
vue.js官网中是使用npm(NPM是JavaScript和世界上最大的软件注册表的软件包管理器。),但是由于种种原因(比如:npm是国外的,安装时间可能会很长甚至失败),我这里使用cnpm。
cnpm 是 淘宝 NPM 镜像,具体解释可登录官网进行查询。官网地址:https://npm.taobao.org/
打开命令行工具。输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 进行安装。(需要等待一段时间)

步骤3、搭建项目。
这一步,只要按照vue.js官网中使用命令行工具一点一点安装就可以了。只是将npm 改成cnpm。

全局安装 vue-cli

$ cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖,走你

$ cd my-project
$ cnpm install
$ cnpm run dev

我这里是新建了一个文件夹,然后在文件夹中打开命令提示符(在相应文件夹中按住shift+鼠标右键就有“在此处打开命令窗口”),依次输入
cnpm install --global vue-cli:这没什么好说的,静静的等待安装完成即可;
vue init webpack: 这里需要用户输入一些信息,比如项目名称,描述,作者等信息,这里能回车的就回车,能输入的就输入就可以了。

从零开始学Vue----------vue.js环境的搭建
cnpm install:这也没什么好说的,等待安装。。。。
cnpm run dev: 到这里就说明都安装完成了,可以正常启动了!!!起来后的界面就是下面这样嘀~~

从零开始学Vue----------vue.js环境的搭建

从零开始学Vue----------vue.js环境的搭建

从零开始学Vue----------vue.js环境的搭建

至此,我们就成功搭建了第一个vue项目

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复