基于webpack+Vue2.0搭建webapp(vue-cli原理)
2017-11-03 10:11
816 查看
前言
承接上篇:基于webpack+Vue2.0搭建webapp(体验篇)学Vue也有一段时间,利用vue-cli脚手架也动手做了个简单的示例。在不断的学习过程中发现其实学习vue并不难,难在如何构建一个工程化前端,从项目初始化、结构组织、开发、调试、编译、打包、测试、发布和版本管理等方面提高效率,今天我们就从项目初始化开始说起。
介绍
vue-cli提供了简单项目脚手架建立,如下命令安装:$ npm install -g vue-cli
安装之前要求先安装Node.js和Git。
安装完成后,即可运行命令:
$ vue init <template-name> <project-name>
<template-name>:模板名称,运行npm list会显示有什么模板可以选择;
<project-name>:需要命名的项目名称;
例如运行:
$ vue init webpack my-project
构建步骤
vue-cli中命令init最复杂,其它命令很简单,下面用图表示下vue init构建步骤: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,有兴趣的可以下载安装下。$ npm install -g web-app-cli
$ webapp init webpack-spa my-project
$ cd my-project
$ npm install
$ npm run dev
相关文章推荐
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用
- vue学习笔记(一)使用npm,webpack,vue-cli搭建vue项目
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- windows下vue-cli及webpack搭建安装环境
- 基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架
- vue2.0+vue-cli+webpack+vue-router中路由设定
- 详解用vue-cli来搭建vue项目和webpack
- webpack进阶——DllPlugin优化打包性能(基于vue-cli)
- vue-cli#2.0 webpack 配置分析
- vue-cli和webpack项目搭建
- vue-cli#2.0 webpack 配置分析
- 基于vue.js 2.0,不使用webpack,只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面