最近打算做一个基于vue的仿外卖APP,前期需要做一些安装配置工作,所涵盖的技术栈有vue、vue-router、vue-resource、vue-cli、webpack、ES6与localstorage等等,现在先介绍vue-cli脚手架个webpack打包工具的安装。
vue-cli脚手架作用
目录结构、本地调试、代码部署、热加载、单元测试
另外webpack的作用:http://www.cnblogs.com/orlion/p/6532960.html
安装步骤:
(1)下载路径http://nodejs.cn/download/ ,下注意node的版本要,载完后可以选择安装在默认路径,占用空间不大(34M左右),然后配置环境变量;
(2) 打开CMD控制台,运行npm -v和 node -v检测nodejs和npm是否正常安装,如果正常安装可显示版本号,注意nodejs的版本必须在v4.0以上;
(3) 安装cnpm(npm下载vue-cli会很慢,cnpm大法好): npm install -g cnpm --registry=https://registry.npm.taobao.org,安装完成后可以运行cnpm -v查看是否安装成功,安装成功后显示cnpm的详细信息;
(4)安装webpack:cnpm install webpack -g;
(5)安装vue-cli:cnpm install vue-cli -g;
(6)新建一个项目目录并进入: cd 项目目录;
(7)在当前项目目录下构建项目:vue init webpack-simple projectName;
(8)在上一步的基础上回车,按提示输入项目名称、项目描述以及作者信息,如下图:
最后检查当前项目文件夹下是否有以下生成的文件:
至此,vue-cli和webpack配置完成。
网友评论