vue-创建vue项目记录

安装node.js

先安装node.js的运行环境
node.js的下载地址

安装后就可以使用npm命令

1、清除npm缓存:npm cache clean --force
2、禁用SSL:npm config set strict-ssl false
3、手动设置npm镜像源:npm config set registry https://registry.npm.taobao.org/

安装vue

全局安装vue cli:npm install -g @vue/cli

若出现npm与node版本不匹配问题,则通过npm -g install npm@x.xx.x(错误提示对应版本号)

创建项目

找到要建项目文件夹:

进入命令行界面

输入:vue create xxx(项目名)

方向键控制到最后一个回车

空格勾选如下所示

回到最上enter选择3.x版本

成功!

运行(命令行界面运行/pycharm终端运行):

第一个是本地ip,第二个是外网ip,而8080就是计算机对外开放服务的端口,外部访问8080端口,就会得到这个网页。如果你的电脑和另外一台电脑是用同一个路由器上网的,另一台电脑可以通过第二个ip访问你的网页。

打开浏览器输入显示的网址:http://localhost:8081/

命令行界面ctrl+c结束运行

node_modules:存放用包管理工具下载安装的包的文件夹

public:存放静态资源        其中index.html为vue项目入口。

src:资源和源码文件        assets:用于存放图片,图标

                                        components:存放vue文件,网页样式

                                        App.vue:vue组件入口。写的vue文件,要被App.vue里引用,才可以被index.html调用。

main.js:vue框架的程序入口文件,主要放置项目中经常会用到的插件和CSS样式之类

router:路由

下载Element UI组件库:

Element UI教程:

安装:pycharm终端输入:npm install element-plus --save

安装成功需要在main.js中注册:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.use(store)
app.use(router)app.mount('#app')

 写前端代码

在HelloWorld.vue文件中写入element UI样式代码,OK~~~

node_modules【基于知识图谱的前后端(vue+django)分离的问答系统的设计与实现(二):前端搭建与插件配置】_知识问答系统前端-CSDN博客

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

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

相关文章

java8特性 stream流中map函数的使用

map 函数的作用就是针对管道流中的每一个数据元素进行转换操作。 例如 将集合中的每一个字符串&#xff0c;全部转换成大写&#xff01; List<String> collect alpha.stream().map(String::toUpperCase).collect(Collectors.toList()); //上面使用了方法引用&#xf…

10.5.8 优化 InnoDB 磁盘 I/O

如果您遵循了针对 SQL 操作的数据库设计和调优技术的最佳实践&#xff0c;但由于磁盘 I/O 活动频繁&#xff0c;数据库仍然很慢&#xff0c;请考虑这些磁盘 I/O 优化。如果 Unix top 工具或 Windows 任务管理器显示您的工作负载的 CPU 使用率低于 70%&#xff0c; 则您的工作负…

揭密无文件勒索病毒攻击,思考网络安全新威胁

前言 最近几年基于无文件攻击的网络犯罪活动越来越多&#xff0c;一些网络犯罪团伙开发了各种基于无文件攻击的恶意软件攻击套件&#xff0c;这些恶意软件攻击套件可用于勒索病毒、挖矿病毒、RAT远控、僵尸网络等恶意软件&#xff0c;在过去的几年时间里&#xff0c;无文件感染…

L1-8 静静的推荐(Python)

天梯赛结束后&#xff0c;某企业的人力资源部希望组委会能推荐一批优秀的学生&#xff0c;这个整理推荐名单的任务就由静静姐负责。企业接受推荐的流程是这样的&#xff1a; 只考虑得分不低于 175 分的学生&#xff1b;一共接受 K 批次的推荐名单&#xff1b;同一批推荐名单上…

Day35:安全开发-JavaEE应用原生反序列化重写方法链条分析触发类类加载

目录 Java-原生使用-序列化&反序列化 Java-安全问题-重写方法&触发方法 Java-安全问题-可控其他类重写方法 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&…

pandas plot函数:数据可视化的快捷通道

一般来说&#xff0c;我们先用pandas分析数据&#xff0c;然后用matplotlib之类的可视化库来显示分析结果。而pandas库中有一个强大的工具--plot函数&#xff0c;可以使数据可视化变得简单而高效。 1. plot 函数简介 plot函数是pandas中用于数据可视化的一个重要工具&#xff0…

WPF Window 窗口 常用属性

window窗口属性 属性 定义 属性值 注解 WindowStartupLocation 获取或设置窗口首次显示时的位置。 一个 WindowStartupLocation 值&#xff0c;指定窗口首次显示时的顶边/左边位置。 默认值为 Manual。 将 WindowStartupLocation 属性设置为 Manual 使窗口按其 Left 和 To…

MySQL中IF()、IFNULL()、NULLIF()、ISNULL()、CASE函数的使用详解

