当前位置: 首页 > news >正文

【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

Vue CLI

创建Vue CLI项目

【步骤】

  1. 命名项目空间:在电脑里创建文件夹,用于存储所有项目;
  2. 定位项目空间:在"CMD窗口"里定位到工程的项目空间上;
    • 方法1:(a)用"WIN+R"打开运行窗口,输入"CMD"进入"CMD窗口";(b)输入项目空间所在盘符(如"f:")后回车;©输入"cd 根目录路径(可拖拽文件夹到CMD窗口)"后按"enter"键即可;
    • 方法2:(a)打开项目空间所在文件夹;(b)"ALT+D"输入"CMD"后按"enter"键即可;
  3. 创建项目第一步:在"CMD窗口"输入"vue create 项目名称"后按"enter"键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格);
  4. 创建项目第二步:用"↑"键和"↓"键进行选择,选择选项(“Manually select features”)后按"enter"键进入下一页面;
  5. 创建项目第三步:用"↑"键和"↓"键选择,"space"键修改,选"Babel"、"Router"、"Vuex"后按"enter"键进入下一页面;
  6. 创建项目第四步:选"2.x"后按下回车,出现"(Y/n)"继续按"enter"键进入下一页面;
  7. 创建项目第五步:出现"?Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻译:你要将文件放到哪里?),选择第二项("In package.json")后按"enter"键,出现"(y/N)",继续按"enter"键即可;
  8. 加载相关的文件:此时会自动加载相关文件,加载完毕后出现"Successfully created project 项目名称."则表示项目创建成功;

【注意】

  1. 相关的文件最好不要有中文和空格;
  2. 出现"error"相关,关掉重来试试;

启动Vue CLI项目

【步骤】

  1. 用软件"IDEA"打开 "node.js"创建好的项目;
  2. 在软件左下角找到"Terminal"选项卡并打开;
  • 若定位是在项目的根目录上则进行下一步;
  • 若没定位在项目的根目录上定位后下一步;
  1. 输入"npm run serve"后回车,等待加载即可;
  2. "Compiled successfully in XXXms"代表成功;

【说明】

  1. 启动Vue ClI项目也可通过"CMD窗口"这样的方式来完成;
  2. 启动成功的提示还包括"http://localhost:8080"这样的网址;
  3. CMD 窗口中,按下"Ctrl + C" 即可停止已启动的项目;

解析Vue CLI项目

文件夹:.idea

【说明】:软件"IDEA"管理项目时自动生成的,可以无视;

文件夹:node_modules

【说明】:当前项目所需的依赖项(自己不要操作);

【注意】:

  1. 此文件夹不会提交到git,若需要的话用以下方式下载;
  2. 若没有\缺失,可以在"Terminal"输入"npm install"来下载;

文件夹:public

【说明】:

  1. 是当前项目启动后的根路径,可存放各种资源(如.css.js.jpeg);
  2. 若此文件夹下有"1.jpg",则可通过"http://loaclhost:8080/1.jpg"查看;
文件:favicon.ico

【说明】:项目的图标,每个项目在(编译后的)根目录下有此文件,会在浏览器中显示;

文件:index.html

【说明】:当前项目的页面,在"Vue CLI"项目中有且仅有一个"HTML页面"

文件夹:src

文件夹:assets

【说明】:资源文件夹,用于存放静态资源(如 .css.jsjpeg)

【注释】:反正就是存放不随程序运行而变化的文件(如:logo.png);

文件夹:components

【说明】:存放视图组件(被其他视图组件调用的),是可能被复用的组件,并且在不同的调用中,传入的参数可以不同;

文件夹:router
文件:index.js

【说明】:路由配置文件,主要配置访问路径与视图组件的对应关系;

文件夹:store
文件:index.js

【说明】:存储共享的量的文件;

文件夹:views

【说明】:用于存放视图组件;

文件:APP.vue

【说明】:是"index.html"默认加载的视图文件;

文件:main.js

