vue-cil搭建项目

目录

一、使用 HbuilderX 快速搭建一个 vue-cli 项目

1.需要的环境——Node.js

2.搭建Vue-cil项目

二、组件路由

1.安装vue-router

2.创建router目录 

3.使用路由

4.在main.js中配置路由


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

一、使用 HbuilderX 快速搭建一个 vue-cli 项目

1.需要的环境——Node.js

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

下载地址:https://nodejs.org/en/download

        在官网选择版本下载后,找到该程序包,点击下载。

        根据提示进行安装操作

        到安装路径这里自行选择即可

        其余部分直接点next即可

        最后finish结束即可。

这里我们可以win+R进行测试,输入node -v和npm -v,如果出现以下版本号则安装好了。

2.搭建Vue-cil项目

        创建好后,点击下面红框终端,输入 "npm run serve",启动成功后,会出现访问项目地址:http://xxx.x.x.x:8080/ 在命令行中 ctrl+c 停止服务。

二、组件路由

1.安装vue-router

在终端点击Ctrl+C,选择结束运行项目

在终端输入命令:npm i vue-router@3.5.3

等待其下载完毕即可。

2.创建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;

这里我创建了三个vue文件,因此导入Index、Login、Reg三个组件

import Vue from 'vue';
/* 导入路由 */
import router from 'vue-router';
import Index from '../Index.vue';
import Login from '../Login.vue';
import Reg from '../Reg.vue';Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [{path: '/',component: Index},
{path: '/index',component: Index},
{path: '/login',component: Login},
{path: '/reg',component: Reg}]
});
export default rout

3.使用路由

        这里由于浏览器每次默认先启动Index.vue文件,所以我们将其放在Index.vue文件中

<router-link to="/index"> 首页 </router-link>
<router-link to="/content"> 内容 </router-link>
<router-view/>

        这里展示一个vue文件的基本格式,顺便在其中使用路由

