《4-3 4.1.5使用Vite搭建Vue 3.x项目ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《4-3 4.1.5使用Vite搭建Vue 3.x项目ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、4-3 4.1.5 使用Vite 搭建Vue 3.x 项目教学课件 Vue.js 基础与应用开发实战（微课版）4.1.5 使用Vite搭建 Vue 3.x项目Vite是一种新型的前端构建工具，最初是配合Vue3.0一起使用的，后来适配了各种前端项目，目前提供了Vue、React、Preact框架模板。vite也提供了使用npm或者yarn生成项目结构的方式，【实例4-5】使用Vite搭建Vue 3.x项目05-vue-project【操作要求】使 用 Vite搭 建 Vue 3.x项 目 05-vue-project，项 目 05-vue-project的组成结构如图4-8所示。图4-8 项目
2、05-vue-project 的组成结构【实现过程】1准备项目环境先要确保本机所用的Node.js版本=12.x.0，在命令行使用node-v就可以查看node的版本。执行以下命令全局安装create-vite-app：npm i-g create-vite-app2开始创建Vite项目先进入创建Vite项目的文件夹，然后在命令行中输入以下命令创建Vite项目：npm init vite 或者 npm init vitejs/app 或者 yarn create vitejs/app按照提示信息进行操作，首先输入Vite项目名称05-vue-project，然后选择framework，创建过程
3、的选择结果与项目创建成功的提示信息如下：Need to install the following packages:vitejs/create-app Project name:.05-vue-project Select a framework:vue Select a variant:vueScaffolding project in D:vuecasesUnit0405-vue-project.Done.Now run:cd 05-vue-project npm install npm run devvite默认不会让用户选择路由、语法检测以及单元测试等，所以这些需要后期手动安装引入。
4、3安装项目依赖项在命令行中输入以下命令安装项目依赖项：cd 05-vue-projectnpm install4初次启动Vite项目在命令行中输入以下命令初次启动Vite项目：npm run dev该命令执行完毕，Vite项目启动成功会出现以下提示信息：05-vue-project0.0.0 dev vitePre-bundling dependencies:vue(this will be run only when your dependencies or config have changed)vite v2.6.14 dev server running at:Local:http:/
5、localhost:3000/Network:use-host to expose ready in 471ms.运行npm run dev命令时，会发现它比webpack启动速度快多了。跟以前用vue-cli脚手架搭建项目的时候也有区别，vite的默认端口是3000。5在浏览器中浏览项目05-vue-project的运行结果打 开 浏 览 器，在 地 址 栏 中 输 入 网 址：http:/localhost:3000/，按【Enter】键，页面效果如图4-9所示。图4-9 Vite 项目05-vue-project 初次浏览效果6查看05-vue-project项目中主要文件的初始代码（1
6、）查看package.json文件的初始代码package.json文件的初始代码如下：name:05-vue-project,version:0.0.0,scripts:dev:vite,build:vite build,serve:vite preview,dependencies:vue:3.2.16,devDependencies:vitejs/plugin-vue:1.9.3,vite:2.6.4（2）查看vite.config.js文件的初始代码vite.config.js文件的初始代码如下：import defineConfig from viteimport vue from
7、vitejs/plugin-vue/https:/vitejs.dev/config/export default defineConfig(plugins:vue()（3）查看index.html文件的初始代码index.html文件的初始代码如下：Vite App（4）查看src文件夹中main.js文件的初始代码src文件夹中main.js文件的初始代码如下：import createApp from vueimport App from./App.vuecreateApp(App).mount(#app)（5）查看src文件夹中App.vue文件的初始代码src文件夹中App.vue文件的初始代码如下：/This starter template is using Vue 3 SFCs/Check out https:/v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setupimport HelloWorld from./components/HelloWorld.vue 快乐学习！高效学习！祝学习进步！