1、IF()函数的使用 IF函数根据判断条件是否成立进行选择执行&#xff0c;成立时执行一条语句&#xff0c;不成立时执行另一条语句 语法结构&#xff1a; IF(condition, value_if_true, value_if_false) 参数说明 condition: 判断条件 value_if_true: 如果condition的结果…

凌鲨本地接口架构

本地API通过监听本地端口&#xff0c;提供http服务&#xff0c;让本地应用可以获取信息和操作凌鲨客户端。 本地API架构 #mermaid-svg-seodZa6VsI4Qc8Cj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-seodZa6VsI4…

辽宁博学优晨教育:视频剪辑培训的安全正规之路

在当今数字化时代&#xff0c;视频剪辑已成为一项炙手可热的技能。为满足广大学习者的需求&#xff0c;辽宁博学优晨教育推出了一系列专业的视频剪辑培训课程。本文将重点介绍辽宁博学优晨教育的视频剪辑培训如何在保障学员安全和学习效果方面做出了卓越的努力。 一、正规资质&…

Linux操作系统-06-进程与服务管理

使用ps命令查看进程。包括过滤进程信息 使用systemctl命令管理和运行Linux服务 进程&#xff08;Process&#xff09;&#xff1a;操作系统正在运行的应用程序。任意一个进程&#xff0c;都会消耗CPU和内存资源&#xff0c; 服务&#xff08;Service&#xff09;&#xff1a…

Word中解决插入脚注导致的分页位置错误问题

先放一个截图&#xff1a; 上面的截图中&#xff0c;样式为标题3的段落“四、固执的念头”前插入了连续型分节符&#xff0c;并且该分节符的样式为正文&#xff0c;前后的正文段落中有脚注&#xff0c;结果在分页时&#xff0c;标题3段落“四、固执的念头”后的正文段落自动进入…

python之word操作

#pip install python-docx import docx import os pathos.path.abspath(__file__) file_pathos.path.join(path,"大题.docx") print(path) print(file_path) objdocx.Document("大题.docx") #第一个段落 p1obj.paragraphs[2] # print(p1.text) #所有段落 #…

【JAVA】我和“JAVA“的细水长流,输入输出

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-Ck59fYFNNdpuGmVT {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

【Educoder数据挖掘实训】插值填充法处理遗漏值

【Educoder数据挖掘实训】插值填充法处理遗漏值 开挖 这关的介绍非常详细&#xff0c;只要看懂了基本就没有问题。 所谓插值其实就是根据已有的数据构造出函数&#xff0c;然后用这个函数来计算遗漏的数据。 比如这个题目中介绍的拉格朗日插值以及 K K K近邻。 有关拉格朗日插值…

JVM-3

HotSpot虚拟机对象 我在网上看了很多相关的文章&#xff0c;发现在创建对象和对象的结构中内容都不太一样&#xff0c;一些关键字也很不同&#xff0c;于是我通过参考《深入理解Java虚拟机》这本书&#xff0c;自己总结了一篇。 1.对象的创建 当JVM收到一条创建对象的字节码…

用定时器在单片机中实现一次性回调函数执行

在单片机中实现一个异步的一次性定时器&#xff0c;通常可以使用硬件定时器模块或者嵌入式操作系统中的定时器功能。以下是一个基于硬件定时器的实现方法&#xff0c;适用于没有操作系统的情况&#xff1a; 1.硬件定时器配置&#xff1a; 选择单片机中的一个硬件定时器&#…

计算机网络 路由器 链路层 MTU 最大传送单元 网络层

一个链路层数据帧能够承载的最大数据量&#xff0c;被称为最大传送单元&#xff08;MTU&#xff09;。 因为IP数据报&#xff0c;被封装在链路层的帧中&#xff0c;因此链路层的MTU&#xff0c;严格地限制了IP数据报的长度&#xff0c;并且在IP数据报的源与目的路径上的各段链…

全面的 DevSecOps 指南:有效保护 CI/CD 管道的关键注意事项

数字化转型时代带来了对更快、更高效、更安全的软件开发流程的需求。DevSecOps&#xff1a;一种将安全实践集成到 DevOps 流程中的理念&#xff0c;旨在将安全性嵌入到开发生命周期的每个阶段 - 从代码编写到生产中的应用程序部署。DevSecOps 的结合可以带来许多好处&#xff0…

交叉编译x264 zlib ffmpeg以及OpenCV等 以及解决交叉编译OpenCV时ffmpeg始终为NO的问题

文章目录 环境编译流程nasm编译x264编译zlib编译libJPEG编译libPNG编译libtiff编译 FFmpeg编译OpenCV编译问题1解决方案 问题2解决方案 总结 环境 系统&#xff1a;Ubutu 18.04交叉编译链&#xff1a;gcc-arm-10.2-2020.11-x86_64-aarch64-none-linux-gnu 我的路径/opt/toolch…