vue.js学习总结一：安装和使用vue Cli脚手架

如果您是开始学习vue.js，是不推荐使用使用vue Cli的，尤其是在不熟悉基于node.js的构建工具时，您可以在html中使用CDN的方式引用Vue。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

一、搭建node环境

下载地址：http://nodejs.cn/download/
进入上面的网页，下载对应的版本，按照提示点击“下一步”即可。

在终端输入命令查看node 和 npm是否正常：

node -v

npm -v

若出现相应的版本号，这证明能正常使用。

二、安装vue cli

在终端输入命令：

npm install -g @vue/cli

或者也可以通过yarn 安装

yarn global add @vue/cli

查看是否安装成功：

vue --version

出现@vue/cli 及其相关版本则表示安装成功。

因为npm下载有时候会比较慢，因此我们可以配置cnpm。cnpm是淘宝NPM镜像，是一个完整的npmjs.org镜像，用cnpm可以快速下载我们需要的插件。安装命令：

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

查看cnpm是否安装成功：

cnpm --version

三、搭建项目

1、通过命令搭建项目

在终端进入我们将要创建项目的文件目录，输入命令：

vue create vueProjectName

注意：vueProjectName为项目名称


此处为了做演示，就是选择babel ，大家可根据自己的项目需求引入其他的features。通过空格键选择。


等待初始化完成后，我们到文件夹中看看
启动项目。首先在终端中进入刚才初始化的目录，然后输入命令：

npm run serve

在浏览器中输入地址访问。

访问成功！

2、通过vue ui 搭建项目

在终端输入命令：

vue ui

然后它会在浏览器中给我们打开一个页面

通过图形化界面来搭建项目和管理项目，非常的方便。这里就不在做演示了。

大家可以选择适合自己的方式来搭建项目，本人比较偏向于通过命令的方式。