Vue学习笔记39--创建Vue脚手架(即使用脚手架创建项目) + 组件化编程流程

创建Vue脚手架

1.Vue脚手架是Vue官方提供的标准开发工具(开发平台)
2.脚手架最新版本4.x
3.文档：https://cli.vuejs.org/zh/

操作步骤：
第一步：(仅第一次执行--新环境执行，创建过项目的话，从第二步开始)：全局安装@vue/cli (command line interface)

查看镜像：npm config get registry

安装钱建议先设置镜像==》npm config set register https://registry.npm.taobao.org
npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后，关闭命令行，重新输入vue可执行vue指令，如下图所示：

 第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create my-project
# OR
vue ui

注意：

创建x项目时出现如下错误： ERROR  Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker

解决方案：

更改如下配置(可能需重启PC--我的没有重启)：

{

  "useTaobaoRegistry": true

}

选择Vue版本 回车即可创建脚手架。

注：需使用命令进入创建的项目路径，再执行npm run serve或关闭命令行后进入项目文件夹cmd打开命令行,执行npm run serve(即：第三步)

第三步：启动项目
npm run serve

注意：
1.如出现下载缓慢请配置npm淘宝镜像(win+r cmd 命令行执行) npm config set register https://registry.npm.taobao.org
2.Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：vue inspect>output.js

运行效果如下所示：

组件化编码流程(通用)：

1. 实现静态组件：抽取组件，使用组件实现静态页面效果
2. 展示动态数据：
   • 数据的类型、名称是什么？
   • 数据保存在那个组件？
3. 交互：从绑定事件监听开始