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.rhkb.cn/news/361857.html

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

相关文章

华为OD机试 - 石头剪刀布游戏(Java 2024 D卷 200分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

设备驱动框架之LED

文章目录 前言一、什么是驱动框架二、使用步骤1.注册LED设备2.卸载LED设备3.内核中申请内存4.container_of5.platform_get_drvdata 和 platform_set_drvdata6.module_platform_driver 三、驱动示例总结 前言 为了尽量降低驱动开发者难度以及接口标准化&#xff0c;就出现了设备…

基于weixin小程序智慧物业系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;员工管理&#xff0c;房屋管理&#xff0c;缴费管理&#xff0c;车位管理&#xff0c;报修管理 工作人员账号功能包括&#xff1a;系统首页&#xff0c;维修…

数据库原理之数据库基本概念

目录 前言 基本概念 数据库完整性 前言 今天我们来看看数据库的基本概念&#xff0c;帮助大家对数据库有一点点最基本的了解 基本概念 4个基本概念 数据data&#xff1a;描述事物的符号&#xff0c;数据库中存储的基本对象。 数据库Database&#xff1a;长期存储在计算机…

基于JSP技术的旅游网站系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;B/S架构&#xff0c;JSP技术 工具&#xff1a;Eclipse&#xff0c;Tomcat…

PostMan动态设置全局变量

1. 前言 在开发过程中调试接口&#xff0c;一般都会使用PostMan。 其中有几个变量可能是好几个接口共用的&#xff0c;就会出现频繁手动复制(ctrlc)、粘贴(ctrlv)的情况。 这个过程得非常留意&#xff0c;生怕复制错了&#xff0c;或删减了某些东西&#xff0c;导致接口报错。…

Open3D 显示带有强度的点云数据

目录 一、概述 1.1强度信息的意义 1.2应用场景 二、代码实现 三、实现效果 一、概述 在点云数据中&#xff0c;强度&#xff08;Intensity&#xff09;指的是激光雷达传感器在扫描环境时&#xff0c;每个点返回的反射强度值。这些强度值代表了激光脉冲返回的能量&#xff…

Houdini 通过wedge来做模拟参数对比 (PDG TOP)

我们的设定如下例子 这是个简单的布料悬挂的例子。上方两个角分别被固定住了&#xff0c;然后在distance约束下布料下垂。 我们现在的目的是想要对比不同的streach stiffness对模拟的影响。 第一步&#xff1a;找到stiffness参数&#xff0c;右键expression->edit expre…

基于Pytorch框架的深度学习ConvNext神经网络宠物猫识别分类系统源码

第一步&#xff1a;准备数据 12种宠物猫类数据&#xff1a;self.class_indict ["阿比西尼猫", "豹猫", "伯曼猫", "孟买猫", "英国短毛猫", "埃及猫", "缅因猫", "波斯猫", "布偶猫&q…

【uni-app学习手札】

uni-app&#xff08;vue3&#xff09;编写微信小程序 编写uni-app不必拘泥于HBuilder-X编辑器&#xff0c;可用vscode进行编写&#xff0c;在《微信开发者工具》中进行热加载预览&#xff0c; 主要记录使用uni-app过程中自我备忘一些api跟语法&#xff0c;方便以后编写查找使用…

论文翻译 | ITER-RETGEN:利用迭代检索生成协同增强检索增强的大型语言模型

论文地址&#xff1a;Enhancing Retrieval-Augmented Large Language Models with Iterative Retrieval-Generation Synergy 摘要 检索增强生成由于有望解决包括过时知识和幻觉在内的大型语言模型的局限性而引起广泛关注。然而&#xff0c;检索器很难捕捉相关性&#xff0c;尤…

开发板以电脑为跳板连接互联网

标题 开发板以电脑为跳板连接互联网网络共享方式桥接方式 开发板以电脑为跳板连接互联网 分享下用网线直连电脑的开发板如何以电脑为跳板连接互联网的两个方法。 网络共享方式桥接方式 补充下&#xff0c;我的电脑连接的是无线网络&#xff0c;开发板和电脑是用网线进行连接的…

ComfyUI如何使用Face Detailer和ComfyI2I插件进行修脸

一.插件ComfyI2I使用 1.ComfyUI中调用Mask Ops 2.创建蒙版插件BBOX Detector(combined) 3.创建UltralyticsDetectorProvider 里面包含多个模型其中bbox/face_yolov8m.pt是针对脸部修复 4.组合后测试脸部蒙版识别是否正常 5.测试正常后调出Inpaint Segments&#xff0c;放大…

作 业 二

cs与msf权限传递 1、进入cs界面,首先来到 Cobalt Strike 目录下&#xff0c;启动 Cobalt Strike 服务端 2、用客户端进 3、建立监听 4、生成脚本文件 5、开启服务&#xff0c;让win_2012 下载木马文件并运行 6、显示已经获取到了win的权限 转到Metasploit Framework 7、进去m…

公益培训|半导体与集成电路项目制培训项目

关于我们 硬蛋产业学院&#xff0c;基于硬蛋创新(http://00400.HK)在芯片产业的资源和技术优势&#xff0c;引进全球领先的芯片应用技术&#xff0c;为国内培养芯片应用技术人才&#xff0c;助力芯片应用产业发展。 硬蛋产业学院在国家各主管部门、广东省、深圳市及社会各界的大…

pycharm工具回退键调出

pycharm工具调出回退键。 View->Appearance->Toolbar,即可调出 调不出的可以使用快捷键&#xff1a;ctrlalt向左箭头 但是这个快捷键容易和电脑屏幕旋转冲突。可将电脑的快捷键关掉&#xff0c;即可。 ctrlalt向上箭头&#xff1a;将屏幕旋转到正常&#xff08;横向&am…

基于weixin小程序校园快递系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;订单管理&#xff0c;快递管理&#xff0c;快递记录管理&#xff0c;公告管理&#xff0c;基础数据管理 小程序功能包括&#xff1a;系统首页&#xff0c;…

YOLOv10改进 | 卷积模块 | 将Conv替换为轻量化的GSConv【轻量又涨点】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a;《YOLOv8改进有效…

H5实现第三方分享功能,(WhatsApp,Facebook,Messenger,Instagram,Telegram,Zalo,Twitter/X)

1. H5实现第三方分享功能 1. WhatsApp 分享 https://api.whatsapp.com/send/?phone&app_absent0&text${codeUrl}2. Facebook 分享 https://www.facebook.com/sharer/sharer.php?u${codeUrl}3. Messenger 分享 https://www.messenger.com/?${codeUrl}4. Instagra…

计算机网络:应用层 - 万维网 HTTP协议

计算机网络&#xff1a;应用层 - 万维网 & HTTP协议 万维网 WWW统一资源定位符 URL 超文本传输协议 HTTP非持续连接持续连接非流水线流水线 代理服务器HTTP报文 万维网 WWW 万维网是一个大规模的、联机式的信息储藏所。万维网用链接的方法能非常方便地从互联网上的一个站点…