Vue-cli3脚手架 (使用图解)
2022-04-01 本文已影响0人
生命里那束光
✍目录总览:

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