创建Vue单页面应用的3种方法

article/2025/9/10 15:54:12

创建Vue单页面应用的3种方法

  • 首先下载Vue CLI
    • 1.命令行创建(推荐)
    • 2.Vue ui(不推荐)
    • 3.Vite(未来流行,现在还不稳定)

首先下载Vue CLI

官方链接:https://cli.vuejs.org/zh/guide/installation.html

安装:

npm install -g @vue/cli

检查版本:

vue --version

1.命令行创建(推荐)

vue create 项目名

执行之后会选择很多选项多数默认就行了
运行完成之后输入以下命令让项目跑起来

npm run serve

效果如下
在这里插入图片描述

2.Vue ui(不推荐)

在项目文件夹下输入

vue create 项目名
vue ui

等待很长一段时间之后。。。。
在这里插入图片描述
加载完成后自动弹出页面,我们就可以该页面进行操作项目了
在这里插入图片描述

3.Vite(未来流行,现在还不稳定)

在项目文件夹下输入命令

npm init vite-app 项目名
cd 项目名
npm i
npm run dev

等待加载,然后进入local的链接
在这里插入图片描述
效果如下
在这里插入图片描述


http://chatgpt.dhexx.cn/article/Y51V274l.shtml

相关文章

单页和多页应用(vue.js学习笔记)

1.什么是单页面和多页面? 单页: 单页应用将所有内容放在一个页面中,从而使整个页面更加流畅就用户体验而言,单机导航可以定位锚点,快速定位相应的部分,并轻松上下滚动。单页面应用提供的信息和一些主要内容…

Vue-router: 实现纯前端多页面应用(Vuecli+Element UI)

1.简介 1.1 为什么要用Vue-router 我想做一个带导航栏的简单web页面,页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面,然后在每个页面的按钮上添加链接,但是这样做每次页面都要刷新,效率上存在很大问…

vue3+vite配置多页应用

下面是工程的目录结构,里面包含一个index.html作为图表页的应用访问入口,login.html页作为登录页的应用访问入口。 对应的vite.config.js的配置,主要是配置root、base、build这几个属性,具体说明参考下方注释: import …

51、Vue 单页面应用

目录 1、概念 2、单页面应用和多页面应用的区别 3、SPA 单页面的优缺点分别是什么? 1、概念 SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容…

vue多页面入口配置

