《Vue.js前端开发实战（慕课版第2版）》课件 第13、14章 Vue CLI、状态管理.ppt

**VueCLI02VueCLI的安装03创建项目04项目结构05编写一个单文件组件AI辅助编程06VueCLI简介01VueCLI简介包名的变化一个基于Vue.js进行快速开发的完整系统@vue/clivue-cliCLI服务CLI三个独立的部分CLI插件全局安装的npm包，提供了一些vue命令一个开发环境依赖，它是一个npm包，本地安装在@vue/cli创建的每个项目中向Vue项目提供可选功能的npm包npminstall-g@vue/cli命令vue--version查看版本号VueCLI的安装需要进行全局安装如果想安装@vue/cli的指定版本，可以在上述命令的最后添加“@”符号，在“@”符号后添加要安装的版本号。示例安装@vue/cli5.0.6版本。npminstall-g@vue/cli@5.0.6VueCLI需要计算机连接互联网才能安装成功。创建项目使用vuecreate命令使用图形界面vuecreatemyapp命令使用vuecreate命令vueui命令使用图形界面项目结构项目结构App.vue文件templateimgalt=Vuelogosrc=./assets/logo.pngHelloWorldmsg=WelcometoYourVue.jsApp//templatescriptimportHelloWorldfrom./components/HelloWorld.vueexportdefault{name:App,components:{HelloWorld}}/scriptstyle#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}/styleApp组件是项目的根组件。在实际开发中，可以修改代码中的import语句，将引入的组件替换为其他组件即可。一个单文件组件，在文件中包含了模板代码、组件代码和CSS样式规则项目结构main.js文件import{createApp}fromvueimportAppfrom./App.vue?createApp(App).mount(#app)程序入口的JavaScript文件，主要用于加载公共组件和项目需要用到的各种插件，并创建Vue的根实例项目结构index.html文件!DOCTYPEhtmlhtmllang=headmetacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edgemetaname=viewportcontent=width=device-width,initial-scale=1.0linkrel=iconhref=%=BASE_URL%favicon.icotitle%=htmlWebpackPlugin.options.title%/title/headbodynoscriptstrongWeresorrybut%=htmlWebpackPlugin.options.title%doesntworkproperlywithout JavaScriptenabled.Pleaseenableittocontinue./strong/noscriptdivid=app/div!--builtfileswillbeautoinjected--/body/html项目的主文件，文件中有一个id属性值为app的div元素，组件实例会自动挂载到该元素上在项目中使用单文件组件定义电影信息，包括电影图片、电影名称、类型、简介、上映时间和票房。实例编写一个单文件组件将一个组件的HTML、JavaScript和CSS应用各自