Vue-cli脚手架基础

1. 简介

vue-cli是一个vue脚手架,可以快速构造项目结构
vue-cli本身集成了多种项目模板:
simple 很少简单
webpack 包含ESLint代码规范检查和unit单元测试等
webpack-simple 没有代码规范检查和单元测试
browserify 使用的也比较多
browserify-simple

2. 示例,步骤:

2.1 安装vue-cli,配置vue命令环境
cnpm install vue-cli -g
vue 
vue --version
vue list  列出可用模板
2.2 初始化项目,生成项目模板

语法:vue init 模板名 项目名

vue init webpack-simple  vue-cli-demo
2.3 进入生成的项目目录,安装模块包
cd vue-cli-demo
cnpm install
2.4 运行
npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格 官网

问题Bug:如果版本升级到node 8.0 和 npm 5.0,控制台会报错:
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING
解决方法:
a)降低Node版本到7.9或以下
b)修改build/dev-server.js文件,如下:

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
      log: () => {},
      heartbeat:2000 //添加此行
})

参考:https://github.com/vuejs-templates/webpack/issues/731

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值