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就可以了
再跑一下命令
~