Vue-Ci搭建项目

项目创建

vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义
好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个
骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能

● 统一的目录结构
● 本地调试
· 热部署
● 单元测试
● 集成打包上线

需要的环境

简单的说 Node.js是一个前端js运行环境或者说是一个JS语言解释器。

npm
npm 是Node.js的包管理工具,用来安装各种 Node.js的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过60万个
JavaScript 代码包可供下载。npm 让JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。

安装nodejs

测试

使用HBuilderX快速搭建一个vue-ci项目

若为空的项目时候,在终端-应用npm  install来下载项目                                     

启动命令 npm run serve

npm run build 打包项目

组件路由

1. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
// 导出路由对象
export default rout;
2.使用路由
<router-link to="/index"> 首页 </router-link>
<router-link to="/content"> 内容 </router-link>
<router-view/>
3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust详解日志

详解日志 相比起监控&#xff0c;日志好理解的多&#xff1a;在某个时间点向指定的地方输出一条信息&#xff0c;里面记录着重要性、时间、地点和发生的事件&#xff0c;这就是日志。 注意&#xff0c;本文和 Rust 无关&#xff0c;我们争取从一个中立的角度去介绍何为日志 日…

openwrt igmp 适配

每弄完一次&#xff0c;过不多久就忘了&#xff0c;这次决心记下来。 openwrt 的igmpproxy 包是干嘛的&#xff1f;原来&#xff0c;组播包并不能穿透路由&#xff0c;也就是我们在wan端播放的组播视频流&#xff0c;lan端是没法收到的&#xff0c;igmpproxy就是用来打通wan端…

2024.6.26 刷题总结

2024.6.26 **每日一题** 526.优美的排列&#xff0c;该题考察的是状压dp的知识&#xff0c;用一个n位的二进制数表示排列中的数被选取的情况&#xff0c;若为1&#xff0c;则表示该位被选取&#xff0c;若为0&#xff0c;则表示该位没有被选取&#xff0c;用一个数组来存储当前…

STM32F1+HAL库+FreeTOTS学习1——FreeRTOS入门

STM32F1HAL库FreeTOTS学习1——FreeRTOS入门 裸机开发与操作系统嵌入式操作系统简介FreeRTOS简介FreeRTOS的几个重要概念任务调度器任务状态状态列表 裸机开发与操作系统 在以往的嵌入式学习中&#xff0c;我们最常用的就是裸机开发&#xff0c;所谓裸机开发就是指在没有操作系…

力扣1541. 平衡括号字符串的最少插入次数

Problem: 1541. 平衡括号字符串的最少插入次数 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 Problem: 力扣921. 使括号有效的最少添加 类似于上述题目&#xff0c;不过此时一个左括号要和两个右括号配对 1.同理上述题目&#xff0c;遍历字符串时若遇见一个左括…

揭秘微生物社区的“社交网络”:基因组规模代谢模型(GEMs)的新前沿

当前&#xff0c;微生物群落的基因组组成和功能潜力通过宏基因组组装基因组&#xff08;MAGs&#xff09;的分析得以部分揭示&#xff0c;但其内在的代谢网络和相互作用机制仍充满未知。为此&#xff0c;科学家们开发了基因组规模的代谢模型&#xff08;GEMs&#xff09;&#…

一码多址与同义词解决方案

随着地址库中的数据不断的丰富&#xff0c;地址库中一码多址和同义词的数据也会越来越多&#xff0c;一码多址和同义词在统一地址管理平台中的概念并不相同。 一码多址指的是多个地址编码相同&#xff0c;例如通过民政地址找到编码&#xff0c;再通过编码找到房产地址描述。 本…

怎么把不同的文件做成二维码?多种文件类型在线生码的制作方法

扫码来展示文件是现在很多场景下会使用的一种内容展示方法&#xff0c;这种方式能够简化其他人获取文件的流程&#xff0c;从而提升文件传播的效率&#xff0c;用户可以存储二维码&#xff0c;随时扫码查看文件内容。文件生成二维码支持多种类型的文件使用&#xff0c;比如ppt、…

信号与系统实验-实验五 离散时间系统的时域分析

一、实验目的 1、理解离散信号的定义与时域特征&#xff0c;掌握在时域求解信号的各种变换运算&#xff1b; 2、掌握离散系统的单位响应及其 MATLAB 实现的方法&#xff1b; 3、掌握离散时间序列卷积及其 MATLAB 实现的方法&#xff1b; 4、掌握利用 MATLAB 求解微分方程&a…

