安装Vue.Js提供的命令行工具初始化单页面应用

• 作者: Mr.Xiong
• 日期: 2018年2月2日
• 分类: Vue.Js
• Tags: Composer, Node.js, npm, Vue.js, 淘宝镜像
• 阅读量: 4,250

什么是单页面应用呢？拿当前博客首页来举例，我们每一次点击，页面不刷新，而是通过路由异步加载数据，然后分配给不同的组件，也通过路由来决定某些组件显示某些组件不显示。当我们想要构建出一个单页面应用时，Vue.Js 为我们提供了一个命令行工具。这里我们就来聊聊怎么安装这个命令行工具。

1.安装 Npm

Npm 是随同 Node.Js 一起安装的包管理工具，Node.Js 中含有 Npm ，包含关系。所以我们需要进入 Node.js 中文网 进行下载安装 Node.Js ，安装完毕之后，【 Windows 打开 Cmd 输入 npm -v 】、【 Mac 打开终端输入 npm -v 】 会发现 Npm 的版本号即表示安装成功。

2.更改为淘宝 Npm

和 Composer 同理，Npm 放在国外服务器上，大天朝访问自然慢，但是将它改为淘宝镜像，到国内的服务器上访问，速度自然杠杠的。更改方式第一步还是一样，Windows 打开 Cmd ，Mac 打开 终端，输入命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这里提醒一下 Mac 或者 Linux 的小伙伴们命令最开始加上 sudo ，不要问为什么。

3.安装 vue-cli

打开 Vue.Js 官网，点击右上角【生态系统】->【官方仓库】进行搜索 vue-cli ，并点开链接。而后在你的 PHPStorm 编辑器当中的 Terminal 中执行安装命令：

cnpm install -g vue-cli

这里注意两个问题。一是再次提醒 Mac 或者 Linux 的小伙伴们命令最开始加上 sudo ；二是因为我们更改为淘宝 Npm ，所以在命令最开始的 npm  改为了 cnpm ，这样安装更快。

4.初始化一个项目

依然在 Terminal 中执行命令：

vue init webpack cli

此条命令当中我们只安装 vue-router ，也就是提示问是否安装 vue-router ，我们给个 yes ，其他的 Js 语法检测、单元测试等等都不安装。另外，命令当中的 cli 为项目名称，跟着你喜欢的起名就行。

执行完成后，你的项目根目录会出现 cli 文件夹。接着执行以下命令：

cd cli

npm run dev

这两行命令表示进入 cli 目录当中，并运行开发者模式。注：运行开发者模式注意是否开启了 pupstudy 或者 mamp 等软件，及时关闭避免端口被占用。

运行成功如下图

5.开启 Vue.Js App

复制如上图链接，打开浏览器进行访问，开启你第一个 Vue.Js 的 App 应用。如需关闭 Ctrl + C 即可。

Finally，谢谢大家的阅读！祝每天开心~
版权声明：本文为博主原创文章，未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