Vue3（撩课学院）笔记06-cli脚手架

1、cli工程化

使用vite构建vue项目

2、快速创建项目

npm方式（亲测可用）

npm init @vitejs/app 项目名
cd 项目名
npm install
npm run dev

• ps项目名不可以是驼峰
• 出现端口占用问题 throw er; // Unhandled ‘error’ event
  node 报错 throw er; // Unhandled ‘error’ event 解决办法

干掉端口号方法：
1.进入cmd命令窗口，写netstat -ano|findstr "8080"\
找到相关的进程号，如13512，然后杀掉这个进程
2.taskkill -PID 13512 -F

• Vite2.0项目运行报esbuild相关错误 errno: -4058（Error: spawn
  G:\final\tutor-system-front\node_modules\esbuild）
  Vite2.0项目运行报esbuild相关错误 errno: -4058（Error: spawn G:\final\tutor-system-front\node_modules\esbuild）

解决方法
手动执行 node node_modules/esbuild/install.js
然后 npm run dev

yarn方式(该方式没有成功)

yarn create @vitejs/app 项目名
cd 项目名
yarn
yarn dev

出现D:\Program’ 不是内部或外部命令，也不是可运行的程序错误的解决办法
yarn create @umijs/umi-app 报错 ‘D:\Program‘ 不是内部或外部命令，也不是可运行的程序；还有文件名、目录名或卷标语法不正确。

终端创建方式

3、cli是什么

command line interface命令行界面，俗称脚手架

4、目录结构

vue文件实际是一个组件集合文件
主要由三部分组成

• 1、组件结构（template标签对内容）
• 2、组件实例（script标签对内容）
• 3、组件样式（style标签对内容）

5、todolist案例（使用vue2语法）

vue3也兼容vue2

• 分解页面，形成多个组件的组合形式