Vite 创建 vue3.x 项目

1. 创建 vite 项目

按照顺序执行如下命令，即可基于 vite 创建 vue 3.x 的工程化项目：

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev

生成网页效果如下：

2. 梳理项目结构

文件(夹)	描述
node_modules	第三方依赖包
public	公共的静态资源目录
src	项目的源代码目录
index.html	SPA 单页面应用程序中唯一的 HTML 页面
gitgnore	Git 的忽略文件
package.json	包管理配置文件

在 src 项目源文件目录下，又包含了如下文件(夹)：

文件(夹）	描述
assets	静态资源文件（如 css、fonts）
components	存放自定义组件
App.vue	项目根组件
index.css	全局样式表
main.js	项目打包入口文件

3. vite 项目的运行流程

在工程化项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

>> 要渲染的 App.vue

<template><h1>APP 根组件</h1>
</template>

>> 指定的 index.html 区域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title>
</head>
<body><div id="app"></div>     <!--这里即为 el 区域--><script type="module" src="/src/main.js"></script>
</body>
</html>

>> 通过 main.js 进行渲染

// 1. 按需导入 createApp 函数
import { createApp } from 'vue'// 2. 导入带渲染的 App.vue
import App from './App.vue'// 3. 调用 createApp 函数，创建 SPA 应用实例
const app = createApp(App)// 4. 调用 mount 方法将 App 组件模板结构渲染到指定 el 区域
app.mount('#app')

Vite 创建 vue3.x 项目相关推荐

使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
用vite创建 vue3 ts项目
先看看vite官网这都2022年了,你肯定玩过vite + vue3 + ts项目吧原先都是其他同事创建好项目,我直接上手这次我自己来创建一下,在这里做一下记录可以直接跟着官方教程走 http ...
vue - - - - vite创建vue3项目（不使用TS）
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
vite 搭建 Vue3.0项目
vite 搭建 Vue3.0项目 vue3.0+TS+AntDesignVue项目 vite 初始化vite项目配置项目配置typescript 配置Vue Router 配置Vuex 配置Ant ...
使用vue-cli创建vue3+ts项目
使用vue-cli创建vue3+ts项目提示:该文章为vue3+ts的!该文章是博主看的B站尚硅谷视频课来进行整理的!尚硅谷的课真的很不错! 文章目录使用vue-cli创建vue3+ts项目前言 ...
Vite --- 创建Vue3项目
Vite 需要 Node.js 版本 >= 12.0.0. 1. node -v 查看node当前版本号 2. npm方式创建Vue3项目 npm init @vitejs/app 输入项目名 ...
Vue3 vue-cli、create-react-app、vite 创建vue/react项目(笔记)
文章目录 1. vue-cli vue2/3 项目 2. create-react-app react 项目 3. 使用 vite 安装 vue3 项目 3.1 方式一,框架选择配置安装 3.2 方式 ...
用 Vite 创建Vue3项目和相关开发工具配置
目录一.创建项目二.vite的快捷用法三.安装Vue3开发工具 Vite热更新.打包构建速度更快,但目前周边生态还不如 Webpack 成熟,目前实际开发中还是以 Webpack 为主,但目前就 ...
Vite搭建Vue3 + TypeScript 项目(NPM)
文章目录运行环境使用Vite初始化项目 vite提供不同工具的初始化以NPM为例: 运行环境请确保电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 & ...

Vite 创建 vue3.x 项目

1. 创建 vite 项目

2. 梳理项目结构

3. vite 项目的运行流程

Vite 创建 vue3.x 项目相关推荐

最新文章

热门文章