4-1 4.1.3使用vue create命令创建vue 3.x项目ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《4-1 4.1.3使用vue create命令创建vue 3.x项目ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《4-1 4.1.3使用vue create命令创建vue 3.x项目ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、4-1 4.1.3 使用vue create命令创建vue 3.x项目教学课件 Vue.js基础与应用开发实战（微课版）4.1.3 使用vue create命令创建vue 3.x项目本节主要介绍vue 3.x项目搭建及其项目结构和配置，在项目正式创建之前应先完成vue-cli脚手架工具的安装，脚手架工具可以直接生成一个项目的整体架构，帮助开发者搭建Vue.js的基础代码。【实例4-3】使用vue create命令创建 vue 3.x项目03-vue-project【操作要求】使用vue create命令创建vue 3.x项目03-vue-project，项目02-vue-project的组成结

2、构如图4-3所示。图图4-3 项目项目03-vue-project的组成结构的组成结构【实现过程】1输入创建vue 3.x项目的命令在命令行中输入以下命令创建vue 3.x项目：vue create 03-vue-project 2输入或选择配置选项创建vue 3.x项目的命令输入完毕，按【Enter】键，开始执行上述命令后，首先出现的提示信息如下：Vue cli v4.5.14?Please pick a preset:(Use arrow keys)Default(Vue 2 babel,eslint)Default(Vue 3)(Vue 3 babel,eslint)Manually s

3、elect features按【】上下箭头移动光标，这里选择“Default(Vue 3)(Vue 3 babel,eslint)”选择，即提供babel和eslint支持，然后按【Enter】键即为选定，提示信息如下：?Please pick a preset:Default(Vue 3)(Vue 3 babel,eslint)3下载与安装依赖项由于选择了Vue3的默认配置，所以直接开始下载与安装依赖项，命令行窗口输出以下信息：Generating README.md.Successfully created project 03-vue-project.Get started with t

4、he following commands:$cd 03-vue-project$npm run serve此时可以断定，Vue 3项目的依赖项已成功安装完成。4项目启动运行03-vue-project在命令行中执行以下命令更改当前文件夹：cd 03-vue-project接着在命令行中执行以下命令开始启动项目：npm run serve启动项目时会出现以下提示信息：03-vue-project0.1.0 serve vue-cli-service serve INFO Starting development server.98%after emitting CopyPlugin DONE

5、Compiled successfully in 2098ms App running at:-Local:http:/localhost:8080/-Network:http:/192.164.1.7:8080/Note that the development build is not optimized.To create a production build,run npm run build.5在浏览器中浏览项目03-vue-project的运行结果打开浏览器，在地址栏中输入http:/localhost:8080/，按【Enter】键即可看到页面内容。【注意】：Vue cli 3.x版和旧版使用了相同的vue命令，如果仍然需要使用旧版本的vue init命令，可以全局安装一个桥接工具，安装命令如下：npm install-g vue/cli-initvue init的运行效果将会跟vue-cli2.x相同，例如：vue init webpack 01-vue-project快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！