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.hqwc.cn/news/564351.html

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

相关文章

CSS案例-2.简单版侧边栏练习

效果 知识点 标签显示模式 块级元素 block-level 常见元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。 特点: 独占一行长度、宽度、边距都可以控制宽度默认是容器(父级宽度)的100%是一个容器及盒子,里面可以放行内或者…

24计算机考研调剂 | 【官方】山东工商学院

山东工商学院 考研调剂招生信息 招生专业&#xff1a; 学院概况&#xff1a; 计算机科学与技术学院始建于1999年&#xff0c;拥有计算机科学与技术一级学科硕士点,在2022软科中国最好学科排名中&#xff0c;计算机科学与技术学科位列全国第104位。在2022年“软科”中国大学专…

ShardingSphere水平分表——开发经验(2)

1. 什么场景下分表&#xff1f; 数据量过大或者数据库表对应的磁盘文件过大。 Q&#xff1a;多少数据分表&#xff1f; A&#xff1a;网上有人说1kw&#xff0c;2kw&#xff1f;不准确。 1、一般看字段的数量&#xff0c;有没有包含text类型的字段。我们的主表里面是不允许有t…

【索引失效】MySQL索引失效场景

1、对索引使用左或者左右模糊匹配 当我们使用左或者左右模糊匹配的时候&#xff0c;也就是 like %xx 或者 like %xx% 这两种方式都会造成索引失效。 比如下面的 like 语句&#xff0c;查询 name 后缀为「林」的用户&#xff0c;执行计划中的 typeALL 就代表了全表扫描&#xff…

(一)基于IDEA的JAVA基础7

关系运算符 运算符 含义 范例 结果 等于 12 false &#xff01; 不等于 1&#xff01;2 true > 大于 1>2 false < 小于 …

Vue 计算属性和watch监听

1.1.计算属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!-- 引入vue.js --><script src"node_modules/vue/dist/vue.js"></script> </h…

raise PyAutoGUIException! ! !

在了解pyautogui时&#xff0c;你是否遇到过这样的情况&#xff1a; y pyautogui.locateOnScreen(kk.png) print(y) 在信心满满下输入完成后选择直接运行&#xff0c;结果却是抛出异常的尴尬。 raise PyAutoGUIException( pyautogui.PyAutoGUIException: PyAutoGUI was unable…

Django之Celery篇(一)

一、介绍 Celery是由Python开发、简单、灵活、可靠的分布式任务队列,是一个处理异步任务的框架,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务。 Celery侧重于实时操作,但对调度支持也很好,其每天可以处理数以百万计的任务。特点: 简单:熟悉…

Python文件读写操作

文件操作注意点 注意点&#xff1a; 1. for line in file --> 会将偏移量移到末尾 2. buffering1 --> 缓冲区中遇到换行就刷新&#xff0c;即向磁盘中写入 3. 读操作结束后&#xff0c;文本偏移量就会移动到读操作结束位置 """编写一个程序,循环不停的写入…

AtCoder ABC346 A-E题解

比赛链接:ABC346 Problem A: 签到题。 #include <bits/stdc.h> using namespace std; const int maxn105; int A[105],B[105]; int main(){int N;cin>>N;for(int i1;i<N;i)cin>>A[i];for(int i1;i<N;i){B[i]A[i1]*A[i];cout<<B[i]<<end…

GeoAI

GeoAI 是人工智能 (AI) 与空间数据、科学和地理空间技术的集成&#xff0c;以增进对空间问题的理解和解决。GeoAI 包括应用传统人工智能技术&#xff0c;通过从结构化和非结构化数据中提取、分类和检测信息来生成空间数据。GeoAI 也是空间显式人工智能技术的使用&#xff0c;旨…

JMeter并发工具的使用

视频地址&#xff1a;Jmeter安装教程01_Jmeter之安装以及环境变量配置_哔哩哔哩_bilibili 一、JMeter是什么 JMeter是一款免安装包&#xff0c;官网下载好后直接解压缩并配置好环境变量就可以使用。 环境变量配置可参考&#xff1a;https://www.cnblogs.com/liulinghua90/p/…