通过vue-cli脚手架初始化vue项目

vue-cli是一个很方便的vue项目构建工具，可以帮助我们快速生成一个完整结构的vue项目，相当于后端的Spring installizer。

1.生成vue项目

vue init webpack 项目名

2.接下来按照提示输入相应内容就可以了

$ vue init webpack kitty 　　-- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. 　　--这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty) 　　--项目名称
? Project name kitty
? Project description (kitty project) 　　--项目描述
? Project description kitty project
? Author Louis 　　-- 项目创建者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) 　　-- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n 　　--是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started: 　　-- 这里说明如何启动这个服务
cd kitty
npm install
npm run dev

3.项目构建完成后的项目结构图

vue项目结构

结构解析

vue项目各目录解析