vue3项目初始化

初始化项目newsapp

VSCode 打开终端,newsapp项目目录,可自定义

vue create newsapp

有提示“因为在此系统上禁止运行脚本”的话,请执行

set-ExecutionPolicy RemoteSigned

执行后再重复执行vue create newsapp

注意选择Vue 3版本

测试项目是否正常可运行:

先进入newsapp目录,用cd newsapp命令进入;

运行web服务:npm run serve

按运行提示的访问地址用浏览器打开如:http://localhost:8080/(此处是示例,运行多个项目地址端口不一样)

安装基础依赖包

进入到newsapp目录中,执行以下几个基础依赖包的安装命令

yarn add typescript

yarn add vue-router

yarn add axios

yarn add element-plus

yarn add vuex

注意,安装完依赖包,需要重新npm run serve重启web服务才能生效!

使用router

1.在src目录中创建router目录,创建index.js文件

router/index.js代码:

import {createRouter, createWebHashHistory} from 'vue-router'
const routes = [{path: '/',
name: 'home',
component: () => import('../components/HelloWorld.vue')
}]
const router = createRouter({history: createWebHashHistory (),routes})
export default router

2.使用路由及axios功能,修改main.js

main.js代码:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
const app =createApp(App)
app.use(router)
app.use(axios)
app.mount('#app')

App.vue文件中添加<router-view></router-view>,例如下面

<template><router-view></router-view>
</template>
<script>export default {name: 'App'}</script>

其它需要使用的组件或包,请参考使用说明进行安装并把相关代码添加到main.js等文件中。

在浏览器测试地址中刷新测试一下路由是否正常生效。

关于备份

编写的代码,在上机结束前进行备份,以便一下次继续做实验,可用git提交到自己的帐号中备份,或把项目打包成压缩包形式(打包定不要把node_modules目录打包进去,这个是依赖包,又大文件数又多,可以通过npm install进行再次安装的),再上传到自己的网盘、邮箱等帐号备份。

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

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

相关文章

vector类详解及重要函数实现

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 今日主菜&#xff1a;vector类 主厨&#xff1a;邪王真眼 所属专栏&#xff1a;c专栏 主厨的主页&#xff1a;Chef‘s blog 坚持下去&#xff0c;成功不是目的&a…

【每周赠书活动第1期】Python编程 从入门到实践 第3版(图灵出品)

编辑推荐 适读人群 &#xff1a;本书适合对Python感兴趣的所有读者阅读。 编程入门就选蟒蛇书&#xff01; 【经典】Python入门经典&#xff0c;常居Amazon等编程类图书TOP榜 【畅销】热销全球&#xff0c;以12个语种发行&#xff0c;影响超过 250 万读者 【口碑】好评如潮…

手撕算法-删除有序数组中的重复项 II

描述 例如&#xff1a;输入&#xff1a;nums [1,1,1,2,2,3]输出&#xff1a;5, nums [1,1,2,2,3]解释&#xff1a;函数应返回新长度 length 5, 并且原数组的前五个元素被修改为 1, 1, 2, 2, 3。 不需要考虑数组中超出新长度后面的元素。 分析 双指针, fast, slow。nums[…

Python并发编程:线程和多线程的使用

前面的文章&#xff0c;我们讲了什么Python的许多基础知识&#xff0c;现在我们开始对Python并发编程进行学习。我们将探讨 Python 中线程和多线程的使用。帮助大家更好地理解如何使用这种技术。 目录 1. 线程&#xff08;Threads&#xff09; 1.1 Python 中的线程工作原理 …

CSP-S 真题:格雷码

原文链接&#xff1a;CSP-S 真题第二讲&#xff1a;格雷码 说明&#xff1a;CSDN和公众号文章同步发布&#xff0c;需要第一时间收到最新内容&#xff0c;请关注公众号【比特正传】。 一、题目背景 题目来源&#xff1a;CSP-S 2019年 T1 题目考察点&#xff1a;递归、搜索 …

C语言:实现使用malloc函数模拟开辟一个二维数组

目录 解题思路 步骤一&#xff1a;开辟空间 步骤二&#xff1a;使用空间 步骤三&#xff1a;释放空间 图解 完整代码展示&#xff1a;注意看注释 在C语言编程中&#xff0c;处理多维数据结构时&#xff0c;我们通常会遇到二维数组。然而&#xff0c;对于特定大小或需要动…

Java秘笈

一、缩略 二、详版 【CDN分发】||----【跳板机】---SSH&#xff1a;(^_^) 管理员/运维Iptables【防火墙】要求&#xff1a;HA||----【等保系统】||----【蜜罐系统】【反向代理】Nginx/Lvs【静态服务器】【边际路由】要求&#xff1a;HA||Gateway/Zull【Api网关】要求&#xff1…

