vue路由及参数router

目录

  • vue项目版本
    • 1、创建一个vue项目步骤 (windows环境下)。创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js、webpack、vue-cli)。cmd打开终端。
      • 三级目录

vue项目版本

1、创建一个vue项目步骤 (windows环境下)。创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js、webpack、vue-cli)。cmd打开终端。

1.1 如果还没安装node.js, 则先安装node.js ,安装完成后,查看node版本

node -v

1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.3 安装webpack

npm install webpack -g
1.4 安装vue全局脚手架,vue-cli2.x使用 npm install -g vue-cli , vue-cli3.x使用 npm install -g @vue/cli 安装, 查看vue版本: vue -V

npm install -g vue-cli
  或

npm install -g @vue/cli
1.5 准备工作做好了,开始正式创建vue项目, 创建vue项目可以选择两种方式。下面的my_vue_pro是vue项目名字

vue init webpack my_vue_pro
  或

vue create my_vue_pro
  vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录。 vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与vue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。

如果vue版本还是2.x, 从vue-cli2.x升级到最新版:先执行卸载: npm uninstall -g vue-cli , 再安装最新版 npm install -g @vue/cli

1.6 cd进入项目

cd my_vue_pro
1.7 添加需要的依赖包,比如添加vue路由vue-router依赖包,可以使用 npm install vue-router , 或者 vue add router

npm install vue-router
  或

vue add router
1.8 安装所有依赖包, npm install 。卸载依赖包: npm uninstall xxx

cnpm install
1.9 运行项目,查看package.json文件中的scripts脚本中的运行方式, npm run dev 或 npm run serve

npm run serve

三级目录

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

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

相关文章

android自定义时间选择

