如何快速创建vue的SPA项目

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')

如何快速创建vue的SPA项目相关推荐

Vue笔记——搭建脚手架并快速创建Vue项目
现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置打开vscode首选项- ...
史上最详细Vue-CLI脚手架快速创建Vue项目教程
Vue-CLI脚手架前言安装Vue CLI 使用参考文档一.创建项目存储文件夹二.CMD打开当前文件夹所在路径三.项目的配置 1.创建项目存储位置 2.项目名命名 3.项目预设 4.项目功能 ...
08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习官方文档推荐资料 npm入门 npm介绍需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
Vscode使用用户代码片段快速创建Vue实例
如图所见,只需要敲出vue三个单词即可完美创建Vue实例 ,非常快捷方便,如何完美实现呢?教程如下
Vue使用vue-cli创建vue的模板项目---vue工作笔记0018
然后我们使用vue-cli脚手架,来创建一个demo项目去. 可以看到上面是过程中,用到的命令. 首先我们应该先去安装nodejs的环境对吧,先去安装nodejs以后,这个npm,命令我们就可以使用了 ...
Vue学习笔记一创建vue项目
1:安装Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.可以搜索Node.js的官网下载,安装完成后,打开命令提示符cmd.exe,输入node ...
IDE创建vue项目
IDE创建vue项目 vue与vue cli的关系 vue.js是一个框架,核心是数据绑定,可以用于老的项目,引入vue.js即可使用 Vue3文档 - vuejs:vue官网 vue cli:vue ...

如何快速创建vue的SPA项目

创建vite的项目

vite项目的运行流程

如何快速创建vue的SPA项目相关推荐

最新文章

热门文章