Vue学习笔记04-Vue-CLI脚手架

Vue CLI 脚手架的安装及使用

1. 认识脚手架

• 什么是Vue脚手架?
  • 可以通过webpack 0到1 配置Vue开发环境，但是在真实开发中不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低;
• 所以在真实开发中，通常会使用脚手架来创建一个项目，Vue的项目使用的就是Vue的脚手架;
  • 脚手架其实是建筑工程中的一个概念，在软件工程中帮助搭建项目的工具称之为脚手架;
• Vue的脚手架就是Vue CLI:
  • CLI是 Command-Line Interface, 翻译为命令行界面;
  • 通过CLI选择项目的配置和创建出项目;
  • Vue CLI已经内置了webpack相关的配置，不需要从零来配置;

2. Vue CLI 安装和使用

• 安装Vue CLI

  • 进行全局安装，这样在任何时候都可以通过vue的命令来创建项目;

    npm install @vue/cli -g

• 升级Vue CLI:

  • 如果是比较旧的版本，可以通过下面的命令来升级

    npm update @vue/cli -g

• 通过Vue的命令来创建项目

  vue命令 说明 @vue/cli 内部的脚本是 vue

  vue create 项目的名称

• 查看 @vue/cli 内部源码

  /usr/local/lib/node_modules/@vue/cli/package.json

  "bin": {
    "vue": "bin/vue.js"
  }

3. vue create 项目的过程

# 选择预设
? Please pick a preset: (Use arrow keys)
# vue3 版本，并且默认选择babel，eslint
❯ Default ([Vue 3] babel, eslint) 
# vue2 版本，并且默认选择babel，eslint
  Default ([Vue 2] babel, eslint) 
# 手动选择希望获取到的特性  
  Manually select features 
  
 ? Please pick a preset: Manually select features
# 选择需要的特性
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to 
invert selection, and <enter> to proceed)
# 是否选择babel
❯◉ Babel
# 是否选择ts
 ◯ TypeScript
# 项目是否支持PWA
 ◯ Progressive Web App (PWA) Support
# 是否默认添加Router路由
 ◯ Router
# 是否默认添加Vuex状态管理
 ◯ Vuex
# Css预处理器
 ◯ CSS Pre-processors
# Eslint对代码进行格式化限制
 ◉ Linter / Formatter
# 单元测试
 ◯ Unit Testing
# E2E测试
 ◯ E2E Testing

# 选择vue版本
 Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x 
  
# 配置信息放在独立文件中
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json
  
# 是否保留设置版本  
Save this as a preset for future projects? (y/N) 

4. 项目的目录结构

# 模块依赖
|- node_modules
# 项目资源
|- public
	 |- favicon.ico
	 |- index.html
# 所有源代码
|- src
	 |- assets
	 |- components
	 |- App.vue
	 |- main.js
|- vue.config.js
# 设置目标兼容的浏览器类型
|- .browserslistrc
# 上传git时选择忽略的文件
|- .gitignore
# babel配置 - 兼容es5
|- babel.config.js
# 
|- jsconfig.json
# 项目管理文件
|- package-lock.json
|- package.json
# 使用说明
|- README.md

5. Vue CLI的运行原理