【笔记Vue2.0】搭建vue-cli教程

vue-cli脚手架的搭建

我们学vue都是在官方文档中引用外部的CDN作为我们快速入门的一种方法，但是我们知道这不是一个权宜之计。我们需要更好的工具，提供一些预处理，热加载等等功能。通过学习，总结一下我们是如何搭建vue-cli脚手架。

• 安装必要的node.js

从node官方可以下载node，安装过程比较简单就一直下一步就OK了。安装成功时查有版本，说明node安装成功，我们所需的npm包管理是集成在node里面的，我们可以输入npm  -v 显示npm的版本

• 安装cnpm

npm包管理有了，我们需要npm的某些资源会被墙。所以我们用淘宝镜像cnpm来获取；有兴趣的可以进入淘宝cpm了解。也可以直接下载：

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

到目前为此我们的cnpm就安装好了

---

• Vue安装

$ cnpm install vue

---

• Vue-cli脚手架工具安装

全局安装

$ cnpm install --global vue-cli

---

• 使用Vue-cli初始化基于webpack模板的新项目

新建自己的项目，先把目录引导过去

这里的自定义项目名不可以用大写

#vue-music为自定义项目名,我这里定义一个vue-music项目
#两种方式，第一种正常，第二种简易项目
#根据需要选择
$ vue init webpack vue-music

$ vue init webpack-simple vue-music

之后可以默认选择回车，也跟可以根据自己的需求选择

这样就是安装ok了、

---

• 安装依赖包

记得进入项目目录、安装依赖

$ cnpm install

 

---

•  运行项目

$ npm run dev

我这里跳出一个错误

我们找到项目里的config里的index.html。把autoOpenBrowser改为 true就可以了

再跑一下命令

~