【说明】:当前项目的主".js"文件,通常用于管理一些配置;

【注释】:如:添加了某些依赖项(如:Element UI)后,可能需要在此处导入,才可以使得各".vue"文件可以使用这些依赖项;

文件:.gitignore

【说明】:用于配置哪些文件和文件夹不会提交到"git",如果此项目不提交到"git",则此文件没用;

文件:babel.config.js

【说明】:"Babel"的配置文件,通常不用关心(不需要操作);

文件:jsconfig.json

【说明】:".js"文件的配置文件,通常不用关心(不需要操作);

文件:LICENSE

【说明】:许可证协议文件,默认的项目中通常没有此文件,在"git"上公开的项目通常都包含此文件;

文件:pakcage.json

【说明】:主要配置当前项目的依赖项和项目的编译打包等配置,通常不建议手动修改;

文件:package-lock.json

【说明】:自动管理的配置文件,通常不建议手动修改;

文件:README.md

【说明】:此项目的说明文件,如果此项目提交到"git",通常会显示在"git"的此项目的主页;

【注释】:通常应该在此文件中对项目进行必要的描述(如何配置此项目、如何启动此项目、相关的注意事项等);

文件:vue.config.js

【说明】:".vue"文件的配置文件,通常不用关心(不要操作);

使用Vue CLI项目

.vue文件相关

【说明】:

  1. .vue文件的源代码可以由3大部分组成:(a).页面设计<template>;(b).样式<style>;©.脚本<script>
  2. 这3大部分并不都是必须的,例如某个.vue没有<script>也是完全正常的;

<template>】:

  1. 其直接子标签必须有且仅有一个;
  2. 在其子级里如果出现了<router-view/>,表示此区域将由另一个视图文件来负责设计;
  3. 至于是哪个视图,取决于"router/index.js"中的路由配置;

关于路由的简单配置

【说明】:

  1. router下的index.js文件是用于配置路由的,在此文件中有一个"routes"常量,其属性值是一个对象的数组;
  2. 数组元素中,可以有三个属性:
    • path:路径(不可重复);
    • name:自定义名称,此属性可不配置;
    • component:路径对应的视图组件(某个.vue文件加载得到的对象),有两种加载方式:1.在当前文件的起始位置通过"import"语法静态导入(默认导入);2.在此"component"属性值位置使用箭头函数结合"import"函数进行导入;
  3. 当显示的视图组件中使用到了<router-view />时,将根据当前访问的URL(浏览器中的路径)来决定显示哪个视图;

【例子】:

import HomeView from '../views/HomeView.vue'const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}]

Vue CLI的嵌套路由

【场景】:在开发实践中,一个项目中,可能存在这样的情况:

  1. 部分页面完全没有共用的部分,所以,在App.vue中,要仅保留一个<router-view/>标签;
  2. 但仍有部分页面存在共用的部分,所以,在其它.vue文件中,也可能需要再次使用到<router-view />
  3. 具体表现为在App.vue中只有<router-view/>,则此处实际显示的就是另外某个.vue了,但是在这些其他的.vue中也会用到<router-view/>,即出现了“嵌套”;

配置相关文件

【步骤】:

  1. 打开CMD/终端窗口并且定位到当前项目的文件夹;
  2. 输入"npm i 需要的配置 -S"按下回车 , 静待即可;
  3. 出现"added ‘数字’ packages in '数字’s"表示成功;

Element UI

【1】安装Element UI

npm i element-ui -S

【2】配置Element UI

位置:"src/main.js"

内容:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

【3】检查Element UI

说明:

  1. 在"package.json"文件中查看是否有相关依赖("'element-ui':'^2.15.9");
  2. 若有,但不能用,则删掉"node_modules",重新下载即可;

Axios

【1】安装Axios

npm i axios -S

【2】配置Axios

位置:"src/main.js"

内容:

import axios from 'axios'
Vue.prototype.axios = axios

