使用vue-cli脚手架工具搭建vue工程项目以及配置路由

vue-cli是用node编写的命令行工具,我们需要进行全局安装。打开命令行终端,输入如下命令:

1

$ npm install -g vue-cli

 这里使用的是npm,为了开发的便利,推荐安装cnpm,这样运行指令会更迅速,安装命令如下:

1

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

 注意:确保node的版本为4.x、5.x及以上。

我们可以使用vue-cli来快速生成一个基于Webpack构建的项目,打开命令行终端,通过cd指令定位到指定的路径下,输入如下命令:

1

$ vue init webpack vueExamp

 执行命令后,会有一些命令行交互,我们可以初始化一些项目信息,如下图所示:

项目初始化完成以后,会在当前目录下生成如下目录结构,进入vueExamp目录,安装项目的依赖,执行如下命令:

1

$ npm install

 依赖安装完成以后,来了解一下项目的目录结构:

启动项目,执行如下命令:

1

$ npm run dev

 如果运行中报如下错误:Resolve error: unable to load resolver "node"

执行如下命令:

1

$ cnpm  install --save-dev eslint-import-resolver-node

 默认端口号是8080,打开浏览器,输入http://localhost:8080,生成的页面如下图所示:

这样,最基本的框架就已经搭建完毕了,接下来就是配置路由以及编写组件了。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

描述符——设备描述符

