初探脚手架vue-cli
2018-03-28 本文已影响0人
派大曦
vue-cli是快速构建单页应用的脚手件,通过简单的命令行来搭建开发工程。ps:其中牵扯的内容有webpack,npm,nodejs等,orz新手劝退杀手
安装vue-cli
vue-cli是一个npm安装包,安装到node.js的全局运行目录下 ,即可在本机的任意目录下创建工程。
vue-cli的具体用法:
创建项目
一系列交互问题之后,开始初始化项目
vue-cli工程模板
主要学习webpack-simple和webpack(browserify也是从这两个模版的基础上移植的版本)。webpack-simple和webpack工程结构相似,但是这个两个版本暂时互相不兼容且依赖的版本不同。
webpack-simple
工程目录结构:
webpack-simple只配置了Babel和Vue的编辑器,src目录是存放Vue源代码的目录,5个模板构建出来的src目录都一样(webpack多了components目录用于存放公共组件)src目录的使用和文件命名很重要:
webpack
工程目录结构:
工程一下子复杂可很多(orz),但是这个模板结构非常合理,配置的工具也很丰富。
相比于webpack-simple多出了4个目录(dist目录做补充说明):