*index.html(主页\项目入口&#xff09;,app.vue(根组件)&#xff0c;main.js(文件入口的配置) 1.进行项目入口的配置 在public下面&#xff0c;复制index.html修改文件名&#xff08;里面内容可以不变&#xff09; <!DOCTYPE html> <html lang""><…

vue多页面开发

为什么使用多页面开发 vue是单页面应用&#xff0c;对多页面的页面间的相互跳转间没有过渡效果&#xff0c;难以维护&#xff1b;当一个应用越来越大的时候单页面模式应付不来&#xff0c;这时候就需要使用多页面应用了。 多页和单页应用模式的对比 转载于&#xff1a;https:…

Vue3多页面开发

Vue3多页面开发 在Vue3中&#xff0c;多页面开发的配置比较简单&#xff0c;下面来看一下具体的操作步骤&#xff1a; 1.使用vue创建单页面应用程序 见《Vue3脚手架指南》文章 2.在项目的根目录下创建vue.config.js文件&#xff0c;如果已经创建则忽略 3.在src目录下新建mo…

nginx部署多个vue多页面项目

众所周知&#xff0c;vue主要是用于开发单页应用的&#xff0c;在网上&#xff0c;也可以通过修改配置文件&#xff0c;实现多页面应用的开发&#xff0c;通过配置方式的开发多页面会有较多的缺点&#xff0c;在网上有许多论述&#xff0c;在此不再多言。此篇文章主要讲的是vue…

vue多页实践-开发

环境 node v12.5.0系统 winvuecli vue/cli 4.5.15ide WebStorm 2021.1 x64 本文是将vue-cli创建的spa应用改造为多页应用。 我们可以把多页应用理解为由多个单页构成的应用&#xff0c;而何谓多个单页呢&#xff1f;其实你可以把一个单页看成是一个 html 文件&#xff0c;那么…

vue3搭建多页面应用的方法

生成vue3的项目 vue create pagesdemo 2.在src文件中添加pages文件夹&#xff0c;同时删除app.vue main.js 在pages下添加项目文件夹&#xff0c;里面的目录结构和 原src一致。如下图 3. 配置vue.config.js vue-cli提供了pags参数&#xff0c;可以使用这个参数进行多页面配置…

vue实现多页面应用开发,包含项目之间跳转

需求&#xff1a;在一个vue项目工程下&#xff0c;需要部署两个项目甚至多个项目。 实现思路&#xff1a; 第一步&#xff1a;在vue.config.js文件中配置两个项目的入口 module.exports {pages: {// index页面是必须的&#xff0c;作为主项目的入口页面index: {entry: ./sr…

vue3配置多页面

先说下项目需求&#xff0c;地址栏中更换&#xff0c;不同地址进入页面不同&#xff0c;类似路由&#xff0c;以下为两个地址 简而言之&#xff0c;就是在不配置路由的情况下&#xff0c;输入admin和membe会进入管理端页面和会员端页面&#xff0c; 分析需求之后可以使用vue配…

构建多页vue应用

目录 1. 初始化2. 编写页面内容3. 配置多页入口总结 一般来说&#xff0c;vue推荐构建单页应用&#xff0c;页面内容的切换是通过路由控制组件的替换来实现的。单页应用使得页面跳转变得极为迅速&#xff0c;不过假如两个页面在功能逻辑上是完全独立的&#xff0c;甚至可能需要…

vue配置多页面应用

第一步&#xff1a;使用vue-cli搭建项目&#xff08;注&#xff1a;建议安装淘宝镜像&#xff0c;使用cnpm执行下面操作&#xff09; 1.按住shift按钮&#xff0c;右键点击存放项目的文件夹&#xff0c;点击在此处打开命令窗口。 2.在命令窗口中输入 npm install -g vue-cli …

vue打包多个html,vue多页面应用打包配置

一直是使用vue官方提供的脚手架工具来做开发单页应用,突发奇想的想做一个多页应用的打包配置,顺便了解一下webpack的使用。花了几天时间搞定之后才发现了这篇文章《进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)》。但还是要记录一下自己搭建的过程。代码地址:…

Vue多页面应用开发

一、前言 我们平常对Vue的印象有这样一种感觉&#xff1a;Vue就像专门为单页面应用&#xff08;SPA&#xff09;而生&#xff0c;因为Vue的官方文档中也有这样的描述&#xff1a; 实则非也&#xff0c;因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合…

vue 如何实现多页面应用

众所都知vue是一个单页面应用&#xff0c;但是单页面应用最大的问题&#xff0c;就是首次加载的时候过慢&#xff0c;因为他要把所有的css&#xff0c;js都要下载下来后&#xff0c;才可以加载页面&#xff0c;尤其是移动端&#xff0c;在弱网的情况下&#xff0c;体验感极差 尝…

使用vue搭建多页面多系统应用

一、多页面多系统应用 思路 使用Vue搭建多页应用。所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。组件复用性 可以将所有的系统公共组件放到系统目录最外面&#xff0c;以达到组件复用。在系统内部依然将自己独立的组…

vue多页面应用

vue多页面应用 配置vue多页面&#xff0c;生成的vue项目默认是单页面 单页面和多页面的优缺点&#xff1a; 多页面应用&#xff1a; 一个网址对应一个页面资源   1) 缺点&#xff1a;跳转一个页面都需要重新加载整个页面的资源&#xff0c;页面跳转会刷新&#xff01;   2)…

网页打印服务器无法创建对象,打印问题,教您怎么解决automation服务器不能创建对象...

打印是我们经常会使用到的&#xff0c;所以要是遇到“automation服务器不能创建对象”的问题&#xff0c;我们得知道怎么解决才能更好地使用打印机。所以现在小编就将我的解决“automation服务器不能创建对象”的方法分享给你们。 什么时候会出现“automation服务器不能创建对象…