Vue----vite 的基本使用

文章目录

  • 2 vite 的基本使用
    • 2.1 创建 vite 的项目
      • 2.1.1 在对应的文件夹下打开命令窗口
      • 2.1.2 运行 npm init vite-app 项目名称
      • 2.1.3 运行 cd 项目名称
      • 2.1.4 运行 npm install
      • 2.1.5 运行
      • 2.1.6 打开网站
    • 2.2 梳理项目的结构
    • 2.3 vite 项目的运行流程
      • 2.3.1 在 App.vue 中编写模板结构
      • 2.3.2 在 index.html 中预留 el 区域
      • 2.3.3 在 main.js 中进行渲染


2 vite 的基本使用

2.1 创建 vite 的项目

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

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

2.1.1 在对应的文件夹下打开命令窗口

Vue----vite 的基本使用_第1张图片

2.1.2 运行 npm init vite-app 项目名称

请添加图片描述
Vue----vite 的基本使用_第2张图片

2.1.3 运行 cd 项目名称

请添加图片描述

2.1.4 运行 npm install

Vue----vite 的基本使用_第3张图片

2.1.5 运行

Vue----vite 的基本使用_第4张图片

2.1.6 打开网站

Vue----vite 的基本使用_第5张图片

2.2 梳理项目的结构

使用 vite 创建的项目结构如下:
Vue----vite 的基本使用_第6张图片
其中:

node_modules 目录用来存放第三方依赖包
public 是公共的静态资源目录
src 是项目的源代码目录(程序员写的所有代码都要放在此目录下)
.gitignore 是 Git 的忽略文件
index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
package.json 是项目的包管理配置文件

在 src 这个项目源代码目录之下,包含了如下的文件和文件夹:
Vue----vite 的基本使用_第7张图片
其中:

assets 目录用来存放项目中所有的静态资源文件(css、fonts等)
components 目录用来存放项目中所有的自定义组件
App.vue 是项目的根组件
index.css 是项目的全局样式表文件
main.js 是整个项目的打包入口文件

2.3 vite 项目的运行流程

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

其中:

① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

2.3.1 在 App.vue 中编写模板结构

清空 App.vue 的默认内容,并书写如下的模板结构:

<template>
  <h1>App 组件h1>
template>

<script>
export default {
  name: 'App'
}
script>

<style>

style>

2.3.2 在 index.html 中预留 el 区域

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 Apptitle>
head>
<body>
	
  <div id="app">div>
  <script type="module" src="/src/main.js">script>
body>
html>

2.3.3 在 main.js 中进行渲染

按照 vue 3.x 的标准用法,把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中:

// 1.导入创建Vue单页面应用程序实例对象的函数
import { createApp } from 'vue'
// 2.导入对应需要渲染的App组件
import App from './App.vue'

// 3.创建单页面应用程序实例对象
const app = createApp(App)

// 4.调用mount()方法把App组件渲染到index.html中指定的el区域
app.mount( '#app' )

注意:
在Vue3可以有多个根节点,不用在最外包一层div。

你可能感兴趣的:(#,Vue,vue,vue.js,sqlite,前端框架,前端)