说明:

  1. 需要注意,目标服务器可能是禁止跨域访问的(错误提示中有CORS字样),在Spring Boot工程中,可以使得启动项目的类实现WebMvcConfigurer接口;

相关文章:

【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

Vue CLI 创建Vue CLI项目 【步骤】 命名项目空间&#xff1a;在电脑里创建文件夹&#xff0c;用于存储所有项目&#xff1b;定位项目空间&#xff1a;在"CMD窗口"里定位到工程的项目空间上&#xff1b; 方法1&#xff1a;(a)用"WINR"打开运行窗口&#x…...

JavaWeb开发——html、 jsp(html 、js 、java源码)

1.前后端整体合一 在页面上&#xff0c;包含界面和业务数据处理 2.前后端分离 项目整体上分成前端部分和后端部分&#xff0c;相互独立 Jquery的核心 选择器----找到需要操作的Dom读取或者设置DOM的值或者属性事件的处理 一、jQuery选择器 $("标签类型")$("…...

javascript事件大全

在JavaScript中&#xff0c;事件是用户和浏览器之间交互的桥梁。当某些特定的事情发生时&#xff08;如用户点击按钮、鼠标移动、页面加载等&#xff09;&#xff0c;浏览器会触发相应的事件。这些事件可以被JavaScript代码捕获&#xff0c;并允许开发者执行某些操作。以下是一…...

太平医康养经理人是医疗资源的链接者

太平人寿通过构建资源整合平台&#xff0c;已成功将国际化医疗服务资源进行深度整合。目前&#xff0c;该公司已完成对英国著名医疗集团Circle Health在中国设立的首家医疗机构——圆和医疗的增资行动&#xff0c;并与新加坡知名的莱佛士私立综合医疗集团签订了业务合作协议。同…...

kafka(三)springboot集成kafka(1)介绍

基于kafka新版本 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>3.0.0</version></dependency> </dependencies> 一、kafkaProducer 1、介绍…...

Markdown语法与基础使用

在撰写博客、文档或者其他类型的文字内容时&#xff0c;Markdown语法是一种简洁、易读易写的标记语言&#xff0c;被广泛应用于互联网上的文本编辑和排版中。下面将介绍Markdown语法的基础使用方法&#xff0c;帮助你更好地利用Markdown来编写内容。 1. 标题 Markdown支持使用…...

【排序】七大排序表格比较

