vue自带一个项目构建工具，叫vue-cli，它核心是通过一个叫loader的东西识别一些东西和打包一些模块，是基于webpack的模块加载器，而webpack又基于nodejs。
目录的构建类型主要用到的是webpack和webpack-simple，通过安装全局(cnpm install webpack -g)和指定根目录安装webpack(cnpm install webpack --save-dev)，装webpack环境(cnpm install webpack-dev-server --save-dev)，装脚手架(cnpm install vue-cli -g)，最后生成的项目类型( 如vue init webpack-simple 项目名)
最后重要的2步
安装依赖包( cnpm install ) 等待时间
项目跑起来( npm run dev )
通过它，可以将.vue文件里的东西组件化和模块化管理，.vue文件是由<template/>、<script/>和<style/>三大块组成，成为一个独立的模块。通过入口文件main.js将项目其他的模块的引进来(js文件,vue组件甚至是css)，最后直接打包出去，而引进的方法主要是通过es6的模块化进行引入和导出的（推荐），也可以用commonjs或requie.js的语法引进。这样的模式跟路由配合更加好管理，不必在一个js文件写大量的html模板，而直接建立一个又一个的.vue文件，里面的<template/>直接放html，用到时就import进去
其中,webpack.config.js和package.json这2个配置文件起到关键作用，在webpack.config.js一边配置一边打命令行，生成的东西直接在package.json里可以看到，也可以在里面修改端口和其他信息，通过这样的一系列的流程，可以学习到
前端的自动化、模块化、工程化、组件化
es6最常用到的一些新语法
本地服务器的临时搭建技巧
sass编译现成的css，节省更多的精力
webpack的打包流程和原理
了解nodejs相关的命令和环境
当然大前提是要本地电脑安装nodejs环境，否则以上说法皆不成立！
就先笼统地扯了那么多，详尽的打包细节还得看http://www.imooc.com/learn/802（慕课新推出的教程）
更新待续……
网友评论