Vue的项目搭建工具vue-cli（项目的脚手架）

vue-cli是什么?

• 为单页面应用快速搭建 (SPA) 繁杂的脚手架

能够解决什么问题?

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写你的应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需跳出。

如何使用?

官网
参考文档

• 使用vue-cli2.0版本搭建项目结构

  • 1.0 安装：npm install -g @vue/cli

    • 注意点：

      • 1.0 这里默认安装的3.0版本
      • 2.0 判断安装成功：vue --version/vue -V

  • 2.0 安装：npm install -g @vue/cli-init

    • 注意点：

      • 1.0 如果是3.0版本这个可以完全不用安装
      • 2.0 由于我们要使用2.0版本的生成方式，所以需要下载这个

  • 3.0 生成项目结构

    • vue init webpack 项目名
      • Project name：项目名
      • Project description: 项目描述
      • Author: 作者
      • Vue build：
        • 第一种：配合大部分的开发人员
        • 第二种：仅仅中有runtime
      • Install vue-router? 是否安装vue-router
      • Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
      • Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
        • Standard: 标准规范
        • Airbnb: 爱彼迎规范
      • Set up unit test: 设置单元测试
      • Setup e2e tests： 设置端对端测试
      • Should we run 'npm install':要不要帮忙你下载这个项目需要的!
        第三方包
        • 使用npm来下载
        • 使用yarn来下载

项目结构介绍

安装好的vue-cli项目结构.png

目录、文件的介绍说明:

├── build               webpack打包相关配置文件目录
├── config              webpack打包相关配置文件目录
├── node_modules         第三方包
├── src                 项目源码(主战场)
│   ├── assets           存储静态资源，例如 css、img、fonts
│   ├── components       存储所有公共组件
│   ├── router           路由
│   ├── App.vue          单页面应用程序的根组件
│   └── main.js          程序入口，负责把根组件替换到根节点
├── static              可以放一些静态资源
│   └── .gitkeep         git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc             配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig        给编辑器看的
├── .eslintignore         给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js         给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore           给git使用的，用来配置忽略上传的文件
├── index.html           单页面应用程序的单页
├── package.json         项目说明，用来保存依赖项等信息
├── package-lock.json     锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js         给postcss用的，postcss类似于 less、sass 预处理器
└── README.md            项目说明文档