Vue2.0 新手安装攻略

Vue2.0 新手安装完全攻略

先说下作者

---

作者是国内大神尤雨溪! 膜拜！ 好了，扯回正题，开车！

---

有两种方法供学习安装

1.独立版本安装

---

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

这个比较简单， 可以去vue.js 官网下载：点击进入官网

---

2.NPM安装

---

首先安装NPM，可以通过安装node.js 得到NPM 包管理器，我就是通过这种方法！安装之后找到它：

---

打开它 验证一下版本， 输入 node -v 和 npm -v （-前面有空格，不能少）出现这样的画面就表示成功了：

---

好了，最基本的已准备好！别关闭，后面还要用到！！

---

安装淘宝镜像

---

输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。这个其实看个人爱好吧，因为npm在国内下载速度是很慢，所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

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

安装完成之后 输入 cnpm -v 检测，如出现版本号表示安装完成！这里就不截图了！

---

安装全局vue-cli脚手架、webpack打包工具

命令输入：

1.cnpm install -g vue-cli //安装全局vue-cli

2.cnpm install -g webpack //全局安装webpack

3.cnpm install -g webpack-dev-server //安装webpack的本地webserver

安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue -V 和 webpack -v 等等就可以查看安装成功与否。

---

下面开始新建vue.js项目

---

先插播一下项目盘符的问题：应该在你知道的盘符中新建项目，本人之前就踩过坑，什么都弄好了，最后却找不到自己创建的文件夹在哪！！

可以在当前系统盘下直接新建，也可以切换盘符，然后在当前的磁盘里新建文件项目; 建议切换盘符。顺便说一下切换盘符方法：

比如F盘,输入 F: 即可，此时会进入F 盘

---

然后可以手动在F盘自己新建个文件夹，在此文件夹里新建项目。也可以不新建，后面会自动建立一个文件夹！ 这里以新建为例：

手动新建一个文件名字叫做 myvue ,然后 输入 cd myvue ，进入此文件夹！

好了盘符找好了， myvue 是一个F中的一个文件夹， 之后会在这里面新建一个叫 my-project2 的文件夹， 名字可以自定义，这个才是真正的项目文件夹！

盘符就位 –> 下面继续！

---

首先 创建一个基于 webpack 模板的新项目，在F：\myvue> 这个盘符中输入：

vue init webpack my-project2 //my-project2 是自己起的文件夹名字！

然后有几个需要手动操作的，注意一下即可：

此时 myvue 文件夹中多了一个子文件夹 my-project2 ,应该是这个样子的：

这个是 基于webpack 模板的！所以 继续输入 cd my-project2 进入这个文件夹！

---

然后安装项目依赖

有两种方式选择其一即可

1.国内镜像安装：

cnpm install

// 国内镜像cnpm安装,会导致后面缺了很多依赖库。但是 npm 服务器在国外所以这一步安装速度会很慢

// 学习的使用这些依赖的话应该够了吧！

2.官方仓库安装：

npm install

// 服务器在国外会很慢，自行选择吧！

启动项目

npm run dev

---

然后跳出一个界面：http://localhost:8080/，也可以打开一个新页面，手动输入网址。

OK，至此已经安装好了！

快打开试试吧！ NPM那个终端 别关哦，要不然你修改模板测试的时候会找不到页面的.

第一写博客，作为一个新手，我是自己一个人摸索来的，可能会有我没有注意的地方，希望大家指正，相互学习！