美文网首页
【vue】vue-cli脚手架、webpack打包工具安装。

【vue】vue-cli脚手架、webpack打包工具安装。

作者: 老夫当年也是神一般的少年 | 来源:发表于2017-07-07 10:23 被阅读0次

    最近打算做一个基于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配置完成。

    相关文章

      网友评论

          本文标题:【vue】vue-cli脚手架、webpack打包工具安装。

          本文链接:https://www.haomeiwen.com/subject/rddlhxtx.html