vue框架-vue-cli

vue-cli

Vue CLI是一个官方的脚手架工具，用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架，可以帮助开发人员快速构建现代化的Web应用程序。

Vue CLI通过提供预先配置好的Webpack模板和插件，使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建Vue应用。Vue CLI还提供了一组命令行工具，如创建、构建、测试和部署Vue应用等。

使用Vue CLI可以方便地创建Vue项目，并提供了许多常用功能的预设，比如ESLint代码检查、Babel转译、单元测试工具、CSS预处理器、服务器代理等等。此外，在Vue CLI的基础上，还可以添加其他的插件来扩展其功能。

总之，Vue CLI是一款功能强大的、易于使用的工具，可以大大提高Vue应用的开发效率。

主要功能

Vue CLI 提供了一套完整的工具链，方便开发人员在创建、开发、测试和部署 Vue 项目时进行高效的操作。它简化了项目配置和管理的过程，使得开发者能够更专注于业务逻辑的实现。

  1. 快速创建项目：Vue CLI 允许你通过简单的命令行界面快速创建一个新的 Vue 项目。它提供了一系列预设模板，包括官方推荐的标准模板、PWA（渐进式 Web 应用）模板、TypeScript 模板等，可以根据需求选择合适的模板。

  2. 零配置开发服务器：Vue CLI 内置了一个开发服务器，它使用了 webpack-dev-server 来实现热重载和自动刷新等功能。在开发阶段，你可以使用 Vue CLI 启动本地开发服务器，实时预览和调试你的应用程序。

  3. 代码打包和优化：Vue CLI 可以通过 webpack 对项目进行打包和优化。它通过内置的配置文件来管理构建过程，自动处理模块依赖、代码分割、压缩、文件指纹等工作，使得最终生成的打包文件体积更小，加载速度更快。

  4. 插件系统：Vue CLI 提供了插件系统，允许你轻松地扩展项目的功能。你可以使用 Vue CLI 官方提供的插件，如 Vuex（状态管理库）、Vue Router（路由器）等，也可以开发自定义插件来满足特定需求。

  5. 单元测试和端到端测试：Vue CLI 集成了测试工具，包括 Jest（用于单元测试）和 Nightwatch（用于端到端测试）。你可以使用这些工具来编写和运行测试用例，确保项目的质量和稳定性。

  6. 项目部署：Vue CLI 提供了快速的项目部署功能。它可以帮助你生成生产环境所需的最终打包文件，并提供了构建结果分析、代码压缩等功能，以便于你将应用程序部署到生产环境中。

环境准备

Node.js支持 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

环境变量

在这里插入图片描述

在这里插入图片描述

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g

在这里插入图片描述

在这里插入图片描述

安装vue-cli

cnpm install vue-cli -g

在这里插入图片描述

检验安装

vue list

在这里插入图片描述

第一个vue-cli

E:\VUE笔记\vue-student>vue init webpack myvue'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue      // 项目名称
? Project description A Vue.js project    // 项目描述
? Author SIN   // 项目作者
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) novue-cli · Generated "myvue".# Project initialization finished!
# ========================To get started:cd myvuenpm install (or if using yarn: yarn)npm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

在这里插入图片描述

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目目录解析

demovue                   -------> 项目名称-build                 -------> 用来使用webpack打包使用build依赖            -config                -------> 用来做整个项目配置目录-node_modules          -------> 管理项目中使用依赖-src                   -------> 用来编写vue的源代码|+ assets          -------> 存放静态资源|+ components      -------> 编写vue组件|+ App.vue         -------> 根目录组件|+ main.js         -------> 根目录主入口-static                -------> 存放其他静态资源.babelrc               -------> 将es6转换为es5.editorconfig          -------> 项目编辑配置.gitignore             -------> get配置.postcssrc.js          -------> 源代码项目jsindex.html             -------> 项目主页package.json           -------> 类似pom.xml文件 依赖管理，不建议手动添加package-lock.json      -------> 对package.json文件加锁README.md              -------> 项目说明书

第一个案例

我们在vue-cli项目中主要是以vue组件形式来编写，编写位置位于：src/components下

分析：

<!-- 编写组件的页面结构。包含：组件的布局，内容的结构，定义组件的外观和展示
-->
<template></template><!-- 编写组件的JavaScript代码逻辑包含：组件的属性，组件的方法，组件的生命周期，定义组件的行为和功能等
-->
<script>export default {name: "组件名称"}
</script><!-- 编写组件的样式信息，包含：组件的Css样式，定义组件的外观和样式。
-->
<style scoped></style>

编写：

DemoTest.vue

<template><div class="box">{{vueData1}}</div>
</template><script>export default {name: "DemoTest",data(){return{vueData1: "这是使用vue-cli编写的第一个案例"}}}
</script><style scoped>.box{background-color: red;}
</style>

