史上最全搭建vue脚手架（vue-cli）到开发流程

1、vue脚手架基本用法：
vue脚手架用于快速生成Vue项目基础架构，其官方网址为：https://cli.vuejs.org/zh/
2、使用步骤

2.1安装3.x版本的vue脚手架

win + R 输入cmd打开Windows终端，执行以下命令

npm install -g @vue/cli

终端命令执行完成之后，通过以下命令检查vue脚手架（vue/cli）是否安装完成以及查看版本号

vue -V

2.2基于3.x版本的脚手架创建vue项目

//1、基于交互式命令行的方式，创建新版vue项目
vue create my-project   //my-project为项目名，可随便起
//2、基于图形化界面的方式，创建新版vue项目
vue ui
//3、基于2.x的旧模板，创建旧版vue项目
npm install -g @vue/cli-init
vue init webpack my-project

a）基于交互式命令行的方式，创建新版vue项目

vue create my-project

1. 出现以下交互式问答面板，询问我们安装哪些功能，可以上下箭头选择通过默认方式创建项目还是手动选择某些功能创建项目，在此选择手动选择某些功能创建项目，上下箭头选择到第二项：Manually select features，后按enter键
   

2. 出现以下交互面板选择项目需要安装哪些功能包，通过上下箭头切换不同的选项，选中某一项单击空格就可以选中某一项（对应的包前面打*号，代表选中的这一项要安装，没有被选中的表示不安装），选中好之后按enter键
   
   让我们选中版本，在这里我们选中3.x，按enter键，进入下一步

3. 提示我们是否安装历史模式的路由，我们选择n，安装哈希模式的路由，之后按enter键进入下一步
   

4. 进入下一步，让我们选择ESLint的语法版本，ESLint是一个语法检查的包，我在此选择了ESLint + Standard
   config标准模式，选择之后点击enter回车进入下一步
   

5. 选择什么时候进行ESLint语法校验，选择Lint on save，按enter进入下一步
   

6. 询问我们Babel, ESLint等工具的配置文件如何创建，有两种方式，一种每个工具包创建单独的配置文件，一种是将这些工具的配置文件都放置在package.json文件，在此选择第一项放置在单独的配置文件中，保证package.json配置文件结构清晰，防止混乱。
   

7. 询问我们是否将刚刚配置的信息保存为一个模板，供下次直接创建项目，可以选择y,也可以选择n，依个人需求而选，选中之后按enter进入安装界面
   

8. 此时进入到项目的创建过程中了，初始化项目的基本结构并且下载一些模板和项目包，等待下载完成
   

9. 当项目创建完成之后，可以查看项目情况

cd my-project //进入项目根目录
npm run serve //启动项目，等待项目启动

8. 选中对应的浏览器地址，复制地址，在浏览器中打开， 我选择的地址为：http://localhost:8080/，默认端口为8080，可以修改端口。在浏览器打开以上地址可以看到项目的页面效果
   

b）基于图形化界面的方式，创建新版vue项目

vue ui //在终端执行命令vue ui，打开一个浏览器面板

1. 在浏览器控制面板里面创建vue项目
   
2. 点击创建，创建项目，可以选择项目的保存路径，选择好路径之后点击在此创建新项目,项目名称输入合法的项目名称
   
3. 选择默认的配置还是进行手动配置，或者用已经保存的项目模板创建
   
4. 选择要安装的工具包
   
5. 选择ESLint的版本
   
6. 是否将之前的设置保存为一个预设，以供后期直接根据预设模板一键创建项目,点击确定等待项目创建
   
7. 项目创建成功以后默认进入项目仪表板，可以进行一些项目的设置，以及可以查看通过仪表盘创建的项目，也可以切换项目进行项目的管理，同时可以新增项目工具
8. 进入到任务栏，serve栏表示项目开发期间的打包和运行，build栏表示将项目打包成成品进行上线运行
9. 选中serve点击，运行就可以运行项目
   
10. 启动成功之后，点击启动app，可以进入到项目页面，点击停止可以停止项目
    

c）Vue脚手架生成的项目结构分析

my-project/src/App.vue是承载项目中所有组件的根组件，main.js为项目的打包入口文件，其他一些配置文件