Vue_cli搭建过程项目创建

概述

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义
好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
(解释: 就是一个框架(相当于盖房子的骨架),然后就在这个骨架上面渲染骨架,最后达到想要的结果.)

需要运行的环境

Node.js
简单的说 Node.js 是一个前端 js 运行环境 或者说是一个 JS 语言解释器
npm
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
https://nodejs.org/en/download

在这个网址上面下载Node.js运行环境

然后进行以下操作

打开终端

输入这两个命令检验环境是否搭建成功.

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

打开文件里面的新建
    
选择项目
项目结构
如果项目中没有这个文件或者误删文件
就在控制台输入这行命令来导入,项目依赖的组件
npm install

创建好这个项目之后要删除无关示例代码以及文件
可以输入在控制台输入这行命令来防止以后创建的项目下载package-lock.json 这个文件]
npm config set package-lock false

删除App.vue这些示例代码留下基本框架
删除以上的东西留下的基本框架
让我们快速搭建一个Hello World项目
首先在src建立Index.vue, Login.vue, Reg.vue 这些文件
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌。
安装
vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。 打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3

在控制台输入这行命令导入路由

搭建步骤:
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)
})

3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
然后给这些组件定义路由地址用来切换组件
在src目录下创建一个router目录
在此目录下创建一个名为index.js 文件创建路由器
给组件定义地址
定义好这些组件的地址之后在main.js中导入组件 
在App.vue组件中的id为app的div标签加  <router-view></router-view>这个标签用来显示其他组件.
做好以上步骤来运行一下项目, 在控制台输入这行命令来运行项目
npm run serve

在控制台按住Ctrl+ c可以结束项目服务

这样就搭建好一个Hello World的示例项目

看一下效果

点击登录可以切换到登录组件,点击注册切换到注册组件

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

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

相关文章

uni-app的showModal提示框,进行删除的二次确认,可自定义确定或取消操作

实现效果&#xff1a; 此处为删除的二次确认示例&#xff0c;点击删除按钮时出现该提示&#xff0c;该提示写在js script中。 实现方式&#xff1a; 通过uni.showModal进行提示&#xff0c;success为确认状态下的操作自定义&#xff0c;此处调用后端接口进行了删除操作&#…

【Android】App设置开机自启动之后但是无效的原因之一

问题描述 通过监听开机广播&#xff0c;然后启动App&#xff0c;但是在系统开机之后&#xff0c;App并没有启动。 问题原因 当一个App在安装之后&#xff0c;必须要先启动一次&#xff0c;然后这个开机启动的功能才可以正常使用。 但是由于我的这个App是一个服务类的App&am…

如何成为专业的 .NET 开发人员

如今&#xff0c;网上有大量信息&#xff0c;找到正确的信息并非易事。当你开始编程之旅并希望获得全面的指南时&#xff0c;最好寻找一个可以指导你完成整个过程的指南。 本文将帮助您制定一份路线图&#xff0c;告诉您什么是重要的以及什么是需要学习的. 一.一切从软件基础…

【JavaScript】BOM编程

目录 一、BOM编程是什么 二、window对象的常用方法 1、弹窗API方法 2、计时器任务方法 三、window对象的属性对象常用方法 1、history网页浏览历史 2、location地址栏 3、数据存储属性对象 4、console控制台 一、BOM编程是什么 当我们使用浏览器打开一个网页窗口时&#xff0c;…

Volatility 内存取证【信安比赛快速入门】

一、练习基本命令使用 1、获取镜像信息 ./volatility -f Challenge.raw imageinfo 一般取第一个就可以了 2、查看用户 ./volatility -f Challenge.raw --profileWin7SP1x64 printkey -K "SAM\Domains\Account\Users\Names" 3、获取主机名 ./volatility -f Challenge…

探索QCS6490目标检测AI应用开发(二):摄像头视频的拉取和解码

作为《探索QCS6490目标检测AI应用开发》文章&#xff0c;紧接上一期&#xff0c;我们介绍如何在应用程序中拉取视频流&#xff0c;并且用硬件解码&#xff0c;得到逐帧的图像画面。我们使用了高通的Intelligent Multimedia SDK&#xff08;IM SDK&#xff09;完成视频的拉流和硬…

Linux杀僵尸进程

ps -A -o stat,ppid,pid,cmd | grep -e ^[Zz] | awk {print $2}1、查看系统是否有僵尸进程 使用Top命令查找&#xff0c;当zombie前的数量不为0时&#xff0c;即系统内存在相应数量的僵尸进程。 2、定位僵尸进程 使用命令 ps -A -ostat,ppid,pid,cmd |grep -e [Zz]定位僵尸…