自定义时间选择器,可以更改到年月日,时分秒 一、自定义DatePicker public class CustomDatePicker {/*** 定义结果回调接口*/public interface ResultHandler {void handle(String time);}public enum SCROLL_TYPE {HOUR(1),MINUTE(2);SCROLL_TYPE(int …

[情商-9] :聊天中的主动性问题

目录 前言: 一、性别差异对女生主动性的制约? 二、中国传统文化对女生主动性的制约? 三、男生如何在交往和聊天中发挥自己的主动性 四、交往中如何让心仪的女生提升她们的主动性 前言: 聊天中谁主动?如何让心仪的…

【Web】CTFSHOW命令执行刷题记录1

目录 web29 web30 web31 web32 web33 web34 web35 web36 web37-39 web40 web41 (y4✌脚本) web42 -44 web45 web46 -49 web50 web51 web52 web53 web54 期末复习不了一点,不如做点旧题醒一醒手感。每一题都尽量用不同payl…

@FunctionalSpringBootTest 和@SpringBootTest注解的区别

FunctionalSpringBootTest 和 SpringBootTest 是Spring框架中用于测试的两个不同注解。下面是它们之间的主要区别: 用途和范围: SpringBootTest:这个注解用于需要测试Spring应用程序上下文的场合。它会加载完整的应用程序上下文,适…

C#,C++实现:华为经典笔试题_菜单组合种类题目

题目: 菜单组合种类。为了科学饮食,控制每天摄入的卡路里数。最低值应不低于kcal_low, 最高值应不高于kcal_high。现在给出n个菜品的卡路里数,菜品可以重复选择。为满足总共摄入的卡路里数在规定的区间,可以有多少种菜品选择方式&…

插件和工具汇总

插件和工具汇总 【一】MyBatis Log插件【二】热部署【三】一些快捷键 【一】MyBatis Log插件 能够自动拼接参数生成执行的SQL语句,可以更清晰看到执行本次接口调用的所有sql执行条数。在我们执行myabtis的时候,有的时候报错知道哪里错了,但是…

亚马逊,速卖通,美客多卖家怎么才能安全及有效的积累产品的评论

测评补单对于亚马逊、速卖通等平台卖家来说,是一种重要的运营手段之一,通过测评补单快速增加产品的销量、评论数量,提升排名,从而打造爆款产品。 测评养号的好处包括: 1. 提升店铺信誉,制造爆款&#xff…

【大模型】大型模型飞跃升级—文档图像识别领域迎来技术巨变

写在前面 2023年12月31日,第十九届中国图象图形学学会青年科学家会议在广州举行,由中国图象图形学学会主办。 该会议的目标是促进青年科学家之间的交流与合作,以提升我国在图像图形领域的科研水平和创新能力。 由中国图象图形学学会和上海合合…

Centos 7 安装 ffmpeg

文件无法下载时 可以从这里下载需要的插件 安装插件下载地址:ffmpeg安装依赖插件包 压缩包中将opus-1.3.1.tar.tar 改为opus-1.3.1.tar.gz 即可 用到的命令: tar xzvf fileName.tar.gz 解压.tar.gz格式文件 unzip fileName.zip 解压 zip格式文件1.安装Gcc编译依赖 yum insta…

我在考 pmp,想知道如何去学习 pmbok?

PMP新版大纲加入了ACP敏捷管理的内容,而且还不少,敏捷混合题型占到了 50%,很多人都觉得考试难度提升了,我最开始备考的时候也被折磨过一段时间,但是后面还是找到了方法,3A通过了考试,也算有点经…

【EAI 005】EmbodiedGPT:通过具身思维链进行视觉语言预训练的具身智能大模型

论文描述:EmbodiedGPT: Vision-Language Pre-Training via Embodied Chain of Thought 论文作者:Yao Mu, Qinglong Zhang, Mengkang Hu, Wenhai Wang, Mingyu Ding, Jun Jin, Bin Wang, Jifeng Dai, Yu Qiao, Ping Luo 作者单位:The Universi…

Object.assign()

目录 1、Object.assign()是什么? 2、Object.assign()用法: 3、Object.assign()用法示例: 3.1 目标对象和源对象无重名属性 : 直接合并 3.2 目标对象和源对象有重名属性 : 后面的覆盖前面的 3.3 有多个源对象: 源对象往target上合并&…

MyBatis:自定义 typeHandler 处理枚举类型

MyBatis 枚举类型typeHandler 枚举类型 枚举类型,在 Java 中属于基本数据类型,而不是构造数据类型,用于声明一组命名的常数。枚举可以根据 Integer 、Long 、Short 或 Byte 中的任意一种数据类型来创建一种新型变量。这种变量可以设置为已经…

npm安装vue,添加淘宝镜像

如果是第一次使用命令栏可能会遇到权限问题。 解决vscode无法运行npm和node.js命令的问题-CSDN博客 安装 在vscode上面的导航栏选择terminal打开新的命令栏 另外可能会遇到网络或者其他的问题,可以添加淘宝镜像 npm install -g cnpm --registryhttps://registry.…

Appium,多应用程序平台的 UI 自动化

Appium是一个开源的移动应用程序自动化测试工具,可以用于跨平台的UI自动化,包括iOS、Android、Web和Windows应用程序。它基于WebDriver协议,支持多种编程语言,如Java、Python、Ruby,Javascript、C#等。 Appium的设计理念是“一次…

Android studio GridView应用设计

一、xml布局文件设计: <GridViewandroid:id="@+id/gridView"android:layout_width="match_parent"android:layout_height="match_parent"tools:layout_editor_absoluteX="1dp"tools:layout_editor_absoluteY="1dp"andr…

websocket: 了解并利用nodejs实现webSocket前后端通信

目录 第一章 前言 1.1 起源 1.2 短轮询与长轮询 1.2.1 短轮询 1.2.2 长轮询 1.2.3 长连接&#xff08;SSE&#xff09; 1.2.4 websocket 第二章 利用Node以及ws创建webSocket服务器 2.1 创建ws服务器&#xff08;后端部分&#xff09; 2.1.1 了解一下 2.1.2 代创建W…

从研发转销售,90后联合创始人分享从 0 到 1 开拓市场的秘诀

小 T 导读&#xff1a;在去年涛思数据举办的 TDengine 开发者大会上&#xff0c;侯江燚以联合创始人的身份登台演讲&#xff0c;将自己对于开源商业化的独特观点娓娓道来&#xff0c;赢得阵阵掌声。今年是他加入涛思数据的第五年&#xff0c;从放弃读博选择成为一名研发&#x…

“To-Do Master“ GPTs:重塑任务管理的趣味与效率

有 GPTs 访问权限的可以点击链接进行体验&#xff1a;https://chat.openai.com/g/g-IhGsoyIkP-to-do-master 部署私人的 To-Do Master 教程&#xff1a;https://github.com/Reborn14/To-Do-Master/tree/main 引言 在忙碌的日常生活中&#xff0c;有效地管理日常任务对于提高生…

K2P路由器刷OpenWrt官方最新版本固件OpenWrt 23.05.2方法 其他型号的智能路由器OpenWrt固件刷入方法也基本上适用

最近路由器在开机时总出问题,于是就那他来开刀,直接刷一个OpenWrt官方最新版本的固件, 刷其他第三方的固件总是觉得不安全, 而且很多第三方固件都带了些小工具,始终会有安全隐患, 而且占用内存空间太多,本来这个东西就没有多少内存,于是就干脆刷一个官方的原始固件(才6.3M, 相…