前端学习之——VUE 学习第一课——脚手架的搭建

最近终于不忙了，熬过了最难过的日子，前段时间被苦逼的说不出来话。。。。

其实VUE之前就学习了，只是。。。。你们懂得，学而不用，等于。。没学。。 特地来用我的博客基地来记录一下。

安装node.js

一、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
安装完成后，打开命令行工具输入命令node -v，如果出现对应版本号，就说明安装成功了。

二、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v

三、node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

四、

点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入：

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

安装的时候 可能会报错。。。大概意思是：我没有用管理员身份运行cmd运行管理。进入System32文件夹找到cmd.exe，右键用管理员身份运行就ok啦！ 

完成之后：输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。

五、vue安装

在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

$ cnpm install vue

六、安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ cnpm install --global vue-cli

七、

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

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

#my-project为自定义项目名
$ vue init webpack my-project

需要注意的是：项目名称不能出现大写，否则会提示报错的哦！

创建项目 ，这是俺的，可以参考，项目名，作者名 我擦掉了 哈哈

 

 ok 创建完成之后 会看到你的工作目录里有你的项目名 里面有

这些内容的时候，说明已经创建好了 。

八、安装项目所需依赖：需要cd到 项目文件夹下

 首先使用命令：

cnpm install

 安装成功。

 九、运行项目 执行：

cnpm run dev

成功后出现： 

将here之后的地址 复制到你的浏览器中， 能看到这个页面，说明 我们的脚手架已经搭建完成，下面，开始你的表演吧 哈哈！

原谅一个程序猿的语言组织能力，只能跟你们说，能看懂就行，看不懂的请留言哦！