5.1 介绍并安装3.x版本的vue脚手架
-
脚手架基本用法介绍
- Vue脚手架： 用于快速生成 Vue 项目基础架构
- 理解：Vue脚手架，就是用于快速创建Vue项目的工具
- 官网：https://cli.vuejs.org/zh/guide/
-
安装
-
安装最新版本的Vue脚手架
npm install -g @vue/cli 如果安装的时候没有指定版本，那就卸载再安装 先查询版本：vue -V，如果查看后发现版本为4.x.x npm uninstall -g @vue/cli@4.x.x npm uninstall -g @vue/cli -
检验安装成功
vue -V #如果能提示脚手架的版本，则说明安装成功，例如版本为 4.5.13
-
5.2 基于交互式命令行创建新版vue项目（重）
- 脚手架创建vue项目方式(不建议安装图形化界面）
# 1. 基于 交互式命令行 的方式，创建 新版vue项目
vue create my-project-vue
# 2. 基于 图形化界面 的方式，创建 新版vue项目
vue ui
# 3. 基于 2.x 的旧模板，创建 旧版 vue项目
npm install -g @vue/cli-init
vue init webpack my-project
重点掌握前两种，第三种是基于2.x创建旧版vue项目（图形化界面方式用的更多）
my-project为项目名称，项目名称不能出现中文
-
创建项目步骤
-
创建项目
1.打开cmd 2.执行：vue create vue-proj_01 -
选择创建项目方式
12.png
- 这个界面是vue手脚架提供的项目初始化配置的界面（也就是交互式命令行界面）
- 上下键选择，回车确定
-
选择安装的功能（初学者不建议选择 Linter / Formatter）
13.png
-
-
路由模式
14.png -
选择配置文件
15.png
-
是否保存模板
001.png
- 创建项目
20.png
- 启动项目
bbb.png
-
启动成功
b2.png
-
访问：(这个界面是vue脚手架默认提供的首页)
启动成功02.png
-
main.js中的代码（通过脚手架创建项目之后默认生成的代码）
Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')-
productionTip说明
productionTip.png
-
-
$mount('#app')
- 这个其实相当于
el:'#app' - mount挂载，将vue挂载到id为app的标签上
- 这个其实相当于
