Vue全家桶(三)之cli3脚手架

🔥Vue全家桶🔥

Vue全家桶	地址
Vue全家桶(一)之基础指令🔥	https://blog.csdn.net/m0_55990909/article/details/123917809
Vue全家桶(一)之常用特性🔥	https://blog.csdn.net/m0_55990909/article/details/123917352
Vue全家桶(二)之组件化开发🔥	https://blog.csdn.net/m0_55990909/article/details/123957131
Vue全家桶(三)之cli3脚手架🔥	https://blog.csdn.net/m0_55990909/article/details/123956982
Vue全家桶(四)之ES6模块化与webpack打包🔥	https://blog.csdn.net/m0_55990909/article/details/124019983
Vue全家桶(五)之Vue-Router路由🔥	https://blog.csdn.net/m0_55990909/article/details/123994048
Vue全家桶(六)之VueX状态管理🔥	https://blog.csdn.net/m0_55990909/article/details/124017667
Vue接口调用（一）fetch用法	https://blog.csdn.net/m0_55990909/article/details/123957200
Vue接口调用（二）axios用法🔥	https://blog.csdn.net/m0_55990909/article/details/123981283
Vue接口调用（三）async/await用法🔥	https://blog.csdn.net/m0_55990909/article/details/123981292

🔥Vue-cli3脚手架🔥

Vue脚手架	地址
🔥Vue-cli3脚手架	https://blog.csdn.net/m0_55990909/article/details/123956982
🔥Element-UI 的基本使用	https://blog.csdn.net/m0_55990909/article/details/123957041

✍目录总览：

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.项目启动