摘要:本文将带你了解WEBAPP开发之基于webpack+Vue2.0搭建webapp(vue-cli原理),希望本文对大家学WebApp有所帮助。
基于webpack+Vue2.0搭建webapp(体验篇)学Vue也有一段时间,利用vue-cli脚手架也动手做了个简单的示例。在不断的学习过程中发现其实学习vue并不难,难在如何构建一个工程化前端,从项目初始化、结构组织、开发、调试、编译、打包、测试、发布和版本管理等方面提高效率,今天我们就从项目初始化开始说起。介绍vue-cli提供了简单项目脚手架建立,如下命令安装:$npminstall-gvue-cli安装之前要求先安装Node.js和Git。安装完成后,即可运行命令:$vueinit<template-name><project-name><template-name>:模板名称,运行npmlist会显示有什么模板可以选择;<project-name>:需要命名的项目名称;例如运行:$vueinitwebpackmy-project构建步骤vue-cli中命令init最复杂,其它命令很简单,下面用图表示下vueinit构建步骤:
vue-init构建步骤
技术框架vue-cli涉及到的主要技术框架如下:1、node.js:整个脚手架工具的根本组成部分;2、commander:能够更好地组织和处理命令行的输入;3、download-git-repo:从git远程仓库下载文件;4、handlebars:语义模板库;5、metalsmith:静态页面构建,配合handlebars使用;构建自己的CLI根据vue-cli工作原理,并结合自己搭建的webpack目录结构规范,构建了公司的前端脚手架和前端模板webpack-spa,有兴趣的可以下载安装下。
$npminstall-gweb-app-cli
$webappinitwebpack-spamy-project
$cdmy-project
$npminstall
$npmrundev
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号