Kafka入门-分区及压缩

一、生产者消息分区 Kafka的消息组织方式实际上是三级结构&#xff1a;主题-分区-消息。主题下的每条消息只会保存在某一个分区中&#xff0c;而不会在多个分区中被保存多份。 分区的作用就是提供负载均衡的能力&#xff0c;或者说对数据进行分区的主要原因&#xff0c;就是为…

数据库与表的基本操作:构建数据世界的基石(三)

引言&#xff1a;从零构建数据结构的艺术 在上一章节《安装与配置》中&#xff0c;我们成功地在不同的操作系统上安装并配置了MySQL&#xff0c;为实战数据库管理奠定了坚实的基础。本章节&#xff0c;我们将深入探索数据库与表的基本操作&#xff0c;包括如何创建、删除数据库…

RandLA-Net语义分割

项⽬地址&#xff1a; GitHub - tsunghan-wu/RandLA-Net-pytorch: :four_leaf_clover: Pytorch Implementation of RandLA-Net (https://arxiv.org/abs/1911.11236) 搭建环境并配置RandLA-Net 根据Environment Setup 搭建环境&#xff08;除了requirements.txt中的库&#xf…

畅谈GPT-5

前言 ChatGBT(Chat Generative Bidirectional Transformer)是一种基于自然语言处理技术的对话系统,它的出现是人工智能和自然语言处理技术发展的必然趋势。随着技术的更新和进步&#xff0c;GPT也迎来了一代代的更新迭代。 1.GPT的回顾 1.1 GPT-3的介绍 GPT-3&#xff08;Gen…

门店客流统计)

门店客流统计 代码部分效果 代码部分 import cv2 import numpy as np from tracker import * import cvzone import timebg_subtractor cv2.createBackgroundSubtractorMOG2(history200, varThreshold140)# Open a video capture video_capture cv2.VideoCapture(r"sto…

昇思25天学习打卡营第3天|数据集与数据变换

数据集 数据集&#xff08;Dataset&#xff09;操作shufflemapbatch 数据变换&#xff08;Transforms&#xff09;Vision TransformsText TransformsLambda Transforms 总结 数据集&#xff08;Dataset&#xff09; 数据是深度学习的基础&#xff0c;深度神经网络的效果对数据…

力扣377 组合总和Ⅳ Java版本

文章目录 题目描述代码 题目描述 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保证答案符合 32 位整数范围。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3], targe…

algorithm中常见算法

1、前言 C的<algorithm>库是C标准库中的一个重要组成部分&#xff0c;它提供了一系列的函数&#xff0c;用于执行各种常见的算法操作&#xff0c;比如排序、查找、替换、合并等。这些算法函数通常以模板函数的形式提供&#xff0c;可以用于任何符合特定条件的容器类型。 …

玩个游戏 找以下2个wordpress外贸主题的不同 你几找到几处

Aitken艾特肯wordpress外贸主题 适合中国产品出海的蓝色风格wordpress外贸主题&#xff0c;产品多图展示、可自定义显示产品详细参数。 https://www.jianzhanpress.com/?p7060 Ultra奥创工业装备公司wordpress主题 蓝色风格wordpress主题&#xff0c;适合装备制造、工业设备…

用友U8 Cloud smartweb2.showRPCLoadingTip.d XXE漏洞复现

0x01 产品简介 用友U8 Cloud 提供企业级云ERP整体解决方案,全面支持多组织业务协同,实现企业互联网资源连接。 U8 Cloud 亦是亚太地区成长型企业最广泛采用的云解决方案。 0x02 漏洞概述 用友U8 Cloud smartweb2.showRPCLoadingTip.d 接口处存在XML实体,攻击者可通过该漏…

Origin做聚类分析并利用聚类插件绘制热力图

1.聚类分析 1.1 K均值聚类 step1、首先进行归一化&#xff0c;具体步骤如图1-1所示&#xff1a; 图1-1 操作后得到归一化值如图1-2所示&#xff1a; 图1-2 step2、执行K均值聚类分析&#xff0c;如图1-3所示&#xff0c;选中聚类列&#xff0c;接着点击“统计”—“多变量分析…

webrtc-m120编译

WebRTC实时互动入门 环境 lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.4 LTS Release: 22.04 Codename: jammyuname -a Linux yqw-Lenovo-XiaoXinPro-13ARE-2020

手把手从零开始搭建远程访问服务

远程访问服务工具——FRP frp 是一个能够实现内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网的服务器来转发。 资源链接 根据自己服务型号和操作系统来选取对应的文件&#xff0c;不知道的…