文章目录 描述符定义描述符实现描述符含义 描述符定义 描述符实现 /*** brief Device descriptor.*/ typedef struct __attribute__ ((packed)) {uint8_t bLength ; /**< Size of this descriptor in bytes. */uint8_t bDescriptorType ; /**< DEVICE D…

基于springboot+vue的大学生创新创业系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

Vue组件库Element

目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…

Chatbot UI集成LocalAI实现自托管的ChatGPT

本文比惯例提前了一天发&#xff0c;因为明天一早&#xff0c;老苏就踏上回乡的路了&#xff0c;三年没回老家&#xff0c;这次专门请了 2 天的假 难得回家&#xff0c;打算多陪陪家人&#xff0c;和多年不见的朋友聚聚&#xff0c;当然如果有网络条件&#xff0c;还是会正常发…

基于STM32的蔬菜大棚温湿度智能控制系统设计

一、前言 随着人们对健康和可持续生活方式的关注不断增加&#xff0c;蔬菜大棚成为了现代农业中的重要组成部分。蔬菜大棚提供了一个受控的环境&#xff0c;使得农民能够在任何季节种植蔬菜&#xff0c;并根据需要进行调节。为了实现最佳的蔬菜生长和产量&#xff0c;对温度和…

RedisTemplate出现\xac\xed\x00\x05t\x00\x0f前缀解决

问题描叙 出现这种乱码前缀的原因是没有进行序列化&#xff0c;因此导致在传输过程出现乱码问题&#xff0c;存到数据库&#xff0c;发现 key,hash key/value 都有 \xAC\xED\x00\x05t\x00 前缀。RedisTemplate类中默认是没有设置序列化的。 解决方法 设置RedisTemplate的序列…

微机原理与接口技术

一、微型计算机系统概述二、总线 总线(Bus)&#xff1a;是连接计算机各部件的一组公共信号线;总线上能同时传送二进制信息的位数称为总线宽度。 优点&#xff1a;大大减少传输线数目&#xff0c;结构简单&#xff0c;便于扩充 总线按传送信息分类:地址总线、数…

华为小型智能园区网络解决方案

云时代来袭&#xff0c;数字化正在从园区办公延伸到生产和运营的方方面面&#xff0c;智慧校园&#xff0c;柔性制造&#xff0c;掌上金融和电子政务等&#xff0c;面对各种各样的新兴业态的涌现&#xff0c;企业需要构建一张无所不联、随心体验、业务永续的全无线网络&#xf…

burpsuite只有intruder中文乱码

burpsuite 只有intruder模块中文乱码 现象&#xff1a;解决方案 现象&#xff1a; 在proxy、repeater等模块下中文均可正常显示&#xff0c;如下图&#xff1a; 在intruder模块&#xff0c;中文显示乱码 解决方案 在payloads标签下payload processing中添加“Decode”

web服务基础

前言&#xff1a;web服务怎么做&#xff0c;怎样使用&#xff0c;这是一个长期的任务 1、DNS解析原理 在windows 客户端查看本地缓存的DNS解析记录 C:\Users\86157>ipconfig /displaydns #其中这两个字符之间会有空格 在windows11 中的命令行运行结果如下 清除win客户端…

【区块链 | DID】白话数字身份

《十四五数字经济发展规划》提出建立健全政务数据共享协调机制&#xff0c;加快数字身份统一认证和电子证照、电子签章、电子公文等互信互任&#xff0c;推进发票电子化改革&#xff0c;促进政务数据共享、流程优化和业务协同。在数字经济逐渐成形的背景下&#xff0c;推进数字…

Elasticsearch 集群时的内部结构是怎样的?

Apache Lucene : Flush, Commit Elasticsearch 是一个基于 Apache Lucene 构建的搜索引擎。 它利用 Lucene 的倒排索引、查询处理和返回搜索结果等功能来执行搜索。 它还扩展了 Lucene 的功能&#xff0c;添加分布式处理功能以支持大型数据集的搜索。 让我们看一下 Apache Luc…

Learn Prompt- Midjourney Prompt:Prompt 提示语

基础结构​ 一个基本的提示可以简单到一个单词、短语或表情符号。非常短的提示将在很大程度上依赖于 Midjourney 的默认样式。 完整 prompt&#xff1a;可以包括一个或多个图像链接、多个文本短语或单词&#xff0c;以及一个或多个后缀参数 Image Prompts: 可以将图像 URL 添加…

比特币的蒙提霍尔问题

把钱放在嘴边 我们在比特币上建立了蒙提霍尔问题模拟。 如果您知道概率谜题的正确答案&#xff0c;不仅炫耀您的数学技能&#xff0c;还会获得金钱奖励。 它完全无需信任地在链上运行。 蒙提霍尔问题 蒙提霍尔问题&#xff08;三门问题&#xff09;是一个以蒙提霍尔命名的概率…

数据一致性:核心概念与实现策略

在当今的信息时代&#xff0c;数据已经成为了企业的核心资产之一。然而&#xff0c;随着数据量的不断增长和应用场景的不断扩大&#xff0c;如何保证数据的一致性成为了一个重要的挑战。数据一致性不仅关系到系统的正确性和可靠性&#xff0c;也直接影响到用户的体验和企业的业…

图像绘制-线段、矩形、圆形、椭圆等

在实际运用中&#xff0c;我们会在图片上添加一些图形&#xff0c;比如目标检测时在物体周围画个矩形框&#xff0c;人脸识别中将人脸的关键点用点&#xff08;圆形&#xff09;标出来。 OpenCV常用的形状绘制方法&#xff1a; 线段的绘制 线段的绘制是使用cv2.line(img, pt…

C++QT day11

绘制时钟 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent>//绘制事件类 #include <QDebug>//信息调试类 #include <QPainter>//画家类 #include <QTimer>//定时器类 #include <QTime> #include &…

积跬步致千里 || 可视化动图展示

可视化动图展示 目前只能在 jupyter notebook 中测试成功 %matplotlib notebook import numpy as np import matplotlib.pyplot as plt import timen 500 data np.random.normal(0,1,n)fig plt.figure() ax fig.add_subplot(111)fig.show() fig.canvas.draw()for i in ra…

网络编程-TCP协议(客户端和服务端)

需要了解UDP协议的&#xff0c;可以看往期文章 https://flypeppa.blog.csdn.net/article/details/133273416 TCP/IP参考模型 代码案例 服务端代码 package com.hidata.devops.paas.udp;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr…

Android之AMessage机制存/取原理(四十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…