Vue-cli3脚手架 (使用图解)

✍目录总览：

1. Vue 脚手架的基本用法

• Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/
• Vue-cli 3 与 2 版本有很大区别:

  • vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

  • vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

  • vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

  • 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

使用步骤：

1.安装 3.x 版本的 Vue 脚手架：

npm install -g @vue/cli

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

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

2. Vue 脚手架生成的项目结构分析

3.运行项目

使用 Vue CLI3 初始化项目之后，运行项目。只需要看 package.json 下的 scripts 就知道运行命令。

4 .Vue 脚手架的自定义配置

• 方式一：自定义配置 vue.config.js

• 方式二：启动图形化界面 Vue ui进行配置

5.通过Vue可视化ui界面进行项目创建

1.通过命令行启动可视化ui界面

2.在可视化界面点击创建进行项目的初始化

3.输入项目名称和git初始提交信息

4.选择配置，可以使用默认，也可以根据自己需求配

5.手动配置面板中，需要把（Bable工具链、Router路由、Linter代码规范、使用配置文件）这几项勾选

6.选择标准版本的Linter

7.最后在项目管理器查看创建结果

8.项目启动