《Vue应用开发》课件——2.1单文件组件的使用方法.pptxVIP

任务2.1单文件组件的使用方法

步骤1打开命令提示符，切换到D:\vue\chapter02目录，在该目录下执行如下命令，创建项目。步骤3步骤4步骤2步骤5演示单文件组件的使用方法yarncreatevitevue-demo--templatevue项目创建完成后，执行如下命令进入项目目录，启动项目。cdvue-demoyarnyarndev项目启动后，可以使用URL地址:5173/进行访问。2.1单文件组件

演示单文件组件的使用方法步骤1步骤3步骤4步骤2步骤5使用VSCode编辑器打开D:\vue\chapter02\vue-demo目录。2.1单文件组件

演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1将src\style.css文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。2.1单文件组件

演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1创建src\components\Demo.vue文件，该文件是Demo组件。2.1单文件组件

演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1修改src\main.js文件，切换页面中显示的组件。2.1单文件组件

保存上述代码后，在浏览器中访问:5173/，Demo组件的页面效果如下图所示。2.1单文件组件