Vue脚手架

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/[email protected]
    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. 创建项目

     1.打开cmd
     2.执行：vue create vue-proj_01
     

  2. 选择创建项目方式

     
     
     12.png
  • 这个界面是vue手脚架提供的项目初始化配置的界面（也就是交互式命令行界面）
  • 上下键选择，回车确定

  3. 选择安装的功能（初学者不建议选择 Linter / Formatter）

     
     
     13.png

4. 路由模式

   
   
   14.png

5. 选择配置文件

   
   
   15.png

6. 是否保存模板

   
   
   001.png

7. 创建项目

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的标签上