当前位置: 首页 > news >正文

使用Vue-cli构建spa项目及结构解析

一,Vue-cli是什么?

是一个官方发布的Vue脚手架工具,用于快速搭建Vue项目结构,提供了现代前端开发所需要的一些基础功能,例如:Webpack打包、ESLint语法检查、单元测试、自动化部署等等。同时,Vue-CLI还集成了一些非常实用的插件,例如vuex、vue-router等,让我们的开发更加快速高效。

二,spa是什么?

全称为Single Page Application,是指单页面应用程序。它是Web应用程序的一种架构模式,采用前后端分离的方式,前端负责展示页面和交互,通过异步请求获取后端数据,实现应用程序的动态更新。SPA项目的优点包括响应速度快、用户体验好、降低了数据传输量等。常见的SPA框架包括Angular、React、Vue等。

三,正式构建spa项目

1.安装Vue-cli

npm install -g vue-cli

2.安装 webpack 组件

 npm install -g webpack

命令执行成功之后,检验是否安装成功

vue -V

 安装成功,则会出对应现版本号。如下图所示

同时在node_global文件下会产生文件 

 3. 使用脚手架vue-cli来构建项目

找到Vue项目存放位置,输入cmd

进入命令窗口之后创建SPA项目(项目名字过长会报错) 

vue init webpack 项目名

 如图:

4.启动项目 

cd 项目名   进入创建的SPA项目中

npm run dev 启动项目

 如图:

spa项目默认界面 :

 5.结构介绍

vue-cli2.0版本(版本不同可能会导致结构变化)

build文件夹                          这个文件夹主要是进行webpack的一些配置
webpack.base.conf.js          webpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.js             webpack开发环境配置
webpack.prod.conf.js          webpack生产环境配置
 build.js                               生产环境构建脚本      
vue-loader.conf.js               此文件是处理.vue文件的配置文件

config文件夹
dev.env.js                         配置开发环境 
prod.env.js                       配置生产环境 
index.js                           这个文件进行配置代理服务器,例如:端口号的修改 
node_modules文件夹     存放npm install时根据package.json配置生成的npm安装                                                          包的文件夹

src文件夹                      源码目录(开发中用得最多的文件夹) 
assets                           共用的样式、图片 
components                  业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组                                      件,一个页面里面还会包着很多组件
router                            设置路由   
App.vue                         vue文件入口界面 
main.js                         对应App.vue创建vue实例,也是入口文件,对应                                                                       webpack.base.config.js里的入口配置  

static文件夹                  存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置
                    对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用    
package.json       这个文件有两部分是有用的:scripts 里面设置命令以及在dependencies                                和devDependencies中,
                              分别对应全局下载和局部下载的依赖包

如图:

6. spa项目中使用路由

定义组件

<template><div>这是网站的发展历程</div>
</template><script>
export default {name: 'About',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style>
</style>

 配置路由:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld from '@/components/Home'
import HelloWorld from '@/components/About'
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/',name: 'About',component: About}]
})

 

6.嵌套路由的使用

修改Home.vue组件

<template><div> <router-link to="/myvue">本站信息</router-link><router-link to="/myvue">本站信息</router-link>
<router-view></router-view></div></template><script>
export default {name: 'Home',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style>
</style>

 6.2添加新的组件

<template><div>本站存在意义,以及本站简介、功能介绍</div>
</template><script>export default {name: 'mynode',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

<template><div>本站创始人介绍,个人经历,未来发展</div>
</template><script>export default {name: 'myvue',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>

  路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import mynode from '@/components/mynode.vue'
import myvue from '@/components/myvue.vue'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home,
children:[{path:'/mynode',name:'mynode',component:mynode},{path:'/myvue',name:'myvue',component:myvue}]},{path: '/Home',name: 'Home',component: Home},{path: '/About',name: 'About',component: About}]
})

  结果

相关文章:

使用Vue-cli构建spa项目及结构解析

一&#xff0c;Vue-cli是什么&#xff1f; 是一个官方发布的Vue脚手架工具&#xff0c;用于快速搭建Vue项目结构&#xff0c;提供了现代前端开发所需要的一些基础功能&#xff0c;例如&#xff1a;Webpack打包、ESLint语法检查、单元测试、自动化部署等等。同时&#xff0c;Vu…...

自定义Unity组件——AudioManager(音频管理器)

需求描述 在游戏开发中&#xff0c;音频资源是不可或缺的&#xff0c;通常情况下音频资源随机分布&#xff0c;各个音频的操作和管理都是各自负责&#xff0c;同时对于音频的很多操作逻辑都是大同小异的&#xff0c;这就造成了许多冗余代码的堆叠&#xff0c;除此之外在获取各类…...

leetcode 558 设计内存文件系统

题目 Design an in-memory file system to simulate the following functions: ls: Given a path in string format. If it is a file path, return a list that only contains this files name. If it is a directory path, return the list of file and directory namesin th…...

Haproxy负载均衡群集

HAproxy搭建Web群集一、Web集群调度器1、常见的Web集群调度器2、常用集群调度器的优缺点&#xff08;LVS ,Nginx,Haproxy)2.1 Nginx2.2 LVS2.3 Haproxy 3、LVS、Nginx、HAproxy的区别 二、Haproxy1、简介2、Haproxy应用分析3、HAProxy的主要特性4、Haproxy调度算法&#xff08;…...

什么是面包屑导航?

面包屑导航(Breadcrumb Navigation)这个概念来自童话故事“汉赛尔和格莱特”&#xff0c;当汉赛尔和格莱特穿过森林时&#xff0c;不小心迷路了&#xff0c;但是他们发现沿途走过的地方都撒下了面包屑&#xff0c;让这些面包屑来帮助他们找到回家的路。 在网站应用中&#xff0…...

