21、vue-cli脚手架基础

根据业务需求或者功能需求，把需要配置的webpack以及一些每一次都要做的事情进行封装，

以后根据脚手架安装，就可以快速把这些东西处理好

定义

（研发脚手架需要把Node学好/Npm包管理学好）

脚手架一般都是基于命令操作的

vue-cli 就是一个脚手架

脚手架

项目中需要基于工程化开发来管理vue项目

<template></template> => _vNode 把template语法基于vue-template-loader 解析成 虚拟DOM

基于 vue-cli 打造vue工程化

vue 工程化

https://cli.vuejs.org/zh/guide/

官网

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

1、在全局下： $ npm install @vue/cli -g

mac 全局安装 必须在前面加 sudo

$ vue --version 查看当前版本号

$ npm root -g 查看全局安装目录

扩展

安装

可以是中杠

名称遵循 npm 包命名规则

项目名称不能是中文、大写字母、特殊字符；

1、$ vue create （项目名字）

手动安装：步骤1

出现该窗口，一般我们选择默认（上下键切换选项，enter键开始安装）

手动安装：步骤3

手动安装：步骤2

手动安装：步骤5

手动安装：步骤4

手动安装：步骤7

手动安装：步骤6

手动安装详解

创建项目

vue-cli

21.1单独模块

文件目录

$npm run serve

执行命令

成功展示

不成功可能是因为丢包，重新跑下环境或许就好了

配置完成预览页面

vue-cli 脚手架基础

21.2单独模块