前端技术02vue环境搭建

课题Vue环境搭建第一节安装vue-cli第二节用vue-cli创建vue项目第三节用CDN的方式引入vue授课时间第一周教学目的通过本章的学习，使学生学会安装vue开发环境，会使用vue-cli创建项目。能够通过CDN的方式引入vue框架到项目中。教学重点Vue环境搭建。教学难点Vue-cli创建自定义配置项目。教学过程教学环节教学内容教学方法、手段及时间分配课前准备课前回顾导入新课讲授内容总结和课堂回顾及作业发布课前准备：点名，提交手机抢答问题：1.用自己的话说一说什么是MVVM设计模式？2.说一下你所了解的设计模式有哪些？3.我们为什么要使用设计模式？想要使用MVVM设计模式进行编程，需要先搭建环境，接下来进行环境搭建学习。第一节vue-cli一、安装Node.jsVue.js需要Node.js环境来运行，因此首先需要在电脑上安装Node.js。Node.js可以从官方网站(/)下载并安装。安装过程如下：1.下载和安装Node.js访问Node.js官网（https:

/），下载适合你操作系统的安装包。运行安装包，按照提示进行安装。通常，选择默认安装路径即可。安装过程中，确保选中“添加到PATH”选项，这样可以将Node.js和npm的路径自动添加到系统的环境变量中。2.创建必要的文件夹在Node.js的安装目录下，创建两个文件夹：node_global和node_cache。这些文件夹将用于存储全局安装的npm包和缓存。确保这些文件夹的路径被正确设置，以便npm能够找到它们。3.配置环境变量通过系统的环境变量设置，将Node.js的安装路径和刚才创建的node_global文件夹路径添加到PATH环境变量中。创建一个新的系统变量NODE_PATH，并将其值设置为Node.js安装目录下的node_global文件夹路径。4.验证安装和配置打开命令行工具（如cmd或PowerShell），输入node-v和npm-v来检查Node.js和npm是否正确安装。尝试运行一个简单的Node.js程序，例如创建一个包含console.log("Hello,World!")的JavaScript文件，并使用Node.js运行它，以确保一切工作正常。5.配置npm源（可选）为了加快npm包的下载速度，可以考虑切换到国内的npm镜像源，如淘宝的npm镜像（）。通过命令npmconfigsetregistry<镜像地址>来设置npm的镜像源。通过上述步骤，你应该能够成功安装并配置Node.js环境。如果在过程中遇到任何问题，可以参考官方文档或搜索具体的错误信息以获取帮助。检验方式：node–v命令查看node版本。二、安装vue-cliVueCLI是Vue.js的官方命令行工具，提供了快速创建和管理Vue项目的功能。使用npm（Node.js的包管理器）全局安装VueCLI：npminstall-g@vue/cli。第二节用vue-cli创建项目一、创建项目过程（一）使用VueCLI创建一个新的Vue项目：vuecreatemy-project。（二）按照提示选择或配置项目选项，例如预设配置、插件等。（三）进入项目目录：cdmy-project。（四）启动开发服务器：npmrunserve。界面如下：第三节用CDN的方式引入vue一、安装VisualStudioCode编辑器（一）VSCode是什么？VSCode是一款轻量级但功能强大的源代码编辑器，支持多种编程语言和插件扩展。在Vue开发中，VSCode可以提供语法高亮、代码补全、调试等功能。（二）安装VSCode访问VSCode官方网站(/)下载适用于您的操作系统的安装程序。根据提示完成安装过程。二、CDN方式引入vue<!--引入vue--><scriptsrc="/vue@3/dist/vue.global.js"></script><!--模板区{{}}双大括号模板语法--><divid="app">{{message}}</div><!--脚本区--><script>//引入vue中的方法createApp,refconst{createApp,ref}=Vue//创建vue实例对象createApp({//setup方法是调用组合式API的入口setup(){//定义message变量constmessage=ref('Hellovue!')return{//所有的变量和方法必须要返回message}}}).mount('#app')//将vue实例挂载到模板上</script>回顾理论与实际操作中的要点和重点内容。以组为单位查阅vue发展史，开发者信息，下次课分享。第一课时课前准备（3分钟）提问上次课内容（5分钟）导入（2分钟）课件讲解+实际操作（35分钟）第二课时实践（20分钟）课堂练习：学生仿照老师的操作自己创建vue项目。官网资源学习代码编写和读代码（20分钟）课堂练习：同学们完成代码的开发并理解每行代码的作用。总结及作业发布（5分钟）课堂小结作业课堂小结：通过本次课学习安装vue开发环境，