VS2019创建GIt仓库时剔除文件或目录

假设本地有解决方案“SomeSolution” 1、首先”团队资源管理器“-“创建Git存储库”&#xff0c;选择“仅限本地”、“创建” VS会在解决方案目录下自动生成.gitattributes、.gitignore 2、编辑gitignore&#xff0c;直接拖到VS里或者用记事本打开。添加要剔除的文件或文件夹…...

计算机等级考试—信息安全三级真题六

目录 一、单选题 二、填空题 三、综合题 一、单选题...

vue循环滚动字幕

在Vue.js中创建一个循环滚动字幕的效果通常需要使用一些CSS和JavaScript来实现。以下是一个简单的示例&#xff0c;展示如何使用Vue.js创建一个循环滚动字幕的效果&#xff1a; 首先&#xff0c;在HTML中创建一个Vue实例&#xff0c;并添加一个包含滚动字幕的容器元素&#xff…...

扩展pytest接口自动化框架-MS数据解析功能

【软件测试行业现状】2023年了你还敢学软件测试&#xff1f;未来已寄..测试人该何去何从&#xff1f;【自动化测试、测试开发、性能测试】 开篇 MeterSphere的数据源通过html页面上传后&#xff0c;需要将请求方式进行拆分。 get接口的参数&#xff0c;常以params的方式进行传…...

docker容器安装MongoDB数据库

一&#xff1a;MongoDB数据库 1.1 简介 MongoDB是一个开源、高性能、无模式的文档型数据库&#xff0c;当初的设计就是用于简化开发和方便扩展&#xff0c;是NoSQL数据库产品中的一种。是最 像关系型数据库&#xff08;MySQL&#xff09;的非关系型数据库。 它支持的数据结构…...

Python机器学习实战-特征重要性分析方法(3):迭代删除法:Leave-one-out(附源码和实现效果)

实现功能 迭代地每次删除一个特征并评估准确性 实现代码 from sklearn.datasets import load_breast_cancer from sklearn.model_selection import train_test_split from sklearn.ensemble import RandomForestClassifier from sklearn.metrics import accuracy_score impo…...

Go的error接口

从本书的开始&#xff0c;我们就已经创建和使用过神秘的预定义error类型&#xff0c;而且没有解释它究竟是什么。实际上它就是interface类型&#xff0c;这个类型有一个返回错误信息的单一方法&#xff1a; type error interface { Error() string } 创建一个error最简单的方…...

RabbitMQ 集群 - 普通集群、镜像集群、仲裁队列

目录 一、RabbitMQ 集群 1.1、前言 1.2、普通集群 1.3、镜像集群 1.4、仲裁队列 一、RabbitMQ 集群 1.1、前言 前面我们已经解决了消息可靠性问题&#xff0c;以及延迟消息问题 和 消息堆积问题. 这最后一章&#xff0c;我们就来解决以下 mq 的可用性 和 并发能力. 1.2、…...

高项新版教程(第四版)解读+学习指导

第四版主要内容 技术部分 信息化教程、软件工程、网络技术是原来的&#xff0c;学习原来的录播。 新基建、工业互联网、车联网、农业现代化、数字化转型、元宇宙等是新增&#xff0c;以直播讲。 管理部分 变化不是太大 。 整合管理、人力变为资源管理、风险管理新增内容。 …...

【Debian】Debian10.0.0安装选项问答

debian的LXQT是什么&#xff1f; LXQT是一套轻量级的桌面环境,主要基于Qt框架开发。 LXQT在debian中的具体特点包括: - 使用Openbox作为窗口管理器,提供平铺式窗口布局。 - 文件管理器为PCManFM-Qt。 - 设置中心集成 debconf 配置界面。 - 支持GTK和Qt应用程序。 - 资源消耗较低…...

【基于React-Native做位置信息获取,并展示出来】

基于React-Native做位置信息获取 在这个里面最重要的是两个部分&#xff0c;一个是位置定位的权限获取&#xff0c;一个是实时位置的监听&#xff0c;在安卓项目中&#xff0c;在 android/app/src/main/AndroidManifest.xml该文件下&#xff0c;在< manifest > 标签内写…...

ansible安装、点对点Ad-Hoc、模块、剧本Playbook

DevOps: 官网&#xff1a;https://docs.ansible.com 自动化运维工具对比 C/S 架构:客户端/服务端 Puppet:基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱 SaltStack:基于 Python 开发,采用 C/S 架构,YAML使得配置脚本更简单.需要配置客户端及服务器…...

Ceph入门到精通-ceph pool 删除导致 misplaced 的原因

misplaced 的原因 Ceph中的misplaced对象是指将对象&#xff08;或对象的副本&#xff09;存储在错误的位置上&#xff0c;这可能会导致性能下降或数据不一致的问题。在删除Ceph池时&#xff0c;可能会导致misplaced的原因有以下几个&#xff1a; 删除过程中的操作失误&#x…...

计算机组成原理课程设计

操作控制和顺序控制 操作控制就是由各种微命令来构成的顺序控制就是由P测试和后续微地址构成的 这就构成了整个微指令的三个部分 访存指令就是实现对主存中的数据进行访问或存储 一、 操作控制字段是由各种微命令来构成的&#xff0c;这些微命令怎么来设计&#xff1f; 一个萝卜…...

《从菜鸟到大师之路 MySQL 篇》

《从菜鸟到大师之路 MySQL 篇》 数据库是什么 数据库管理系统&#xff0c;简称为DBMS&#xff08;Database Management System&#xff09;&#xff0c;是用来存储数据的管理系统。 DBMS 的重要性 无法多人共享数据 无法提供操作大量数据所需的格式 实现读取自动化需要编程…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...