【数据库】Oracle安装报错(win10安装oracle提示环境不满足最低要求)

目录 一、问题场景&#xff1a; 二、问题描述 三、原因分析&#xff1a; 四、解决方案&#xff1a; 一、问题场景&#xff1a; 安装Oracle数据库 二、问题描述 安装之前提示&#xff08; [INS-13001]环境不满足最低要求。 是否确实要继续? &#xff09; 如图所示&…

说出这11种API接口性能优化,面试官一定会对你刮目相看

前言 接口性能优化是后端开发人员经常碰到的一道面试题&#xff0c;因为它是一个跟开发语言无关的公共问题。 这个问题既可以很简单&#xff0c;也可以相当复杂。 有时候&#xff0c;只需要添加一个索引就能解决。 有时候&#xff0c;代码需要进行重构。 有时候&#xff0c;必…

Vite: 集成Lint工具规范代码

概述 在前端开发中&#xff0c;尤其是在大型项目中&#xff0c;代码的规范性和一致性对于项目的可维护性、可读性以及团队协作效率至关重要。为了保障代码质量&#xff0c;前端社区涌现出了许多Lint工具&#xff0c;如ESLint、Prettier、Stylelint等&#xff0c;它们能帮助我们…

使用深度远程启动管理器配置BMC DHCP管理地址的方法

目录 1.请确保服务器BMC是DHCP状态&#xff0c;才可以使用深度工具分配地址&#xff1b;若BMC配置过静态地址&#xff0c;请使用静态地址登录&#xff1b; 2.配置好自己笔记本的 ip&#xff08;例如&#xff1a;192.168.78.1&#xff09;&#xff0c;用网线与 ipmi 独立管理口…

Day46

Day46 手写Spring-MVC 解决Controller层的方案 思路&#xff1a;监听器在项目启动时DispatherServlet会将controller层的信息记录下来&#xff0c;当前端发送请求的时候DispatherServlet就会根据信息分发给controller层。 准备工作 准备工作的目的是准备好监听器&#xff0c;而…

AI-智能体基础设施

个性化记忆需要世界模型来协助构建 业界有一个精简的Agent表达公示&#xff0c;即&#xff1a;Agent大模型&#xff08;LLM&#xff09;记忆&#xff08;Memory&#xff09;主动规划&#xff08;Planning&#xff09;工具使用&#xff08;Tool Use&#xff09;。基于该公式&am…

零信任价值获全面认可 新场景下展现无穷潜力

2023年&#xff0c;零信任在全球范围内持续快速发展&#xff0c;已经从新的安全理念发展成为云时代的主流安全架构&#xff0c;进入了全面普及期。 2023年&#xff0c;中国零信任市场同样涨势迅猛&#xff0c;产业生态越来越成熟&#xff0c;应用范围越来越广&#xff0c;应用…

面试题-Redis简介

1.主流应用框架 概念&#xff1a; 穿透查询&#xff1a;数据库中的名词&#xff0c;与逐层查询不同&#xff0c;通过超链接可直接查询想要的结果&#xff0c;更加方便快捷 熔断机制&#xff1a;指软件系统中&#xff0c;由于某些原因使得服务出现了过载现象&#xff0c;为防止…

「2024中国数据要素产业图谱1.0版」重磅发布,景联文科技凭借高质量数据采集服务入选!

近日&#xff0c;景联文科技入选数据猿和上海大数据联盟发布的《2024中国数据要素产业图谱1.0版》数据采集服务板块。 景联文科技是专业数据服务公司&#xff0c;提供从数据采集、清洗、标注的全流程数据解决方案&#xff0c;协助人工智能企业解决整个AI链条中数据采集和数据标…

Maven高级的多环境配置与应用

多环境配置与应用 这一节中&#xff0c;我们会讲两个内容&#xff0c;分别是多环境开发和跳过测试 5.1 多环境开发 我们平常都是在自己的开发环境进行开发&#xff0c;当开发完成后&#xff0c;需要把开发的功能部署到测试环境供测试人员进行测试使用&#xff0c;等测试人员测…

Redis报错:MISCONF Redis is configured to save RDB snapshots

错误提示内容&#xff1a; 2024-06-25 16:30:49 : Connection: Redis_Server > [runCommand] PING 2024-06-25 16:30:49 : Connection: Redis_Server > Response received : -MISCONF Redis is configured to save RDB snapshots, but it is currently not able to pers…