一、Vue-cli介绍

Vue-cli是一个基于 Vue.js 进行快速开发的完整系统，主要的功能有

• 交互式的项目脚手架
• 丰富的官方插件集合，集成了前端生态中最好的工具
• 图形化的创建和管理 Vue.js 项目的用户界面

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

Vue-cli官方文档

二、Vue-cli使用

1. 安装相关依赖

npm install -g @vue/cli

2. 在cmd中执行以下命令，来创建一个名字是hello-world的项目

vue create hello-world

创建项目

3.选择default则为默认配置、Manually select features 为手动配置,我们选择手动配置

手动配置

4. 如上图所示，我们可以选择我们项目中需要使用的依赖,这里我们可以选择常用的

• Babel
• Router

• Vuex

  
  选择对应依赖

5. 选择Vue-router模式为history模式

   
   Vue-router模式

6. 选择Babel、PostCSS、ES配置为单独的文件

   
   配置文件

7. 最后看你是否保存这次的模板配置，方便以后重新创建模板时可以直接使用这次的配置

   
   保存模板配置

8. 可以看到在hello-world这个文件夹中已经出现了Vue项目的基本框架和基础依赖

   
   基本框架
9. 我们可以用如下两条命令来启动和编译这个项目

npm run serve // 本地启动
npm run build // 项目编译

10. 项目结构说明

名称	说明
public	公共资源路径
src	源码目录
src/assets	静态资源目录
src/components	Vue组件目录
src/views	Vue页面目录
src/main.js	项目入口
src/router.js	Vue-router配置文件
src/store.js	Vue-store配置文件