<template><!-- 组件模版格式	组件中必须有一个根标签 --><div>首页<router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link>{{name}} {{age}}</div>
</template><script>export default{//定义组件中的数据data(){return{name:'jim',age:20}},methods:{}}
</script><style>
</style>

4.在main.js中配置路由

import router from './router/index.js'
Vue.use(router);
new Vue({
        el: '#app',
        router,
        render: h => h(App)
})

        创建完成后如下:

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false
//导入组件路由
import router from './router/index.js'
Vue.use(router);new Vue({el: '#app',router,render: h => h(App),
}).$mount('#app')

记得在App.vue的<template>标签中的div中添加如下标签,用于显示其他组件

<router-view></router-view>

         App.vue完整代码如下:

<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"> --><!-- 显示其他组件--><router-view></router-view></div>
</template>
<script>
export default {name: 'app',
}
</script><style></style>

     最终效果如下:点击登录、注册可以访问到相应页面:

        至此,一个简单的vue-cil项目就完成了,接下来我会继续为大家更新更多有关web前端的知识!

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

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

相关文章

几个有意思 Python 通用命令行工具

几个 Python 通用命令行工具。 命令用途python -m http.server启动一个简单的web服务器python -m webbrowser打开你的网页浏览器python -m json.tool格式化JSON数据&#xff0c;使其美观python -m calendar显示命令行日历 快速启动一个Web服务 http.server 将http.server模块…

数字信号处理——专栏说明篇

为什么要开这个学习专栏&#xff1f; 没有过高技术&#xff0c;没有强大背景&#xff0c;如果可以&#xff0c;请你听听我的故事。 22岁的我&#xff0c;在经历了72%的迷茫且无助的大学生活后&#xff0c;我&#xff0c;一个平平无奇的在校学生&#xff0c;终于通过自我救赎&…

VsCode:配置TypeScript开发环境

一、前提 电脑已经安装了npm 何如安装npm&#xff0c;请点击查看Node.js、npm常用命令、安装多个node版本 提醒&#xff1a;下文讲解操作是在mac 系统进行的&#xff0c;TypeScript简称&#xff1a;ts 二、安装TypeScript 在终端里执行命令&#xff1a;npm install -g typescr…

【Linux】部署 GitLab 服务

1、配置实验环境 安装git apt install git 安装docker apt install docker 安装tree apt install tree 2、安装 Gitlab 下载官方库与安装包 下载官方库的安装脚本 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/script.deb.sh | sudo bas…

1panel 搭建多个网站

1panel 部署多个网站&#xff0c;另外的域名&#xff0c;或无域端口搭建方法。 当我们已经部署好一个网站后&#xff0c;想再部署一个网站在我们的服务器上时&#xff0c; 步骤&#xff1a;&#xff08;另外的域名&#xff0c;部署在同一个服务器方法&#xff09; 运行环境里…

六、资产安全—信息分级资产管理与隐私保护(CISSP)

目录 1.信息分级 2.信息分级方法 3.责任的层级 4.资产管理 5.隐私数据管理角色 6.数据安全控制 7.数据保护方案 8.使用安全基线 六、资产安全—数据管理(CISSP): 五、身份与访问管理—身份管理和访问控制管理(CISSP): 1.信息分级 信息分级举列: 2.信息分级方…

K8S 角色/组件及部署方式的简单概述

1.宏观架构图 2.角色详情 2.1 Master(Controller Plane) 早期是叫 Master 节点&#xff0c;后期改名为 Controller Plane&#xff0c;负责整个集群的控制和管理 Master 不会干活的(当然你让它干也是会干的&#xff0c;涉及到污点容忍)&#xff0c;而是起到访问入口&#xff…

使用docker搭建squid和ss5

docker run -d --name squid-container -e TZAsia/Shanghai -p 自定义端口并记得开放:3128 ubuntu/squid docker exec -it squid-container /bin/bash apt update && apt install vim # 修改 http_port 3128 为 http_port 0.0.0.0:3128 # 修改 http_access deny all 为…

天池大赛Higress插件官方demo详细部署+调试

天池大赛Higress插件官方demo详细部署调试 契机 ⚙ 使用Higress AI网关优化AI调用成本。就是基于向量召回相似问题的缓存&#xff0c;降低LLM API调用成本。就是开发一个网关插件做QA缓存嘛。前文已经成功复现了hello-world插件&#xff0c;这次结合官方提供的AI-Cache插件自…

SecureBoost:一种无损的联邦学习框架

SecureBoost&#xff1a;一种无损的联邦学习框架 文章目录 SecureBoost&#xff1a;一种无损的联邦学习框架1 引言2 预备知识与相关工作3 问题描述4 联邦学习与SecureBoost5 联邦推理6 无损属性的理论分析7 安全讨论8 实验9 结论 摘要——用户隐私保护是机器学习中的一个重要问…

LSS论文与代码详解

本文首发于公众号【DeepDriving】&#xff0c;欢迎关注。 0. 前言 最近几年&#xff0c;BEV感知是自动驾驶领域中一个非常热门研究方向&#xff0c;其核心思想是把多路传感器的数据转换到统一的BEV空间中去提取特征&#xff0c;实现目标检测、地图构建等任务。如何把多路相机的…

在Android中使用ProgressBar显示进度

在Android中使用ProgressBar显示进度 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Android应用中使用ProgressBar来显示进度。ProgressB…

软考 系统架构设计师系列知识点之杂项集萃(46)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;45&#xff09; 第73题 支持电子邮件加密服务的标准或技术是&#xff08; &#xff09;。 A. PGP B. PKI C. SET D. Kerberos 正确答案&#xff1a;A。 所属知识点&#xff1a;旧版教材 信息…

提防远程攻击:了解正向 Shell 和反向 Shell 确保服务器安全

前言 在当今网络安全形势日益复杂的环境中&#xff0c;了解正向 Shell 和反向 Shell 的工作原理和使用场景&#xff0c;对于保护你的服务器免受远程攻击至关重要。本文不仅深入解析这两种常见的远程控制技术&#xff0c;还将提供有效的防护建议&#xff0c;帮助你提升服务器的…

代码随想录算法训练营Day37 |01背包登场,416. 分割等和子集

今天学习了一个新的内容——01背包&#xff0c;应用场景是这样的&#xff0c;你有一个背包最多能装重量为maxweight重量的物品&#xff0c;你有n个物品&#xff0c;他们的价值分别为value[i]&#xff0c;重量分别为weight[i]&#xff0c;其中i为物品的下标&#xff0c;每件物品…

关于bim数字孪生threejs中使用glb文件大小优化及加载慢的说明(笔记)

在用three.js开发的时候发现&#xff0c;稍微大一点的glb或者fbx文件加载的时候很慢很卡 一直不理解这个卡和慢取决于哪些条件&#xff0c;下面来详细说一下 1、关于模型 不是越大加载越卡顿&#xff0c;而是却决于三角面数量&#xff0c;当累计三角面数量达到3000万时会出现明…

ASUS/华硕天选5 FX607J系列 原厂Windows11系统

安装后恢复到您开箱的体验界面&#xff0c;带原机所有驱动和软件&#xff0c;包括myasus mcafee office 奥创等。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http:…

LLaMA2模型训练加速秘籍:700亿参数效率提升195%!

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID &#xff5c; 计算机视觉研究院 学习群 &#xff5c; 扫码在主页获取加入方式 开源地址&#xff1a;https://github.com/hpcaitech/ColossalAI 计算机视觉研究院专栏 Column of Computer Vision Ins…

Microsoft Defender防病毒怎么关闭!详细步骤看这里!

Microsoft Defender是Windows系统中的防病毒软件&#xff0c;提供了实时的安全保护功能。但是&#xff0c;在某些情况下&#xff0c;用户想要关闭系统内的Microsoft Defender功能&#xff0c;但不知道要怎么操作才能关闭&#xff1f;接下来小编给大家带来详细的关闭步骤介绍。 …

柔性数组(flexible array)

柔性数组从C99开始支持使用 1.柔性数组的概念 概念&#xff1a; 结构体中&#xff0c;结构体最后一个元素允许是未知大小的数组&#xff0c;这就叫[柔性数组]的成员 struct S {int n;char arr[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点&#xff1a; 结构体中柔性…