JS精度计算的几种解决方法,1、转换成整数计算后再转换成小数,2、toFixed,3、math.js,4、bignumber.js,5、big.js

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、转换成整数计算后再转换成小数二、toFixed三、math.js四、bignumber.js五、big.js总结 前言 原始计算 let aNum 6.6 0.3;let bNum 6.6 - 0.2;let cNum 6.6 * 0.3;let dNum 6.6 / 0.2;console.log(…

Linux之基础IO

1.C语言中的文件操作函数 文件的打开 path为文件路径&#xff0c;mode为打开方式&#xff0c;它们都是字符串。 代码演示&#xff1a; 此时&#xff0c;当前目录中并没有log.txt文件&#xff0c;但是没关系&#xff0c;fopen会在当前路径下创建log.txt文件。 简单来说&#xf…

分享 | 使用Virtuoso VCPVSR工具基于标准单元的布局布线流程

​ 本节内容 导览 一、准备工作 二、运行VCP前的配置 三、VCP的布局规划 四、VCP的自动摆放 五、VSR的自动绕线 分享使用Virtuoso GXL Custom Digital Placer(VCP) & Space-based Router(VSR)工具进行基于纯数字Standard-Cell布局布线的操作流程。 VCP&VSR演…

【MySQL】2.MySQL数据库的基本操作

目录 数据库基本操作 查看数据库信息 查看数据库结构 显示数据表的结构&#xff08;字段&#xff09; 常用的数据类型 数据库管理操作 SQL语句概述 SQL分类 1.DDL&#xff1a;数据定义语言 1.1创建数据库和表 创建数据库 创建数据表 1.2删除数据库和表 删除数据表…

【数字图像处理matlab系列】使用数组索引进行简单的图像裁剪、二次取样操作

【数字图像处理matlab系列】使用数组索引进行简单的图像裁剪、二次取样操作 【先赞后看养成习惯】求点赞+关注+收藏! pout.tif是一张matlab自带的图片,图像尺寸是291*240,使用imread读取该图像>> a = imread(pout.tif); >> imshow(a);对图像a进行上下翻转操作,…

国务院办公厅发布:政府类网站网页设计规范(试行)

国务院办公厅于2019年12月发布了《政府类网站网页设计规范&#xff08;试行&#xff09;》。该规范的发布旨在统一政府类网站的设计风格和标准&#xff0c;提升政府网站的用户体验和可访问性&#xff0c;推动政府信息公开和服务的提升。 该规范涵盖了政府类网站的各个方面&…

【代码学习】Mediapipe人脸检测使用记录

Mediapipe&#xff0c;每秒200-300帧的实时人脸检测&#xff0c;提取画面中的人脸框&#xff0c;实现后续各种应用&#xff1a;人脸属性识别、表情识别、关键点检测、三维重建、增强现实、AI换妆等 code&#xff1a;google/mediapipe: Cross-platform, customizable ML soluti…

Java异常类型及异常处理方式

本章学习内容&#xff1a;使用异常处理机制&#xff0c;对程序运行过程中出现的异常情况进行捕捉并处理. 目录 &#x1f4cc; Java异常概述 &#x1f4cc; Java异常体系结构 &#x1f4cc; 常见的异常 &#x1f4cc; 异常处理 &#x1f4cc; Java异常概述 ○ 异常的概念&…

数据库管理-第163期 19c重建ADG的两个方法(20240323

数据库管理163期 2024-03-23 数据库管理-第163期 19c重建ADG的两个方法&#xff08;20240323&#xff09;1 ORA-081032 新办法1 关闭MRP2 恢复备库3 其他操作4 启动备库5 启动MRP 3 老办法4 预告总结 数据库管理-第163期 19c重建ADG的两个方法&#xff08;20240323&#xff09;…

vscode配置c/c++调试环境

本文记录win平台使用vscode远程连接ubuntu server服务器下&#xff0c;如何配置c/c调试环境。 过程 1. 服务器配置编译环境 这里的前置条件是vscode已经能够连接到服务器&#xff0c;第一步安装编译构建套件&#xff08;gcc、g、make、链接器等&#xff09;和调试器&#xf…

vue3之生命周期

Vue3之生命周期 主要Vue生命周期事件被分为两个钩子&#xff0c;分别在事件之前和之后调用&#xff0c;vue应用程序中有4个主要事件(8个钩子)&#xff1a; 创建 ---- 在组建创建时执行挂载 ---- DOM被挂载时执行更新 ---- 当响应数据被修改时执行销毁 ---- 在元素被销毁之前立…

深度学习模型部署(十一)TensorRT写Plugin

什么是plugin & 有什么用&#xff1f; TensorRT的一种机制&#xff0c;以.so的形式插入到网络中实现某些算子。 作用&#xff1a; 实现TensorRT不支持的层替换性能不好的层手动进行图优化算子融合 写Plugin就是自己写算子的CUDA kernel实现。 Plugin与其他layer之间无法…

【数据结构】顺序表和链表详解顺序表和链表的实现

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;数据结构_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.线性表 1.1 顺序表 1.1.1 概念及结构 1.1.2 静态顺序表 1.1.3 动态顺序表 1.2 链表 1.2.1 链表的概念及结构 1.2.2 链表…