主入口调用

App.vue是项目的主入口，需要将编写的组件在主入口中注册并调用，才能在页面中显示出来

<template><div><!--调用组件--><DemoTest/></div>
</template><script>// 引入组件import DemoTest from "@/components/DemoTest";export default {name: 'App',components: {// 注册组件DemoTest}}
</script><style></style>

在命令行中启动项目 ： npm run dev 命令来启动项目

在这里插入图片描述

在这里插入图片描述

超链接

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，可以帮助构建单页面应用程序。通过 Vue Router，可以实现页面之间的切换、路由参数传递、嵌套路由等功能。

安装vue-router

npm install vue-router@^3.5.3

src/router下创建index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import StudentAdd from "@/components/StudentAdd";
import StudentList from "@/components/StudentList";Vue.use(Router);export default new Router({mode: 'history', // 如果需要使用 history 模式，则在此设置base: process.env.BASE_URL, // 设置 baseroutes: [{path: '/student-add',name: 'StudentAdd',component: StudentAdd},{path: '/',name: 'StudentList',component: StudentList}

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

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

相关文章

2.20 Qt day1

2.20 Qt day1

一. 思维导图 二. 消化常用类的使用&#xff0c;以及常用成员函数对应的功能 按钮类QPushButton&#xff1a; mywidget.h&#xff1a; #ifndef MYWIDGET_H #define MYWIDGET_H#include <QWidget> #include<QPushButton>//按钮类 #include<QIcon>class MyW…
阅读更多...
接了个任务：20个登录页设计，拿出N个压箱底的分享给大家。

接了个任务：20个登录页设计，拿出N个压箱底的分享给大家。

Hello&#xff0c;我是贝格前端工场&#xff0c;最近接了任务&#xff1a;20个登录设计&#xff0c;B端系统登录页看似不起眼&#xff0c;但是最难设计&#xff0c;可以说是系统的门面&#xff0c;这期分享一批给打过过眼瘾&#xff08;无源文件&#xff09;。 B端系统登录页是…
阅读更多...
文生图提示词：天气条件

文生图提示词：天气条件

天气和气候 --天气条件 Weather Conditions 涵盖了从基本的天气类型到复杂的气象现象&#xff0c;为描述不同的天气和气候条件提供了丰富的词汇。 Sunny 晴朗 Cloudy 多云 Overcast 阴天 Partly Cloudy 局部多云 Clear 清晰 Foggy 雾 Misty 薄雾 Hazy 朦胧 Rainy 下雨 Showers …
阅读更多...
无心剑中译艾米·洛威尔《盛年》

无心剑中译艾米·洛威尔《盛年》

Prime 盛年 Amy Lowell 艾米洛威尔 Your voice is like bells over roofs at dawn When a bird flies And the sky changes to a fresher color. 破晓&#xff0c;你的声音 宛如风铃飘过屋顶 鸟儿振翅飞走 天色变得更明净 Speak, speak, Beloved. Say little things For …
阅读更多...
【Vuforia+Unity】AR02-长方体物体识别

【Vuforia+Unity】AR02-长方体物体识别

1.创建模型 选择多维长方体图&#xff0c;这个长方体是生活中的真实物体的拍摄图&#xff0c;提前把6个面拍摄好并裁剪干净。 官网创建模型https://developer.vuforia.com/targetmanager/project/targets?projectId0ddbb5c17e7f4bf090834650bbea4995&avfalse 设置长宽高…
阅读更多...
【51单片机】直流电机驱动（PWM）（江科大）

【51单片机】直流电机驱动（PWM）（江科大）

1.直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极,当电极正接时,电机正转,当电极反接时,电机反转 直流电机主要由永磁体(定子)、线圈(转子)和换向器组成 除直流电机外,常见的电机还有步进电机、舵机、无刷电机、空心杯电机等 2.电机驱动…
阅读更多...
java生成pdf

java生成pdf

1.pdf预览 2.maven <!--pdf--><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.9</version></dependency><dependency><groupId>com.itextpdf</groupId>…
阅读更多...
Linux小程序--进度条

Linux小程序--进度条

目录 1.知识补充 1.1回车和换行 1.2缓冲区 2.实现倒计时 3.实现进度条 1.知识补充 1.在制作小程序进度条之前&#xff0c;我们先了解一下&#xff0c;回车换行和行缓冲区的概念。 2.动态效果&#xff0c;在同一个位置刷新不同的图像&#xff0c;实现一个倒计时的效果。…
阅读更多...
视频生成模型：构建虚拟世界的模拟器 [译]

视频生成模型：构建虚拟世界的模拟器 [译]

原文&#xff1a;Video generation models as world simulators 我们致力于在视频数据上开展生成模型的大规模训练。具体来说&#xff0c;我们针对不同时长、分辨率和宽高比的视频及图像&#xff0c;联合训练了基于文本条件的扩散模型。我们采用了一种 Transformer 架构&#…
阅读更多...
基于JavaWeb开发的小区车辆登记系统计算机毕设[附源码]

基于JavaWeb开发的小区车辆登记系统计算机毕设[附源码]

基于JavaWeb开发的小区车辆登记系统计算机毕设[附源码] &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统…
阅读更多...
harmony 鸿蒙系统学习 安装ohpm报错 ohpm install failed

harmony 鸿蒙系统学习 安装ohpm报错 ohpm install failed

一. 安装配置 DevEco Studio 安装包时报错 execute ohpm install failed. Install task failed: ArkTS 3.2.12.5. Install ArkTS dependencies failed. 解决办法 找原因&#xff0c;首先&#xff0c;我的电脑中之前安装过node&#xff0c;也许是因为这个。&#xff08;其实…
阅读更多...
【STM32 CubeMX】串口编程DMA+IDLE中断

【STM32 CubeMX】串口编程DMA+IDLE中断

文章目录 前言一、为什么要引入IDLE中断二、IDLE中断使用方式2.1 接收的三种情况2.2 函数的使用查询方式中断方式DMA方式分析一个问题 总结 前言 在嵌入式系统中&#xff0c;串口通信是一项关键的任务&#xff0c;而使用DMA&#xff08;直接内存访问&#xff09;结合IDLE中断进…
阅读更多...
[经验] 玄殿社区qq堂4.2 #笔记#媒体

[经验] 玄殿社区qq堂4.2 #笔记#媒体

玄殿社区qq堂4.2 1、玄殿 玄殿&#xff0c;位于中国北京市的紫禁城内&#xff0c;是明清两代帝王祭天的场所。玄殿前殿为皇帝向神明祭拜的地方&#xff0c;中殿为祭天的主要场所&#xff0c;后殿为宋代遗址。玄殿规模庞大&#xff0c;身为中国传统建筑的代表之一&#xff0c;…
阅读更多...
ubuntu分辨率更改、开机被重置、ubuntu屏幕小

ubuntu分辨率更改、开机被重置、ubuntu屏幕小

ubuntu分辨率更改 分辨率改成&#xff1a;1920x1200 xrandr --size 1920x1200 在此之前可以先输入 xrandr 看支持哪些分辨率 开机被重置 我已经设置成这样了&#xff0c; 一开机变回这个 ubuntu屏幕小 输入命令行 xrandr --size 1920x1200 这个下次重启ubuntu又会重置…
阅读更多...
yolov5转换成TensorRT推理过程笔记

yolov5转换成TensorRT推理过程笔记

笔记内容来自 B站 手写AI 一、用硬代码实现 GitHub - wang-xinyu/tensorrtx: Implementation of popular deep learning networks with TensorRT network definition API 安装python、cuda11.2、cudnn对应cuda11.2软件 1、在yolov5-master下训练完成后生成best.pt文件(训练时…
阅读更多...
【工具插件类教学】Unity运行时监控变量，属性，事件等的值和调用Runtime Monitoring

【工具插件类教学】Unity运行时监控变量，属性，事件等的值和调用Runtime Monitoring

目录 一、介绍 二、安装方式 三、入门 1.实例化和静态成员
阅读更多...
代码随想录刷题笔记-Day21

代码随想录刷题笔记-Day21

1. 二叉搜索树中的插入操作 701. 二叉搜索树中的插入操作https://leetcode.cn/problems/insert-into-a-binary-search-tree/给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 value &#xff0c;将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。…
阅读更多...
【面试题】谈谈MySQL的索引

【面试题】谈谈MySQL的索引

索引是啥 可以把Mysql的索引看做是一本书的目录&#xff0c;当你需要快速查找某个章节在哪的时候&#xff0c;就可以利用目录&#xff0c;快速的得到某个章节的具体的页码。Mysql的索引就是为了提高查询的速度&#xff0c;但是降低了增删改的操作效率&#xff0c;也提高了空间…
阅读更多...
springboot启动自动配置

springboot启动自动配置

1.自定义项命名启动类规范&#xff1a; 功能在前名字在后比如 aliyun-oss-spring-boot-starter starter表示启动 springboot版本需要2.7.5 2.创建springboot工程把该删除的文件删除 3.启动类 pom文件导入自定义配置类依赖 比如 <!--第2步--><!-- 启动类 pom…
阅读更多...
数据结构--排序

数据结构--排序

数据结构--排序 1. 各类排序算法的性质2. 插入排序2.1 直接插入排序2.2 折半插入排序 3. 希尔排序4. 交换排序4.2 冒泡排序 5. 快速排序6. 选择排序6.1 简单选择排序6.2 堆排序 7. 归并排序8. 基数排序 1. 各类排序算法的性质 2. 插入排序 2.1 直接插入排序 2.2 折半插入排序 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023