vue官方提供了两种快速创建工程化的SPA项目的方式:
基于vite创建SPA项目
基于vue-cli创建SPA项目
安装vue-cli的教程
使用vue-cli安装SPA的链接
创建vite的项目
按照顺序执行如下的命令,即可基于vite创建vue 3.x的工程化项目:
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
复制local里的地址,到浏览器里:
这样就是创建好了!!
- node_modules目录用来存放第三方依赖包
- public是公共的静态资源目录
- src是项目的源代码目录(程序员写的所有代码都要放在此目录下)
- .gitignore是 Git的忽略文件
- index.html是 SPA单页面应用程序中唯一的HTML页面
- package.json是项目的包管理配置文件
在src这个项目源代码目录之下,包含了如下的文件和文件夹:
- assets目录用来存放项目中所有的静态资源文件(css、fonts等)
- components目录用来存放项目中所有的自定义组件
- App.vue是项目的根组件
- index.css是项目的全局样式表文件
- main.js是整个项目的打包入口文件
vite项目的运行流程
在工程化的项目中,vue要做的事情很单纯:通过main.js把App.vue渲染到index.html的指定区域中。
其中:
App.vue用来编写待渲染的模块结构
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中
App.vue
<template>
<h1> 这是 App 根组件</h1>
</template>
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 App</title>
</head>
<body>
<div id="app"></div>
<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')