排序 时间复杂度 空间复杂度 最坏时间复杂度 最好时间复杂度 稳定性 插入排序 O(n) O(1) O(n) O(n) 稳定 希尔排序 O(nlogn)-O(n)取决于增量序列 O(1) O(n^1.3) O(nlogn) 不稳定 选择排序 O(n) O(1) O(n) O(n) 不稳定 冒泡排序 O(n) O(1) O(n) O(n…...

arcgis 栅格数据处理2——栅格转地级市(栅格转矢量图)

1. 获取空间分析权限&#xff08;解决无法执行所选工具问题&#xff09; 选中“自定义”中的“扩展模块” 在弹出的模块中选中能选的模块&#xff0c;此处需要选择“spatial analysis”以进行下一步分析 3. 将栅格数据转为整数型&#xff08;解决无法矢量化&#xff09; 选…...

unity学习(53)——选择角色界面--分配服务器返回的信息

好久没写客户端了&#xff0c;一上手还不太适应 1.经过测试&#xff0c;成功登陆后&#xff0c;客户端请求list_request&#xff0c;成功返回&#xff0c;如下图&#xff1a; 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…...

矩阵爆破逆向-条件断点的妙用

不知道你是否使用过IDA的条件断点呢&#xff1f;在IDA进阶使用中&#xff0c;它的很多功能都有大作用&#xff0c;比如&#xff1a;ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大&#xff0c;配合IDA-python的输出语句能够大杀特杀&#xff01; 那么本文就介绍一下这个…...

logstash和elasticsearch的几种交互接口

Logstash与Elasticsearch是两个非常流行的开源工具&#xff0c;用于处理和存储大量的日志数据。它们之间的集成非常重要&#xff0c;因为Logstash用于收集、处理和转换日志数据&#xff0c;而Elasticsearch用于存储、搜索和分析这些数据。在本文中&#xff0c;我们将详细介绍Lo…...

Golang 开发实战day02 - Print Formatting

Golang 教程02 - Print&#xff0c;Formatting Strings Go语言提供了丰富的格式化字符串功能&#xff0c;用于将数据格式化为特定格式的字符串。本课程将详细介绍Go语言中Print和Formatting Strings的用法&#xff0c;并提供代码示例供大家参考。 1.Print 类型及使用 1.1 Pr…...

2023护网蓝初面试

目录 一、渗透测试的流程 二、常见的漏洞 三、中间件漏洞 四、SQL注入原理、种类&#xff1f;防御&#xff1f;预编译原理&#xff0c;宽字节注入原理 预编译原理&#xff1a; 宽字节注入原理&#xff1a; 五、XSS的种类有哪些&#xff1f;区别&#xff1f;修复&#xf…...

Unity编辑器功能Inspector快捷自动填充数据和可视化调试

我们有时候可能需要在面板增加一些引用&#xff0c;可能添加脚本后要手动拖动&#xff0c;这样如果有大量的脚本拖动也是不小的工作量 实例 例如&#xff1a;我的脚本需要添加一个Bone的列表&#xff0c;一个个拖动很麻烦。 实现脚本 我们可以用这样的脚本来实现。 public…...

【C/C++】常量指针与指针常量的深入解析与区分(什么是const int * 与 int * const ?)

目录 一、前言 二、const 的简单介绍 三、常量指针 &#x1f50d;介绍与分析 &#x1f4f0;小结与记忆口诀 四、指针常量 &#x1f50d;介绍与分析 &#x1f4f0;小结与记忆口诀 五、总结与提炼 六、共勉 一、前言 在【C/C】的编程中&#xff0c;指针与const关键字的组合…...

零、自然语言处理开篇

目录 0、NLP任务的基础——符号向量化 0.0 词袋模型 0.1 查表/One-hot编码 0.2 词嵌入模型/预训练模型 0.2.0 Word2Vec &#xff08;0&#xff09;CBOW &#xff08;1&#xff09;Skip-gram 0.2.1 GloVe 0.2.2 WordPiece 0.2.3 BERT 0.2.4 ERNIE NLP自然语言处理&am…...

Learn OpenGL 04 纹理

纹理环绕方式 纹理坐标的范围通常是从(0, 0)到(1, 1)&#xff0c;那如果我们把纹理坐标设置在范围之外会发生什么&#xff1f;OpenGL默认的行为是重复这个纹理图像&#xff08;我们基本上忽略浮点纹理坐标的整数部分&#xff09;&#xff0c;但OpenGL提供了更多的选择&#xf…...

了解开源可视化表单的主要优势

为什么可视化表单深受大家喜爱&#xff1f;这就需要了解开源可视化表单的优势和特点了。在流程化办公深入人心的今天&#xff0c;提高办公协作效率早已成为大家的发展目标&#xff0c;低代码技术平台、开源可视化表单是提升办公协作效率的得力助手&#xff0c;一起来看看它的优…...

Redis进阶--一篇文章带你走出Redis

目录 什么是Redis?? Redis有哪些使用场景? Redis是单线程还是多线程? 为什么Redis是单线程速度还是很快?? Redis持久化 RDB机制:(Redis DataBase) [是redis中默认的持久化方式] AOF机制:(Append Only File) Redis和MySQL如何保持数据一致????…...

【框架设计】MVC、MVP、MVVM对比图

1. MVC&#xff08;Model-View-Controller&#xff09; 2. MVP&#xff08;Model-View-Presenter&#xff09; 3. MVVM&#xff08;Model-View-ViewModel&#xff09;...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...